Как кешировать api и активы у сервисного работника в vue cli3

1
import { register } from 'register-service-worker'
import pwa from '@vue/cli-plugin-pwa'

if (process.env.NODE_ENV === 'development') {
// if (process.env.NODE_ENV === 'production') {
console.log(pwa)
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)
  }
})
}

Это мой registerserviceworker.js. Я попытался реализовать в этом файле, но я не могу добавить файлы и api в этом.

Теги:
vue.js
vue-cli
service-worker

1 ответ

0

Вы должны использовать "workboxOptions" внутри объекта PWA vue.config.js. Как это:

module.exports = {
    pwa: {
        [...]
        workboxOptions: {
            runtimeCaching: [{
                urlPattern: new RegExp('^https://yourpathtothe.api/'),
                handler: 'networkFirst',
                    options: {
                    networkTimeoutSeconds: 20,
                    cacheName: 'api-cache',
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            }]
        }
    },

Ещё вопросы

Сообщество Overcoder
Наверх
Меню