Firebase hosting - force browser to reset cache on new deploys

Hello,

I am using Ionic to code my website.

I am using Firebase Hosting to host it.

And I followed this tutorial to upload it: https://ionicframework.com/docs/angular/pwa

However, I have a very big problem, as soon as I upload an update, I have to delete all the browser cache to access it. All my clients therefore have the old version unless they delete their browser cache which is not user friendly.

I tweaked to display a message saying that it is necessary to refresh the cache of his browser however this remains a waiting solution which is really not optimized.

How can I modify my site so that with each update the cache is deleted or refreshed with the new version directly by itself?

Thanks for your help

Plse post your firebase.json. Do you deploy service worker?

Mine for example:

{
    "hosting": {
        "public": "www",
        "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
        ],
        "rewrites": [{
            "source": "**",
            "destination": "/index.html"
        }],
        "headers": [{
                "source": "/build/app/**",
                "headers": [{
                    "key": "Cache-Control",
                    "value": "public, max-age=31536000"
                }]
            },
            {
                "source": "ngsw-worker.js",
                "headers": [{
                    "key": "Cache-Control",
                    "value": "no-cache"
                }]
            }
        ]
    }
}```
1 Like

Yeah i deploy, i just found a solution i change this :

"headers": [{
                "source": "/build/app/**",
                "headers": [{
                    "key": "Cache-Control",
                    "value": "public, max-age=31536000"
                }]
            },

by this :

"headers": [{
                "source": "/build/app/**",
                "headers": [{
                    "key": "Cache-Control",
                    "value": "public, max-age=0"
                }]
            },

And it’s seem to work

1 Like