Ant-design-pro: 单页应用重新部署，如何让已打开的用户能运行在新版本
在 #2803 @chenshuai2144 提到
服务端更新之后更改一下头信息就好了，没必要纠结这些东西，客户端应用和浏览器的应用不是一回事。
能否帮忙详细描述下「服务端更新之后更改一下头信息就好了」这句话？
起因问题：用户通过浏览器上打开单页应用，期间应用重新部署，产生新 js 和 css，这些变化如何让已打开的使用者知道。
我现在的个人小变化做法是：将左侧菜单的点击变成传统的链接，让新的 index.html 能相对及时被刷新。至于打开后右边主体内的链接，则继续使用 react-router。
以现有的 antd-pro 组织方式，我个人试了 PWA（通过 ios safari 将网页添加到主屏幕），点开应用的那一刻会产生 service-worker.js 请求，后续的使用，没有回到主屏幕，重新点击应用，据我观察，并不会产生后续的 service-worker.js 请求。
我期望能有一个更好的做法，可以同时兼顾 pwa 和 网页，让使用者能及时的使用新版本。
jrongbin
All 7 comments
你部署在生产环境中就可以了啊，这个不是客户端应用程序，「服务端更新之后更改一下头信息就好了」，“起因问题”解决方法：你使用http header （http头信息）传递版本号进行处理，例：服务端和客户端每次数据应答都在http头信息中包含版本号，如果客户端发现版本号不对，就注销登录并清空缓存后重新加载
lattemj
on 15 Dec 2018
其实你看一下html中的meta中有一个缓存控制
lattemj
on 15 Dec 2018
@lattemj 你好，谢谢。
的确是可以通过每次同 api 接口交互时，通过 header 带上当前版本号。我是觉得这样做，会让后端本身的 api 职责不清晰，何况，一个 api 接口，还是比较容易存在多个单页应用调用，如一个桌面端，一个移动端。
如果不刷新页面，前后端没有一个搭配处理，已打开的用户只会一直使用旧版。
jrongbin
on 16 Dec 2018
传输 html 的时候带上失效时间，浏览器会帮你处理的。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Expires
chenshuai2144
on 17 Dec 2018
@chenshuai2144 你好，我想表达的是另外一个意思。
对于 index.html 我已经设置了 Cache-Control: max-age=0, private, must-revalidate
可是这种对于已打开的人，就留在原来页面上操作，不手动刷新一次页面来说，是无效的，对吧，我现在有时会接到反馈，说某某某功能怎么没有，或怎么还存在某问题，我都是告知对方，你刷新下浏览器页面。
jrongbin
on 17 Dec 2018
你这种情况最后访问任何资源每次都重新加载，浏览器的缓存本身就是为了减少加载次数才做的
chenshuai2144
on 19 Dec 2018
@chenshuai2144 谢谢回复，我最终找到了一个相对折中方案
首先在 subscriptions 监控路由变化，网址发生改变，就像 github 一样，向后端请求一个事件，后端访问的 json 带有当前最新部署版本信息
前端发现信息不一致时，再调用 service-worker 的 update 方法，更新 service-worker
global.js 中的监听到 sw.updated 出现弹窗，弹出更新窗口（我去掉了4.5秒限制，改为需要手工关闭），最终交由用户自行控制使用新版本时机。
jrongbin
on 22 Dec 2018
Related issues
Jerry-goodboy
·
3Comments
952425340
·
3Comments
kaoding
·
3Comments
2uncle-code
·
3Comments
renyi818
·
3Comments
Most helpful comment
@chenshuai2144 谢谢回复，我最终找到了一个相对折中方案
首先在 subscriptions 监控路由变化，网址发生改变，就像 github 一样，向后端请求一个事件，后端访问的 json 带有当前最新部署版本信息
前端发现信息不一致时，再调用 service-worker 的 update 方法，更新 service-worker
global.js 中的监听到 sw.updated 出现弹窗，弹出更新窗口（我去掉了4.5秒限制，改为需要手工关闭），最终交由用户自行控制使用新版本时机。