【发布时间】：2022-08-19 00:07:13
【问题描述】：
旧版应用程序出现服务工作者缓存问题，阻止我为新应用程序提供服务。
简短的介绍：
旧版应用程序是用 Vue 编写的，带有 vite-plugin-pwa（零配置服务工作者）。当我尝试将我的域指向不同的地方时 - 现有访问者仍由工作人员提供旧版应用程序。
完整的问题描述（在 \"quotes\" 中组成名称）：
步骤 0: 使用 Vue 编写并使用 vite-plugin-pwa 的旧版应用程序托管在 \"blabla.hosting.bla\" 中，DNS 将 \"example.com\" 指向 \"blabla.hosting.bla\"。
步骤1：创建新网页，意在替换旧版。托管在“yadayada.hosting.yada”。更改 DNS 以使 \"example.com\" 现在指向 \"yadayada.hosting.yada\"。
结果：访问“example.com”的新访问者会看到新页面。但是，现在访问 \"example.com\" 的过去访问者仍然会看到旧页面。为什么？因为服务人员正在为他们服务。
第2步: 更改 DNS 使 \"home.example.com\" 指向 \"yadayada.hosting.yada\"（新页面），\"example.com\" 再次指向旧页面 - \"blabla.hosting. bla\" 并添加了 \"example.com\" 到 \"home.example.com\" 的服务器端重定向。
结果: 访问 \"example.com\" 的新访问者被正确地重定向到 \"home.example.com\"。但是过去的访问者不会被重定向——他们不断地从服务工作者那里获取缓存的页面。
我的结论- 没有办法从服务器解决这个问题 - 我必须做一个客户端解决方案。具体来说 - 禁用工作人员，或至少禁用他的缓存，并将客户端重定向到“home.example.com”。让它像这样持续几周 - 然后像第 1 步一样更新 CDN。 要求所有用户进行手动干预（注销工作人员等）不是一个选项
总的来说，我的想法是：
- 改回 DNS 以便 \"example.com\" 转到旧页面 \"blabla.hosting.bla\" 并且 \"home.example.com\" 转到新页面。
- 提供旧项目的更新版本 - 禁用/重新配置服务工作者 - 以防止其将旧内容作为后备服务
- 此外，更新后的代码将客户端重定向到“home.example.com”
- 几周后 - 只需将“example.com”指向新主页。
您如何看待这种方法？结果将是 100% 的访问者将不得不经历一段时间的客户端重定向体验（有点糟糕，对 SEO 不利，但无论如何） - 希望到那时，一旦 \"example.com\" 点对于新应用程序，服务人员不会启动。
您对此类案例有见解和经验吗？
至于怎么做 - 我在想一些事情（忽略 [0] - 我将使用循环 - 只是一个例子）：
const registrations = await navigator.serviceWorker.getRegistrations(); await registrations[0].unregister(); document.location.href = \"https://home.example.com\"你怎么看？这会起作用还是我也应该完全移除工人？这是一个 Vue 应用程序，它使用 vite-plugin-pwa - 所以如果有更好的方法，请告诉我。
标签： vue.js progressive-web-apps service-worker vite