4

I have made several changes to my firebase site https://scratch-gui.firebaseapp.com/ over the past few days. As I'm developing the site, I plan to deploy and build the site regularly.

If I visit the site in my normal browser, none of my recent changes appear. For example, when I visit the homepage, my navigation still looks like this:

enter image description here

But if I visit in an incognito window or a device that has not been to the site before, it looks like this:

enter image description here

I assumed maybe it was due to caching and might take a few hours, but it has been several days at this point. What is the default setting for firebase deploy caching?

My concern is less for development and more for when I share the site with others. I would like changes to appear after a redeploy without users clearing their cache on every visit. Is there a setting for cache refresh time on firebase? What can I do to make sure my users get the latest version of my site?

UPDATE:

I have updated my firebase.json to the following:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "*.*",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=30"
          }
        ]
      }
    ]
  }
}

It now seems that when I refresh normally, it reverts back to the old site. When I run a hard refresh, it shows the most up to date version of the site. I know this sounds really odd, so I made a video.

Youtube video of refresh vs hard refresh behavior

Now I'm really confused what could be causing this.

UPDATE 2:

Here is the service worker list from the chrome debugger.

Service worker list from debugger

Luke Schlangen
  • 3,722
  • 4
  • 34
  • 69
  • Is there a Service Worker installed on the Application page of Chrome Dev Tools? – abraham Apr 23 '18 at 04:38
  • I added the service worker list from the chrome dev tools. Does that help? I guess I'm not sure what that means? – Luke Schlangen Apr 23 '18 at 13:38
  • Service Workers are typically used to cache content on the client so it could have an old version cached in your browser. [How you can unregister a SW in Chrome](https://stackoverflow.com/a/41907900/26406) would be a good debug step. – abraham Apr 23 '18 at 20:27

1 Answers1

1

Without seeing your configuration and the actual URLs in question it's hard to say much, so I'll instead give a description of how Firebase Hosting works in this context.

Firebase Hosting flushes all CDN edges when you deploy an update (firebase deploy). There is no minimum caching interval specified by Firebase Hosting.

But you can of course specify caching for your content in the firebase.json configuration file as shown here: https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-headers

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Hi Frank! I added the url and `firebase.json` to the question. I'm deploying to https://scratch-gui.firebaseapp.com/ and also have a custom domain https://www.codechampionship.com/ – Luke Schlangen Apr 21 '18 at 21:39
  • I also added a video of some of the odd behavior in case that helps. – Luke Schlangen Apr 21 '18 at 22:16
  • Hmmm.... I indeed see the items being cached for longer than the 30s of your cache header. I'm not sure why that happens, because the header makes it to the browser fine. But I'm sorta glad, because your downloading a 16MB (!!!) lib.min.js, which is taking 20-30s even on my relatively fast connection. – Frank van Puffelen Apr 21 '18 at 23:25
  • Yeah, it includes a drag and drop IDE (scratch) so I'm sure it's heavy. I haven't done anything for performance yet. – Luke Schlangen Apr 22 '18 at 12:36