khalyomede / gridsome-plugin-service-worker

Registers a service worker and apply your file strategies to let you build a PWA.
https://npmjs.com/package/gridsome-plugin-service-worker
MIT License
8 stars 2 forks source link

CORS issues with service-worker and external resources (Firefox) #22

Open atflick opened 2 years ago

atflick commented 2 years ago

Hi there, thanks for making this plugin, it really makes adding a service worker a breeze. However, I am having a few issues with it.

For one, it seems there is some issue with CORS or the CSP for fetching assets from external sources such as Google and Zendesk, see this screenshot below... image

Not sure if I am doing something wrong here or if it would be possible to add a flag to each cache option to exclude external resources. I think I understand your code enough to possibly make a pull request. This only happens in Firefox it seems and from what I understand it may be something with XSS blocking. Perhaps you know a way to fix that as well?

this is what my config looks like

    {
      use: "gridsome-plugin-service-worker",
      options: {
        networkFirst: {
          cacheName: `nf-${buildVar}`,
          fileTypes: ["document"],
        },
        cacheFirst: {
          routes: [/^(?!.*\/(route-1|route-2|route-3)\/).*$/i],
          cacheName: `cf-${buildVar}`,
          fileTypes: ["script", "style", "image", "font"],
        },
      },
    },

Thanks again!

khalyomede commented 2 years ago

Hey @atflick , thanks a lot for detailing your issue, appreciate it!

I guess it would be possible indeed to exclude the external assets as an opt-in :-) I'll also give it a check in the week and let you know whenever I got something