InjectManifest precaching not working

[javierrodrigo]

Hi, I am working on my first PWA with quasar V2 following a tutorial. When I use InjectManifest in the quasar.conf.js and write in the custom-service-worker.js file

import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

I get the following error on the console:

Uncaught not-an-array: The parameter ‘entries’ passed into ‘workbox-precaching.PrecacheController.addToCacheList()’ must be an array.

Any idea?

[javierrodrigo]

I have console.log self.__WB_MANIFEST and it shows an array:

(18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {revision: “af49a4afbddb67acc19c25288c66253e”, url: “0.js”}
1: {revision: “ff7e46f28d1e05a7822427bf80fa0cf9”, url: “1.js”}
2: {revision: “446c1824dc65b307bbaea0eb474c681f”, url: “2.js”}
3: {revision: “b63d5b342bc0998986bd17c68b8471bf”, url: “3.js”}
4: {revision: “bf258e94b3661a5584726c8bb8e1b7d8”, url: “app.js”}
5: {revision: “a5ee087912cbedb6022426ea0b41f8bd”, url: “fonts/Eva-Icons.woff”}
6: {revision: “cae252678f70ff0200acde68a6e74640”, url: “fonts/Eva-Icons.woff2”}
7: {revision: “5cb7edfceb233100075dc9a1e12e8da3”, url: “fonts/KFOkCnqEu92Fr1MmgVxIIzQ.woff”}
8: {revision: “87284894879f5b1c229cb49c8ff6decc”, url: “fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff”}
9: {revision: “b00849e00f4c2331cddd8ffb44a6720b”, url: “fonts/KFOlCnqEu92Fr1MmSU5fBBc-.woff”}
10: {revision: “adcde98f1d584de52060ad7b16373da3”, url: “fonts/KFOlCnqEu92Fr1MmWUlfBBc-.woff”}
11: {revision: “bb1e4dc6333675d11ada2e857e7f95d7”, url: “fonts/KFOlCnqEu92Fr1MmYUtfBBc-.woff”}
12: {revision: “60fa3c0614b8fb2f394fa29944c21540”, url: “fonts/KFOmCnqEu92Fr1Mu4mxM.woff”}
13: {revision: “57d7c5f1564284b8704b641ecb899e01”, url: “fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff”}
14: {revision: “7df112be03585591874096e3254cdf34”, url: “fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2”}
15: {revision: “a3eb3a04b20741ab9f21347c5315e950”, url: “index.html”}
16: {revision: “66bdf7b5acf7b720c07e752c0cb36108”, url: “manifest.json”}
17: {revision: “1d944c9355d9f7040a1fcd57e5938d81”, url: “vendor.js”}
length: 18
proto: Array(0)

[javierrodrigo]

If I change to GenerateSW, the workbox Precaching 18 files is done correctly. However, I need the InjectManifest for push notifications

[dobbel]

@javierrodrigo

However, I need the InjectManifest for push notifications

Considering Qv2 is still in beta , maybe use Q v1…?

[javierrodrigo]

Reading some posts (https://github.com/quasarframework/quasar/issues/4733) it looks like it is the way it has to work when working on dev. I have made the production build and hosting and it works right.

So knowing this, it is fine for me

[elburgl69]

The uncaught error prevents correctly loading your event listeners for PWA. The root cause is in the example custom-service-worker.js|ts file in the documentation that contains an error at the end.

// Non-SSR fallback to index.html
// Production SSR fallback to offline.html (except for dev)
if (process.env.MODE !== 'ssr' || process.env.PROD) {
  registerRoute(
    new NavigationRoute(
      createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
      { denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
    )
  )
}

Change is to:

// Non-SSR fallback to index.html
// Production SSR fallback to offline.html (except for dev)
if (process.env.MODE === 'ssr' && process.env.PROD) {
  registerRoute(
    new NavigationRoute(
      createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
      { denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
    )
  )
}