How to cache pages with workbox InjectManifest
-
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 routeworkbox.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')
-
No one else did have the same issue ?
-
@Jo no experience with pwa, but you could try asking this in pwa discord channel.
-
@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.