No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to cache pages with workbox InjectManifest

    Help
    3
    4
    1301
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      Jo last edited by 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')
      
      
      1 Reply Last reply Reply Quote 0
      • J
        Jo last edited by Jo

        No one else did have the same issue ?

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by

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

          1 Reply Last reply Reply Quote 0
          • K
            kaktuspalme last edited by

            @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.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post