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)
  }
})
}

This is my registerserviceworker.js. I tried to implement in this file but i am not able to add files and api in this.

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)
  }
})
}

This is my registerserviceworker.js. I tried to implement in this file but i am not able to add files and api in this.

• javascript
• vue.js
• service-worker
• vue-cli

Share Improve this question Follow asked Aug 3, 2018 at 8:51 SwapRengeSwapRenge 12111 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You have to use the "workboxOptions" inside the PWA Object of the vue.config.js. Like this:

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