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 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')
    
    


  • No one else did have the same issue ?



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


Log in to reply