Vue Cli 3 как использовать официальный плагин PWA (Service Worker)

Ответ 1

Как уже указывалось, это скорее вопрос "обслуживающего персонала", чем "vue cli". Прежде всего, чтобы убедиться, что мы находимся на одной странице, вот как должно выглядеть шаблонное содержимое файла registerServiceWorker.js(vue cli 3, официальный плагин pwa):

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register('${process.env.BASE_URL}service-worker.js', {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

Если вы не изменили переменную BASE_URL в своем файле .env, то он должен соответствовать корню вашего приложения vue. Вы должны создать файл с именем service-worker.js в общей папке (чтобы он копировался в ваш выходной каталог при сборке).

Теперь важно понимать, что весь код в файле registerServiceWorker.js регистрирует работника службы и предоставляет несколько хуков в его жизненный цикл. Они обычно используются для целей отладки, а не для фактического программирования работника сервиса. Вы можете понять это, заметив, что файл registerServiceWorker.js будет включен в файл app.js и запущен в основном потоке.

Официальный плагин vue-cli 3 для PWA основан на рабочей среде Google, поэтому для использования работника службы вам сначала нужно создать файл с именем vue.config.js в корневом каталоге вашего проекта и скопировать в него следующий код:

// vue.config.js
module.exports = {
    // ...other vue-cli plugin options...
    pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'public/service-worker.js',
            // ...other Workbox options...
        }
    }
}

Если вы уже создали файл vue.config.js, вам просто нужно добавить атрибут pwa в объект конфигурации. Эти настройки позволят вам создать своего сотрудника по работе с персоналом, расположенного в public/service-worker.js, и иметь в рабочем окне какой-то код: манифест предварительного кэша. Это файл .js, в котором список ссылок на ваши скомпилированные статические ресурсы хранится в переменной, обычно называемой self.__precacheManifest. Вы должны построить свое приложение в производственном режиме, чтобы убедиться, что это так.

Так как он создается автоматически рабочей коробкой при сборке в производственном режиме, манифест предварительного кэширования очень важен для кэширования оболочки приложения Vue, поскольку статические ресурсы обычно разбиваются на порции во время компиляции, и вам будет очень утомительно ссылаться на эти порции в сервисном работнике каждый раз, когда вы (пере) собираете приложение.

Для предварительного кэширования статических ресурсов вы можете поместить этот код в начало вашего файла service-worker.js (вы также можете использовать оператор try/catch):

if (workbox) {
    console.log('Workbox is loaded');

    workbox.precaching.precacheAndRoute(self.__precacheManifest);

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

Затем вы можете продолжить программирование вашего работника сервиса в том же файле, либо используя базовый API работника сервиса, либо API рабочего ящика. Конечно, не стесняйтесь объединить два метода.

Я надеюсь, что это помогает !

Ответ 2

как дополнение к ответу выше: я написал небольшое руководство о том, как пойти дальше и добавить некоторые функциональные возможности к пользовательскому сервисному работнику, используя вышеописанную настройку. Вы можете найти это здесь.

Четыре основные вещи, которые нужно иметь в виду:

1. настройте Workbox в vue.config.js на режим InjectManifest, указав ключ swSrc на пользовательский файл сервисного работника в /src

2. В этом пользовательском сервисе-работнике некоторые строки будут автоматически добавлены в процесс сборки для импорта workbox CDN precache-manifest и workbox CDN. Следующие строки должны быть добавлены в пользовательский файл service-worker.js для фактического предварительного кэширования файлов манифеста:

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

3. Прослушайте события регистрации в файле registerServiceWorker.js. Вы можете использовать объект регистрации, который передается в качестве первого аргумента обработчикам событий, чтобы публиковать сообщения в файле service-worker.js:

   ...
   updated(registration) {
     console.log("New content is available; please refresh.");
     let worker = registration.waiting
     worker.postMessage({action: 'skipWaiting'})
   },
   ...
   

4. Подпишитесь на сообщения в файле service-worker.js и действуйте соответственно:

   self.addEventListener("message", (e)=>{
       if (e.data.action=='skipWaiting') self.skipWaiting()
   })
   

Надеюсь, это кому-нибудь поможет.

Ответ 3

Когда я пытаюсь добавить pwa: {} в module.exports = {} в vue.config.js, он показывает "pwa не определен", я что-то пропустил?

Я установил @vue/cli глобально, @vue/cli-pligin-pwa локально и запустил "vue add pwa" в "существующий проект".