CODEWITHSUNDEEP
service-workerworkboxquasar
trxw
trxw

Reputation: 103

Multiple instances of self.__WB_MANIFEST

(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:

Upvotes: 5

Views: 3058

Answers (2)

yoona
yoona

Reputation: 31

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;
      })
  );
});

Upvotes: 0

Nalin Mathur
Nalin Mathur

Reputation: 956

Do this in your service worker file.

if (process.env.NODE_ENV === 'production') {
  precacheAndRoute(self.__WB_MANIFEST);
}

Upvotes: 2

Related Questions