Multiple instances of self.__WB_MANIFEST - service-worker

Question

(Related to this question)
I am using quasar v2.0.0-beta.5 and "workbox-webpack-plugin": "^5.1.4", following a pwa tutorial. I am now working on the service workers part using workboxPluginMode: 'InjectManifest' in quasar.conf.js. My custom-service-worker.js is just:
import { precacheAndRoute } from 'workbox-precaching'
precacheAndRoute(self.__WB_MANIFEST)
I get the following error when loading the pwa
Uncaught not-an-array: The parameter 'entries' passed into
'workbox-precaching.PrecacheController.addToCacheList()' must be an
array
I have updated to lastest version of Workbox: npm install --save-dev workbox-webpack-plugin#^6.1.0 to see if it makes a difference and now I get the following error during the quasar dev -m pwa
Multiple instances of self.__WB_MANIFEST were found in your SW source.
Include it only once. For more info, see GoogleChrome/workbox#2681
The problem is that without fixing this problem, I am not able to debug the different cache strategies.
Platform (please complete the following information): Quasar Version:
v2.0.0-beta.5 #quasar/app Version: v3.0.0-beta.7 Quasar mode: [ ] SPA
[ ] SSR [x ] PWA [ ] Electron [ ] Cordova [ ] Capacitor [ ] BEX Tested
on: [ ] SPA [ ] SSR [x ] PWA [ ] Electron [ ] Cordova [ ] Capacitor [
] BEX OS: windows 10 Node: v14.15.1 NPM: 6.14.8 Yarn: 1.22.10
Browsers: chrome (latest) iOS: Android: Electron:

Answer 1

Do this in your service worker file.
if (process.env.NODE_ENV === 'production') {
precacheAndRoute(self.__WB_MANIFEST);
}

Answer 2

I solved it problems, just add this code in service-worker.js
precacheAndRoute(self.__WB_MANIFEST || []);
const { assets } = global.serviceWorkerOption;
let assetsToCache = [...assets, './'];
assetsToCache = assetsToCache.map((path) => {
return new URL(path, global.location).toString();
});
// When the service worker is first added to a computer.
self.addEventListener('install', (event) => {
// Perform install steps.
if (DEBUG) {
console.log('[SW] Install event');
}
// Add core website files to cache during serviceworker installation.
event.waitUntil(
global.caches
.open(CACHE_NAME)
.then((cache) => {
return cache.addAll(assetsToCache);
})
.then(() => {
if (DEBUG) {
console.log('Cached assets: main', assetsToCache);
}
})
.catch((error) => {
console.error(error);
throw error;
})
);
});