📦 Workbox Module

npm npm (scoped with tag)

Workbox is a collection of JavaScript libraries for Progressive Web Apps. (Learn more). This module adds full offline support using workbox. Workbox module is only enabled on production builds.

You can pass options to workbox section in nuxt.config.js to override defaults.

workbox: {
 // Workbox options
}

Options

dev - Use dev build for workbox service worker lib.

swURL - If for any reason you need to register another service worker (OneSignal, etc) you can use this option.

importScripts (Array) - Additional scripts to be imported in service worker script. (Relative to /. Can be placed in assets/ directory)

For list of all available options see here

Adding custom runtimeCaching items (For CDN)

By default resources in dist (/_nuxt/) will be cached with CacheFirst and other requests to same domain will be cached with NetworkFirst strategy. Also all JS and CSS webpack emitted resources will be precached.

If you have a custom CDN and need to cache requests for it, simply use runtimeCaching:

nuxt.config.js

workbox: {
      runtimeCaching: [
      {
        // Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*')
        urlPattern: 'https://my-cdn.com/.*',
        // Defaults to `networkFirst` if omitted
        handler: 'cacheFirst',
        // Defaults to `GET` if omitted
        method: 'GET'
      }
    ]
}

Adding custom cache StrategyOption

workbox: {
   runtimeCaching: [
     {
       urlPattern: 'https://my-cdn.com/posts/.*',
       strategyOptions: {
         cacheName: 'our-cache',
         cacheExpiration: {
           maxEntries: 10,
           maxAgeSeconds: 300
         }
       }
     }
   ]
}

Adding custom service worker

Create static/custom-sw.js file:

console.log('Custom service worker!')

Add it with importScripts option in nuxt.config.js:

workbox: {
  importScripts: [
      'custom-sw.js'
  ],
}

results matching ""

    No results matching ""