Показать обновленный PWA, созданный в Vue - PullRequest
Новая
       27

Показать обновленный PWA, созданный в Vue

0 голосов
/ 27 июня 2019

Я использую Vue.js с Vuetify и создаю PWA.

У меня есть файл service-worker.js в папке / public. Фрагмент из 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...
        }
      }

Это тоже выглядит хорошо, работает и кеширует оболочку и т.д.см. обновленные изменения.

при переходе по URL-адресу на моем устройстве 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`);
    }

1 Ответ

1 голос
/ 03 июля 2019

Не уверен, что именно ваши настройки, но она должна быть похожа.Использование @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();
});
...