上线项目页面更新问题

Question

老师，我现在有这样一个需求，就是我们的项目已经上线，但是每次发布新版本之后，用户需要清除缓存才能看到更新的内容。

所以需求就出现了，我观察到，像vue和webpack官方文档的页面，
如果有新内容了右下角会有一个小的浮窗来提示你，“有新内容，是否更新“。
点击更新后就会刷新一下页面，然后就能看见新内容了。

老师我想问的是，

1. 怎么样来检测当前页面有没有新内容
2. 如果有新内容，那一步更新操作是怎么实现的，实际上做了什么呢？

不知道我说的具体不
请老师赐教，不胜感激

Answer 1

张轩 2021-10-01 09:11:38

同学你好 还是没有看到 我这里只有一个广告 它应该检测到我已经至最新的了？ 不过我已经清楚他是使用了 vuepress 的 pwa 功能，它这里针对 service worker 有一个检测是否更新的选项，选项可以显示一个弹窗。https://vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html#%E9%80%89%E9%A1%B9

这里如果你要深入的话，要自己去研究 service worker 以及 PWA 的相关知识。

• 提问者 有没有没被占用的昵称 #1

  感谢老师，每次都耐心解答，爱你。
  期待老师下一门课。

• 提问者 有没有没被占用的昵称 #2

  非常感谢！

Answer 2

张轩 2021-09-30 08:35:51

同学你好 很奇怪 我在右下角并没有看到对应的内容，我把 adBlock 关了也没有，我访问的链接是：https://cn.vuejs.org/v2/guide/index.html

请看图：

• 提问者 有没有没被占用的昵称 #1

  老师我访问的是 v3.cn.vuejs.org/guide/component-props.html

Answer 3

提问者 有没有没被占用的昵称 2021-09-29 09:29:28

图在这里

Answer 4

张轩 2021-09-29 09:16:03

同学你好 

项目上线更新的一般做法是新的上线静态文件修改新的 hash 就可以，

不知道你说的 vue 和 webpack 是哪种方式，我在它们的官方网站也没有看到类似的窗口，请问你能提供一下链接和截图吗？我去试试看它的功能

• 提问者 有没有没被占用的昵称 #1

  老师，我图发在上面那条评论上，电脑版点开右下键可以看到。我打开network看了下，点击后重新请求了静态资源，似乎没有发送http请求