Vue项目部署新版本后怎么提示用户刷新浏览器？

Question

vue项目部署新版本后，用户如果不刷新页面，可能会出现一些异常，需要刷新后才能正常使用，所以希望每次部署新版本后，提示用户刷新浏览器。

之前看vue文档，发现类似的功能

诸如coding也有类似的功能，虽然coding用的是react

初步研究，发现不是通过轮询或者websocket向后端查询版本的方式实现的，google后也没有找到想要的答案，求各位大佬指点一二。

Answer 1

后者不清楚，前者 VuePress 的这个功能是基于 Chrome PWA 实现的 Web Push。底层本质还是 WebSocket，只不过是在 Service Worker 发起的，你在主页面的控制台里看不到。

感兴趣的话你可以自行搜索一下 “PWA Web Push”。

Answer 2

最近看了一下 vuepress 源码, 发现被采纳的回答存在错误, 为防止后面的朋友被误导, 便发了以下的内容:

vuepress 的通知刷新功能是通过一款官方插件 plugin-pwa 实现的, 原理就是在注册 serviceWorker 时判断 serviceWorker.js 是否发生变动, 若是变动则弹窗提示用户刷新;

注册 serviceWorker 是通过 register-service-worker 实现的, 具体如下:

navigator.serviceWorker
    .register(swUrl, registrationOptions)
    .then(registration => {
      emit('registered', registration)
      if (registration.waiting) {
        emit('updated', registration)
        return
      }
      // ... 其他代码不展示
    }

可以看到, 插件在注册 serviceWorker 时判断 registration 的 waiting 状态, 从而判定 serviceWorker 是否存在新版本, 再执行对应的更新操作, 也就是弹窗提示;

对于 serviceWorker 的运行机制可以查看 MDN 的这一段话:

无论它与现有service worker不同（字节对比），还是第一次在页面或网站遇到service worker，如果下载的文件是新的，安装就会尝试进行。

如果这是首次启用service worker，页面会首先尝试安装，安装成功后它会被激活。

如果现有service worker已启用，新版本会在后台安装，但不会被激活，这个时序称为worker in waiting。直到所有已加载的页面不再使用旧的service worker才会激活新的service worker。只要页面不再依赖旧的service worker，新的service worker会被激活（成为active worker）。

所以, 并不像被采纳的回答说的 "基于 Chrome PWA 实现的 Web Push", 希望可以更正!

Answer 3

简单一点的方案就是把版本号数据写入cookie或者写到请求的header里，后台拿到请求上的版本号做对比，如果不是最新版就在返回的数据里某个通用标识字段描述。前端在全局的请求拦截那里也来一次判断。

实际在真实业务项目里，更新后旧会话失效，直接重定向操作了。

Answer 4

我的思路大致如下。
服务器存储所有发布过得版本号，
router的钩子函数中（一旦访问页面），请求接口查询最新的版本号，
判断与前端的pakage.json的版本号是否一致，
如果不一致的话就提示
个人愚见~