Workbox Runtime Cache Not Working.

[dextersiah]

I have this simple config here in nuxt.config.ts

pwa: {
    devOptions: {
        enabled: true
    },
    workbox: {
        clientsClaim: true,
        skipWaiting: true,
        // navigateFallbackDenylist: [/^\/api\//],
        runtimeCaching: [
            {
                urlPattern: 'https://dummyjson.com/*',
                handler: 'NetworkFirst',
                options: {
                    cacheName: 'my-post-cache', // <== change the name
                    cacheableResponse: {
                        statuses: [200]
                    },
                    matchOptions: {
                        ignoreVary: true,
                        ignoreSearch: true
                    },
                    plugins: [{
                        // handlerDidError: async () => Response.redirect('/error', 302),
                        cacheWillUpdate: async ({ response }) => await response.status === 200 ? response : null
                    }]
                }
            }
        ]
    }
}

and a simple fetch data using useFetch composable inside my /fetch page

const fetchData = await useFetch<{
    products: Product[]
} & Pagination >('https://dummyjson.com/products', {
    query: {
        limit: LIMIT,
        skip: skipPage
    },
    watch: [page]
})

Whenever I load the page and navigate back to home then proceed to set to offline mode then go back to /fetch page. I just receive this error on the console.

net::ERR_INTERNET_DISCONNECTED

Am I missing any config or is this not how the caching behavior is supposed to work?

Additional Notes

• I am testing it with built code with npm run build and node .output/server/index.mjs

[lovkyndig]

https://dummyjson.com/*
This first line is not a urlPattern.
Here is something that work for me

 {
      urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/(api|article)\/.*/i),
      handler: 'NetworkFirst' as const,
      options: { cacheName: 'articles-cached' }
 }, 

// when this is cached - my articles also showing the images, who is saved in public-folder.

[userquin]

add those routes to the workbox.navigateFallbackDenylist array

[dextersiah]

add those routes to the workbox.navigateFallbackDenylist array

The routes are in the endpoint which I'm trying to retrieve the resource or the page route that is calling the endpoint?

[dextersiah]

https://dummyjson.com/* This first line is not a urlPattern. Here is something that work for me

 {
      urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/(api|article)\/.*/i),
      handler: 'NetworkFirst' as const,
      options: { cacheName: 'articles-cached' }
 }, 

// when this is cached - my articles also showing the images, who is saved in public-folder.

I had tried something similar to this using

urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.includes('dummyjson.com')),

But it still doesn't work for me

[lovkyndig]

Hey again! I'm a amateur, but have worked a lot to get the caching to work.¹

I have made two reproduction-repos:

1. nuxt3-pwa-offline
2. nuxt-content-pwa

The first isn't a good example, but the second is a clean nuxt-content-repo - a good starter template.²

There is two main challenges:

1. Get the root, or index-page to cache.
2. Get all blog-posts to loads.
3. The third problem is about images.

The RuntimeCaching isn't solving the problem with (1) loading the frontpage of the homepage. That is one thing I have learned. It can helps with some images (in 1 & 2), thats the only thing.

Footnotes

1. Many weeks. ↩

2. Only five packages included. ↩

[dextersiah]

Hey again! I'm a amateur, but have worked a lot to get the caching to work.1

I have made two reproduction-repos:

1. [nuxt3-pwa-offline](https://github.com/lovkyndig/nuxt3-pwa-offline)

2. [nuxt-content-pwa](https://github.com/lovkyndig/nuxt-content-pwa)

The first isn't a good example, but the second is a clean nuxt-content-repo - a good starter template.2

There is two main challenges:

1. Get the root, or index-page to cache.

2. Get all blog-posts to loads.

3. The third problem is about images.

The RuntimeCaching isn't solving the problem with (1) loading the frontpage of the homepage. That is one thing I have learned. It can helps with some images (in 1 & 2), thats the only thing.

Footnotes

1. Many weeks. [↩](#user-content-fnref-1-4b2211941ed45a0e00572aa1fdb9ee2e)

2. Only five packages included. [↩](#user-content-fnref-2-4b2211941ed45a0e00572aa1fdb9ee2e)

Hey thanks for the 2 repo I'll take a look. You mentioned the challenges to

Get the root, or index-page to cache.

What if I want to cache the content from a non root page? Example /products page to that is fetching the data from https://dummyjson.com/products

[lovkyndig]

Hei @dextersiah Thanks for asking a amateur!
Yes, you have to use runtimeCaching to cache anything in the content-folder.
In my case:

 {
          urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/(api|article)\/.*/i),
          handler: 'NetworkFirst' as const,
          options: { cacheName: 'content' }
 } 
// everything in "content"-folder are cached (with this code) when visited

The regex pattern is /^\/api\/.*/i¹
This is the start of the url you will see under the cache-name content when you have the Inpector/Application open and visit the content in the browser. If this cache-name isn't created after visit, then there proberly are some syntax-error that prevents it from working.

Two images

First who shows after frontpage-load

Now you don't see the cache name of the api-regex pattern.

Second who shows after content-visit

Now you see the cache name of the api-regex pattern.

How to know the /api-name?

This beginning of the url-name who you can see in the cache is probably set of other cache-programmers. This simple name-thing is impossibly to know if not already are familiar with caching.

If not caching api-url

In another project who have the same pwa-declarations as my other projects, the content-caching wouldn't work before I added this line:
navigateFallbackDenylist: [/^\/api/],
in the workbox-settings.

And I also had to add this before the pwa-declaration (in nuxt.config):

experimental: {
    payloadExtraction: false // get the api-cache loads/working
  },

You can see it here

Footnotes

1. The other folder is for showing images who dosn't cache automatic. ↩

[dextersiah]

Thanks for the effort to explain @lovkyndig I'll take a look and try reimplement this on my project. 👍