Firebase Hosting - Clear Cache

Question

Followed the Firebase tutorial to achieve Firebase Hosting. Hosted the app in console. But the problem is when I changed my html template and I re-deployed in Firebase console by running

ionic build --browser

and

firebase deploy

It's getting deployed but it's not updating in the mobile browser.

For example I have created a ionic and angular demo project. With the use of InAppBrowser able to connect with Firebase url

this.iab.create('https://xxx-xxxx.firebaseapp.com','_blank',"location=no,clearsessioncache=yes,clearcache=yes");

Above Image without updated values

But when I tried to clear app cache in application settings. Then I am getting the output

Above image with updated text. Expected result after uploading in firebase.

Below snippet tried to restrict cache.

1. clearsessioncache=yes,clearcache=yes given in InAppBrowser

2.In Firebase.json

"headers": [ {
  "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
  "headers" : [ {
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
  } ]
}, {
  "source" : "**/*.@(jpg|jpeg|gif|png)",
  "headers" : [ {
    "key" : "Cache-Control",
    "value" : "max-age=7200"
  } ]
}, {
  "source" : "404.html",
  "headers" : [ {
    "key" : "Cache-Control",
    "value" : "max-age=300"
  } ]
} ],
"cleanUrls": true

I am not sure, the problem is with InAppBrowser or Default Browser or any configuration need to be done in ionic 3 app?

Answer 1

Try clearing all cache using:

  "headers": [
    {
      "source": "**",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache, no-store, must-revalidate"
        }
      ]
    }
  ]

Then add the css, image and 404 back afterwards.