Runtime caching & CacheAPI not working

[Ratatinator97]

Setup

"@nuxtjs/pwa": "^3.3.5" "workbox-cdn": "^5.1.4" "nuxt": "^2.15.2"

Context

My app, Pictalk, let users save and get pictograms. So basically every user has a custom set of pictograms. For now, it works only online but I want to implement offline-mode.

You can have a look at the git repo (I'm currently working in the dev branch): click here You can also have a look at the website/webapp : click here Technical Details

I display all my pictograms with the html <img .../> tag. Every time I load a new pictogram I do so:

created(){
          if(navigator.onLine){
          caches.open('pictos').then((cache) => {
            cache.add(this.collection.path)
            .then(() => {})
            .catch((err)=> {console.log(err)})
          });
      }
  },

I have also a function where all the pictograms are fetched (same logic as the function above) at once !

Here is a screenshot of the Cache Storage : enter image description here As we see the URL is correct and the requests are cached correctly.

nuxt.config.js

I have a doubt about my regex (I had to remove the '\' before every / and....

...
workbox: {
    runtimeCaching: [{
      urlPattern: 'https://api.pictalk.xyz/pictalk/*.(png|jpeg|jpg)',
      handler: 'CacheFirst',
      strategyOptions: {
        cacheName: 'pictos'
      }
    }]
  }
...

Problem

The <img .../> tag doesn't use the workbox cache I created. enter image description here

[Ratatinator97]

I've added the workbox declaration in the nuxt.config.js inside the pwa declaration but it is still not working... Maybe my regex isn't working ?

[Ratatinator97]

it's now working only with my localhost backend and frontend (localhost:3001 for the back and localhost:3000 for the front, with npm run build/npm run start) but not in the production configuration (I have my front at Vercel and host the back somewhere else...) As in production my frontt is at: www.pictalk.xyz and the back at api.pictalk.xyz I shouldn't have CORS issues... Anyone having an idea about the issue here ?

[Ratatinator97]

https://stackoverflow.com/questions/66505913/workbox-cache-not-used-by-img-tag