我有SSR
反向代理服务的nginx
React 应用,并为应用 location
配置了代理缓存。类似的东西:
proxy_cache_path /var/lib/nginx/cache levels=1:2 keys_zone=mycache:8m max_size=50m;
proxy_cache_key "$scheme$request_method$host$request_uri$is_args$args";
proxy_cache_valid 200 302 10m;
proxy_cache_valid 404 1m;
location / {
proxy_cache mycache;
proxy_cache_bypass $http_cache_control;
add_header X-Proxy-Cache $upstream_cache_status;
# all the other configuration for this location
}
我正在使用offline-plugin Webpack 插件来处理所有 Service Worker 生命周期,并在SW更新时设置event。
在设置nginx
缓存配置之前,SW行为是:
sw.js
并且无需连接互联网sw
检测更新,缓存新资产的相关进程,然后是前面提到的事件(在我的情况下触发窗口刷新以确保所有内容都是新的)设置nginx
缓存配置(前面显示的示例代码)后,描述的过程没有发生。实现这一目标的唯一方法是进行硬刷新清理浏览器的cache
。在这种情况下,获取一个新的sw.js
来检测更改,依此类推。
当然,在私人模式下浏览会始终触发事件(安装sw,缓存等)。
我注意到文件sw.js
已缓存(参见下文),并且还会返回标头 x-proxy-cache: HIT
,确认所提供的文件来自缓存。
因为必须始终获得新鲜的sw.js
我尝试过这样的事情:
location /sw.js {
expires -1;
add_header Cache-Control "no-store";
}
但是,在nginx
网站启用的配置中执行此规则时,sw.js
文件的响应很差。浏览新会话我得到:
还发现similar issue中有一个react-boilerplate,但据我所知,这个样板不做SSR(重新说明SSR点以显示差异,可能有助于更好地理解但不知道是否与问题有关。)