I have a React site (Built with CRA’s PWA template) that uses Font Awesome icons and a Service Worker. When I attempt to change the size of the icons, I sometimes end up with a wrong, much larger result - I have specified 2x.
At one point, I even went so far as to remove the service worker code from my project to try and ensure the browser was not holding onto an old version of the icon.
I suspect this may be due to a cache issue, but am unsure how I should set this in my site’s
netlify.toml. Part of the problem may be that my policy is effectively, ‘Use the cache but don’t trust it’ so the conflict between the old icon and the size I want to use is never resolved.
A check of the site now shows the icon to be correct, but I think is because the cached version expired, and it is not consistent.
How can I prevent this effect from happening and still use a Service Worker on my site?
# WWW [[redirects]] from = "/www.hirechrisfinazzo.com" to = "/hirechrisfinazzo.com" status = 301 force = false # Netlify [[redirects]] from = "/https://gracious-babbage-21fe68.netlify.com" to = "/hirechrisfinazzo.com" status = 301 force = false # Routing [[redirects]] from = "/*" to = "/index.html" status = 200 force = false # Plugins [[plugins]] package = "netlify-plugin-csp-generator" [plugins.inputs] buildDir = "build" [plugins.inputs.policies] defaultSrc = "'self'" fontSrc = "'self'" imgSrc = "'self'" styleSrc = "'self' https://use.fontawesome.com" scriptSrc = "'self'" connectSrc = "'self'" formAction = "https://formspree.io/f/xgerekvv" frameAncestors = "'none'" workerSrc = "'self'" [[headers]] for = "/*" [headers.values] cache-control = ''' max-age=0, public, must-revalidate, no-transform''' Upgrade-Insecure-Requests = "1" X-Content-Type-Options = "nosniff" X-Frame-Options = "DENY" X-XSS-Protection = "1; mode=block"