Nuxt: caching routes runtime

[tflx]

I thought the default behavior would be that all routes was cached as the user visited them. I guess it's not because it seems no routes are cached at all not even the root.
Is that in workbox.runtimeCaching I need to set that up?…and would that be something like?

...
runtimeCaching: [
  {
    urlPattern: "/.*",
    handler: "NetworkFirst",
  },
],

[userquin]

Here you can check an example vite-pwa/nuxt#66 , check also linked issues at bottom.

The problem about using runtime caching, you cannot create the cache when intercepting the request, the routes will be cached on second visit once the cache is created.

[zguig52]

Hi @userquin,

Sorry to bother, but I cannot manage also to cache static external API ressources witn runtimeCache / urlPattern strategy.

Here is my configuration:

      mode: 'development',
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'pwa/apple-180x180.png'],
      meta: {
        name: appName,
        author: appAuthor,
        description: appDescription,
      },
      manifest: {
        name: appName,
        short_name: appNamePwa,
        description: appDescription,
        orientation: 'landscape',
        theme_color: '#ffffff',
        lang: "fr",
        icons: [
          {
            src: 'pwa/edge-64x64.png',
            sizes: '64x64',
            type: 'image/png',
          },
          {
            src: 'pwa/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'pwa/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: 'pwa/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any',
          },
          {
            src: 'pwa/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'maskeable',
          }
        ],
      },
      workbox: {
        // navigateFallback: '/',
        globPatterns: ['**/*.{js,json,css,html,svg,ico,png,jpg,pdf}'],
        globIgnores: ['manifest**.webmanifest'],
        // https://vite-pwa-org.netlify.app/workbox/generate-sw.html
        runtimeCaching: [
          {
            urlPattern: new RegExp(`^https:\/\/api\.congres\.dev\/uploads\/.*`, 'i'),
            handler: 'CacheFirst',
            options: {
              cacheName: "api-pwa-cache",
              expiration: {
                maxEntries: 10000,
                maxAgeSeconds: cacheDuration
              },
              cacheableResponse: {
                statuses: [0, 200]
              }
            },
          }
      devOptions: {
        enabled: true,
        suppressWarnings: false,
        navigateFallbackAllowlist: [/^\/$/],
        type: 'module',
      },
    }],

I found also your post here: vite-pwa/nuxt#22

What is strange, is that the regex is OK when launched with yarn dev:

Precaching did not find a match for https://api.congres.dev/uploads/16_9_01_b10ff12a08.pdf
workbox-b7fccfec.js:45 workbox Router is responding to: https://api.congres.dev/uploads/16_9_01_b10ff12a08.pdf
workbox-b7fccfec.js:45 workbox Found a cached response in 'api-pwa-cache'.

But as soon as I generate a static build for deployment (yarn clean && yarn generate && yarn preview):

workbox Precaching did not find a match for https://api.congres.dev/uploads/16_9_01_pdf_preview_cf0254b7d4.png
workbox-b7fccfec.js:45 workbox No route found for: https://api.congres.dev/uploads/16_9_01_pdf_preview_cf0254b7d4.png

Like if the regex did not match this time. The content is served currently for my tests from http://localhost:3000

Am I doing something wrong? Is it a limitation or bug in PWA module?

[userquin]

it is a limitation in workbox, try reopening the browser and request the pdf file again (should be added to the cache), if you request the pdf again, it should be served from cache.