Запросы с помощью axios к API сервера Vue приложения не кешируются Service Worker'ом (vue/cli-plugin-pwa)
Проект
Vue SPA приложение. Запросы к серверу через axios. Добавлен PWA плагин (vue/cli-plugin-pwa).
Проблема
Результаты запросов к серверу не кешируются. В Cache Storage адреса запросов не добавляются. Соответственно оффлайн режим не работает.
Что было сделано
- Добавлен vue/cli-plugin-pwa командой vue add pwa
- Проверен файл registerServiceWorker.js (см. ниже) 2.1 Проверил, что main.js registerServiceWorker.js импортирован.
- Добавлен конфиг для манифеста в vue.config.js (см. ниже)
- Добавлен конфиг для pwa в vue.config.js (см. ниже)
- После сборки проекта командой npm run build проверил, что в директории dist файлы manifest.json, precache-manifest и service-worker.js создаются.
- Задеплоил и проверил, что после запуска проекта в консоли Chrome 'Service worker has been registered' пишется и как Manifest так и Service Worker во вкладке Application отображаются.
Код
Файл registerServiceWorker.js стандартный:
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' +
'For more details, visit goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
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)
}
})
}
vue.config.js:
pwa: {
manifestOptions: {
name: "Old Vehicles. Parts handbook",
start_url: "/"
},
workboxPluginMode: 'GenerateSW',
workboxOptions: {
navigateFallback: '/index.html',
runtimeCaching: [{
urlPattern: new RegExp('^http'),
handler: 'NetworkFirst',
options: {
networkTimeoutSeconds: 2,
cacheName: 'api-cache',
cacheableResponse: {
statuses: [0, 200]
},
},
}]
}
}