Workbox release v5.0

[acgotakuatdji]

What problem does this feature solve?

ref: https://github.com/GoogleChrome/workbox/releases/tag/v5.0.0

Workbox v5.0 fix many problems, we want to use workbox 5.0 version as soon as possible!

Thank you very much!

What does the proposed API look like?

Please upgrade workbox-webpack-plugin to v5.0.

[LinusBorg]

This is likely only possible in a Vue CLI major release since this is a new major as well.

You can however upgrade workbox yourself and see if it works for you, i.e. by using yarn's resolutions feature:

https://legacy.yarnpkg.com/en/docs/selective-version-resolutions/

[luffs]

I got v5 to work by replacing @vue/cli-plugin-pwa with workbox-webpack-plugin, using the following vue.config.js:

const { InjectManifest } = require('workbox-webpack-plugin')

//optional, but InjectManifest didn't respect the {mode: 'development'} config
process.env.NODE_ENV = 'development'

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new InjectManifest({
        swSrc: './src/service-worker.js'
      })
    ]
  }
}

[fuzzzerd]

This is pretty important to using InjectManifest with typescript: https://github.com/GoogleChrome/workbox/issues/1513#issuecomment-506482323

[rusco]

I have the problem that I have to serve my app in our intranet, I found out that finally Workbox 5+ is able to do that:

importScripts('/workbox/workbox-v5.1.3/workbox-sw.js');

workbox.setConfig({
    modulePathPrefix: '/workbox/workbox-v5.1.3/'
});

workbox.loadModule('workbox-core');
workbox.loadModule('workbox-routing');
workbox.loadModule('workbox-strategies');
workbox.loadModule('workbox-precaching');

if (workbox) {
    console.log(` Yay! Workbox is loaded 🎉`);
    //my code 
} else {
    console.log(` Boo! Workbox didn't load 😬`);
}

But in the end I lost quite some hours trying to set up vue(cli), vuetify and pwa and came to the conclusion that a vanilla service-worker api does work fine, is more robust and despite being low-level allows me to understand what's going on and bend the code to my own needs

[phil294]

iirc, workbox-webpack-plugin v5 has the advantage of bundling the code alongside and offline (edit: https://github.com/GoogleChrome/workbox/releases/tag/v5.0.0), while v4 still implictly includes calls to googleapis.com.

Because of this, an upgrade would be great, but until the next major version, I found setting the version manually (see Linus' answer) works very well

[kasperkamperman]

new InjectManifest({
        swSrc: './src/service-worker.js'
      })

@luffs I tried this however I get: Can't find self.__WB_MANIFEST in your SW source.

Any idea.

Is there a way to move to Workbox v5 without yarn (but npm). I de-installed the Vue PWA plugin.

[kasperkamperman]

Ok I found the solution: vue.config.js:

new InjectManifest({
 swSrc: "./src/service-worker.js",
 swDest: "service-worker.js"
})

service-worker.js:

// before: workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST, {});

[CalebKester]

I went ahead and removed @vue/cli-plugin-pwa/ and got my service worker working based upon the feedback above. However it also removes all of the other nice mappings that the plugin does (icons/images).

So I backtracked and tried to add the following resolutions:

"resolutions": { "@vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.1.3" },

It seems to be working. I had to update workboxOptions: { swSrc: './src/service-worker.js', }, but otherwise I think that's all that's needed to start using the new workbox service-worker.

Example of what my service-worker.js looks like

import { CacheFirst, StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute } from 'workbox-precaching';

// eslint-disable-next-line no-restricted-globals, no-underscore-dangle
precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
    ({ request }) => request.destination === 'script',
    new NetworkFirst({
        cacheName: 'script-cache',
    }),
);
/* Bunch of other stuff below */

I'll keep testing it but if anyone else has done this i'd like to hear if there's anything else.

[FossPrime]

So I backtracked and tried to add the following resolutions:

"resolutions": { "@vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.1.3" },

This only works if you use yarn on dev, your deployments, containers and are okay with breaking pnpm and glitch. You could use the post install lock workarounds, but resolutions are problematic to begin with.

Despite me using the PWA plugin, I'll use the other more direct mappings as I'm starting to heavily rely on workers for things.

5838 The path forward is clearly one where service workers work offline, with Webpack 5 HMR, are always on in dev mode and are integral to regular development. As such, I think @lyffs method should become the vue cli norm, not the exception.

[sisou]

Latest release (@vue/cli v5) is now using workbox 6.