sw response html for image request

[a1mersnow]

Follow steps:

1. visit link: https://a1mer.netlify.app/
2. open a new tab and visit the background image: https://a1mer.netlify.app/assets/banner.3f1ad366.png
3. it will fail and see the fallback route

What is expected: The png image should be responsed from cache

What happened: sw return a html document for the image request

repo: https://github.com/aimergenge/blog

[userquin]

@aimergenge you should add to globPatterns the png, by default workbox will only include css,js,html, just add the workbox entry to your pwa options below manifest entry:

manifest: {
  ....
},
workbox: {
   globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest}'],
}

[a1mersnow]

Thank you @userquin But isn't this a bug? Even the image isn't in cache, sw should just pass it to server instead of response the fallback html.

[userquin]

It is not a but, the sw will intercept all request since you are confuguring offline support with navigation fallback, you can add for example denylist on workbox entry adding all png files and all png will be requested to the server, but then on offline those png will fail.

[userquin]

You must check your server, maybe you are serving that files wrong

Edit: open a private window and request the failibg png directly on it

[userquin]

@aimergenge I Will review your repo later, it is weird and maybe you are right...

[a1mersnow]

@userquin I try to access the same image through force reload(which means ignore service worker totally), the response from server is correct.

[a1mersnow]

any following actions?

[brandonculverwork]

I have encountered this as well. I think the reason a forced reload works is because it dumps the web app (service worker) from the browser and then it turns into a direct link.