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)

offlineAssets (String) - List of assets to precache, in case you need extra files precached other than the ones automatically processed (_nuxt/* etc) or you want to ensure assets used by your offlinePage. (Example: ['/offline.png'])

offlinePage (String) - Enables routing all offline requests to the specified path. (Example: /offline.html)

Please note that enabling offlinePage will disable /.* caching and will route all offline requests to the specified path. Nuxt assets are still precached as are the ones specified in offlineAssets.

cachingExtensions (String) - Loads and inserts the contents of the specified file path into the service worker script, below autogenerated calls to workbox.precaching.*. You may add as many extra calls as you want to this file.

routingExtensions (String) - Loads and inserts the contents of the specified file path into the service worker script, below autogenerated calls to workbox.routing.*. You may add as many extra calls as you want to this file.

config (Object) - Sets custom configurations to workbox using workbox.setConfig(). For example, set { modulePathPrefix: '/third_party/workbox/' } to use local workbox files instead of google CDN.

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'
],
}