Запросы с помощью axios к API сервера Vue приложения не кешируются Service Worker'ом (vue/cli-plugin-pwa)

Проект

Vue SPA приложение. Запросы к серверу через axios. Добавлен PWA плагин (vue/cli-plugin-pwa).

Проблема

Результаты запросов к серверу не кешируются. В Cache Storage адреса запросов не добавляются. Соответственно оффлайн режим не работает.

Что было сделано

  1. Добавлен vue/cli-plugin-pwa командой vue add pwa
  2. Проверен файл registerServiceWorker.js (см. ниже) 2.1 Проверил, что main.js registerServiceWorker.js импортирован.
  3. Добавлен конфиг для манифеста в vue.config.js (см. ниже)
  4. Добавлен конфиг для pwa в vue.config.js (см. ниже)
  5. После сборки проекта командой npm run build проверил, что в директории dist файлы manifest.json, precache-manifest и service-worker.js создаются.
  6. Задеплоил и проверил, что после запуска проекта в консоли 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]
                },
            },
        }]
    }
}

Ответы (0 шт):