避免使用nginx缓存sw.js.

时间:2017-11-09 12:51:04

标签: reactjs nginx webpack service-worker ssr

我有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行为是:

  • 首次加载 App (并完成所有sw流程)后,浏览器已sw.js并且无需连接互联网
  • 部署新代码
  • 新的浏览器窗口检查后没有其他窗口打开相同的网址
  • sw检测更新,缓存新资产的相关进程,然后是前面提到的事件(在我的情况下触发窗口刷新以确保所有内容都是新的)

设置nginx缓存配置(前面显示的示例代码)后,描述的过程没有发生。实现这一目标的唯一方法是进行硬刷新清理浏览器的cache 。在这种情况下,获取一个新的sw.js来检测更改,依此类推。

当然,在私人模式下浏览会始终触发事件(安装sw,缓存等)。

我注意到文件sw.js已缓存(参见下文),并且还会返回标头 x-proxy-cache: HIT,确认所提供的文件来自缓存。

sw-cached

因为必须始终获得新鲜的sw.js我尝试过这样的事情:

location /sw.js {
  expires -1;
  add_header Cache-Control "no-store";
}

但是,在nginx网站启用的配置中执行此规则时,sw.js文件的响应很差。浏览新会话我得到:

sw-bad-response

还发现similar issue中有一个react-boilerplate,但据我所知,这个样板不做SSR(重新说明SSR点以显示差异,可能有助于更好地理解但不知道是否与问题有关。)

0 个答案:

没有答案