How to cache pages with workbox InjectManifest

Jo

Hello,

I have a little problem with workbox. I can’t manage to cache my pages.
I use Quasar in SSR + PWA mode with InjectManifest option for workbox.

I saw on workbox website that webpack precache assets which are in is scoped.
They also says to use this in SPA website : wokbox SPA Navigation route

workbox.routing.registerNavigationRoute(
 // Assuming '/single-page-app.html' has been precached,
 // look up its corresponding cache key.
 workbox.precaching.getCacheKeyForURL('/single-page-app.html')
);

With this snippet i have this error : ‘The parameter ‘cachedAssetUrl’ passed into ‘workbox-routing.register Navigation Route()’ must be of type string.’
I’m not sure about the url that i should use for this snippet. I’have tried many : /index.template.html, /, /index.html, /index
I always have a null return by getCacheKeyForURL()

I checked the precache-manifest file to see what urls or html files are precache by webpack, but there is no entries for this type of files.

I’m a little confused, i think i miss something. its the first time i use SW so i may misunderstood something.

So far this is what i have done for my service worker. With this i manage to cache my page but only when user refresh it.

/*
 * This file (which will be your service worker)
 * is picked up by the build system ONLY if
 * quasar.conf > pwa > workboxPluginMode is set to "InjectManifest"
 */

// Clean Up Old Precaches
workbox.precaching.cleanupOutdatedCaches()

workbox.googleAnalytics.initialize()

workbox.routing.registerRoute(
  /(.*)\.(?:png|gif|jpg|svg)/,
  new workbox.strategies.CacheFirst({
    cacheName: 'bm-images-cache-v1',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60 
      })
    ]
  })
)

workbox.routing.registerRoute(
  new RegExp('.*.css'),
  new workbox.strategies.CacheFirst({
    cacheName: 'bm-css-cache-v1',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 10 * 24 * 60 * 60
      })
    ]
  })
)

workbox.routing.registerRoute(
  new RegExp('.*.js'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'bm-js-cache-v1'
    maxAgeSeconds: 5 * 24 * 60 * 60
  })
)

workbox.precaching.precacheAndRoute(self.__precacheManifest, {
  directoryIndex: '/'
})

workbox.routing.registerRoute('/', new workbox.strategies.NetworkFirst(), 'GET')

Jo

No one else did have the same issue ?

metalsadman

@Jo no experience with pwa, but you could try asking this in pwa discord channel.

kaktuspalme

@Jo Maybe you already got a solution. Anyway I found one:
It seems like precaching with InjectManifest isn’t working by default.
I had to add the line at the top of my service-worker:

workbox.precaching.precacheAndRoute(self.__precacheManifest)

After that my app runs perfectly offline.