Question

我通过Vuetify使用Vue.js并创建了PWA。

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

     pwa: {

        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
          // swSrc is required in InjectManifest mode.
          swSrc: 'public/service-worker.js',
          // ...other Workbox options...
        }
      }

这看起来效果很好，并且可以缓存shell等。

我运行构建并为项目服务 npm运行构建

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

当我导航到我的android设备中的网址时，该页面仍然是旧页面（已缓存）。

如何获取更新？

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

https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users

service-worker.js

    importScripts("/precache-manifest.8812c20b1b3401cbe039782d13cce03d.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

    console.log(`Hello from service worker`);
    if (workbox) {
      console.log(`Workbox is loaded`);


      self.__precacheManifest = [].concat(self.__precacheManifest || []);
      workbox.precaching.suppressWarnings();
      workbox.precaching.precacheAndRoute(self.__precacheManifest, {});



      addEventListener('message', (event) => {
        if (event.data && event.data.type === 'SKIP_WAITING') {
          skipWaiting();
        }
      });

    }
    else {
      console.log(`Workbox didn't load`);
    }

Answer 1

不确定安装程序的确切设置，但是应该类似。使用@vue/cli-plugin-pwa，并在下面进行最少的设置。

当有新版本的应用程序可用时，这将显示一个对话框。单击是将更新您的应用程序。您必须以某种方式刷新页面才能实际显示新版本，但这取决于您如何解决。

vue.config.js：

module.exports = {
  pwa: {
    name: "name-of-your-app",
    short_name: "noya",
    themeColor: "#000000",
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js" // CHECK CORRECT PATH!
    }
  }
};

src / main.js：

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
// whatever other imports...

new Vue({
  render: h => h(App)
}).$mount("#app");

src / registerServiceWorker.js：

import { register } from "register-service-worker";

if (process.env.NODE_ENV === "production") {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated(registration) {
      if (window.confirm("A new version is available, update now?")) {
        const worker = registration.waiting;
        worker.postMessage({ action: "SKIP_WAITING" });
        // refresh the page or trigger a refresh programatically!  
      }
    }
  });
}

src / service-worker.js：

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

self.addEventListener("message", (event) => {
  if (event.data.action == "SKIP_WAITING") self.skipWaiting();
});

Answer 2

通过遵循offer_a_page_reload_for_users可以使它正常工作。原始的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();
}

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

2 个答案: