Ответ 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 рабочего ящика. Конечно, не стесняйтесь объединить два метода.
Я надеюсь, что это помогает !