How to use workbox-webpack-plugin together with Nuxt PWA

Question

I'm currently on Nuxt with PWA Plugin, including workbox module. However if I'm not mistaken this plugin doesn't allow to add the assets generated by webpack to precaching.

Is it possible to use workbox-webpack-plugin for only generating the precaching part of the sw.js file? If so, how would it be done?

There is some documentation on https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin, however I'm not sure how to apply this to the Nuxt PWA context.

Answer 1

Turns out this is only a problem in Version 3. For now I'm using the following workaround:

• create empty file plugins/sw-precache-register.js
• create file plugins/sw-precache.js with following content:

workbox.precaching.precacheAndRoute(self.__precacheManifest)

• add the following to nuxt.config.js:

import { InjectManifest } from 'workbox-webpack-plugin'

...

  workbox: {
    importScripts: ['_nuxt/sw-precache.js'],
    workboxExtensions: ['~/plugins/sw-precache-register.js']
  }

If anybody has a better solution I'll acceppt that answer.