Vue.js 显示在Vue中创建的更新PWA

我使用Vuetify使用Vue.js并创建一个PWA

我在/public文件夹中有service-worker.js vue.config.js中的一段代码：

pwa：{ //配置workbox插件 workboxPluginMode:“InjectManifest”， workboxOptions：{ //在清单模式下需要swSrc。 swSrc:'public/service worker.js'， //…其他工作盒选项。。。 } } 这看起来也很好，可以缓存shell等

我负责项目的建设和服务 npm运行构建

我的问题是，当我更新任何文件时，我看不到更新的更改

当我在android设备中导航到url时，页面仍保持缓存的旧页面

我怎样才能让它更新

我尝试在index.html中包含此代码，但没有成功：

service-worker.js

进口文件/precache-manifest.8812C20B1B3401CBE09782D13CCE03D.js，https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js; console.log`Hello from service worker`； 中频工作盒{ console.log“已加载工作盒”； 赛尔夫。赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔； workbox.precaching.suppress警告； 工作箱。预制。预制和自成一体。uuu precacheManifest，{}； addEventListener“消息”，事件=>{ 如果event.data&&event.data.type==“跳过等待”{ skipWaiting； } }; } 否则{ console.log“未加载Workbox”； }

---

不确定您的具体设置是什么，但应该是类似的。使用@vue/cli插件pwa，并在下面进行最低限度的设置

当应用程序的新版本可用时，将显示一个对话框。单击“是”将更新您的应用程序。您将不得不以某种方式刷新页面以实际显示新版本，但这取决于您如何解决该问题

vue.config.js：

module.exports={ pwa：{ 名称：您的应用程序的名称， 简称：noya， 颜色：000000， workboxPluginMode:InjectManifest， workboxOptions：{ swSrc:src/service-worker.js//检查正确的路径！ } } }; src/main.js：

从Vue导入Vue； 从导入应用程序。/App.vue； 导入./registerServiceWorker； //无论其他进口商品是什么。。。 新Vue{ 渲染：h=>hApp }$mountapp； src/registerServiceWorker.js：

从注册服务工作者导入{register}； 如果process.env.NODE_env==生产{ 注册`${process.env.BASE\u URL}service worker.js`{ 更新注册{ 如果window.confirmA新版本可用，是否立即更新{ const worker=registration.waiting； worker.postMessage{action:SKIP_WAITING}； //刷新页面或以编程方式触发刷新！ } } }; } src/service-worker.js：

赛尔夫。赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔； workbox.precaching.suppress警告； 工作箱。预制。预制和自成一体。uuu precacheManifest，{}； self.addEventListenermessage，事件=>{ 如果event.data.action==SKIP_WAITING self.skipWaiting； };

---

不确定您的具体设置是什么，但应该是类似的。使用@vue/cli插件pwa，并在下面进行最低限度的设置

当应用程序的新版本可用时，将显示一个对话框。单击“是”将更新您的应用程序。您将不得不以某种方式刷新页面以实际显示新版本，但这取决于您如何解决该问题

vue.config.js：

module.exports={ pwa：{ 名称：您的应用程序的名称， 简称：noya， 颜色：000000， workboxPluginMode:InjectManifest， workboxOptions：{ swSrc:src/service-worker.js//检查正确的路径！ } } }; src/main.js：

从Vue导入Vue； 从导入应用程序。/App.vue； 导入./registerServiceWorker； //无论其他进口商品是什么。。。 新Vue{ 渲染：h=>hApp }$mountapp； src/registerServiceWorker.js：

从注册服务工作者导入{register}； 如果process.env.NODE_env==生产{ 注册`${process.env.BASE\u URL}service worker.js`{ 更新注册{ 如果window.confirmA新版本可用，是否立即更新{ const worker=registration.waiting； worker.postMessage{action:SKIP_WAITING}； //刷新页面或以编程方式触发刷新！ } } }; } src/service-worker.js：

赛尔夫。赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔夫赛尔； workbox.precaching.suppress警告； 工作箱。预制。预制和自成一体。uuu precacheManifest，{}； self.addEventListenermessage，事件=>{ 如果event.data.action==SKIP_WAITING self.skipWaiting； };

---

我通过以下方法使它工作。不过，最初的registerServiceWorker.js似乎是多余的

src/registerServiceWorker.js

import { Workbox } from "workbox-window";

if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
  const wb = new Workbox("/service-worker.js");

  wb.addEventListener("waiting", () => {
    const result = window.confirm("refresh now?");
    if (result) {
      wb.messageSW({ type: "SKIP_WAITING" });
    }
  });

  wb.addEventListener("controlling", () => {
    window.location.reload();
  });

  wb.register();
}

---

我通过以下方法使它工作。不过，最初的registerServiceWorker.js似乎是多余的

src/registerServiceWorker.js

import { Workbox } from "workbox-window";

if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
  const wb = new Workbox("/service-worker.js");

  wb.addEventListener("waiting", () => {
    const result = window.confirm("refresh now?");
    if (result) {
      wb.messageSW({ type: "SKIP_WAITING" });
    }
  });

  wb.addEventListener("controlling", () => {
    window.location.reload();
  });

  wb.register();
}

---

请粘贴整个工作箱配置并生成dist SW。js@pate我已经包括了你使用的誓言

---

vue-cli-3？@CENT1PEDE是vue cli 3请粘贴整个工作箱配置并生成dist SW。js@pate我已经包括了使用vue-cli-3向您发誓？@CENT1PEDE是的vue cli 3I尝试了这一点，但是在移动设备上它仍然显示缓存的版本，因为移动客户端仍在运行不包含上述更新的旧版本。尝试删除应用程序并重新添加。其他注意事项：在使用vue cli v4时，不要使用workbox.precaching.suppressWarnings；我尝试过这个，但是在移动设备上，它仍然会显示缓存的版本，因为移动客户端仍在运行不包含上述更新的旧版本。尝试删除应用程序并重新添加。其他注意事项：在使用vue cli v4时，不要使用workbox.precaching.suppressWarnings；