23

I'm trying to test the behaviour of my site on the assumption that the local disk cache is empty. I know that there are ways of clearing the cache and doing Ctrl-F5 etc each time, but there is also a "Disable Cache" checkbox in the Network tab that seems like it should do what I'm after... i.e. disable the cache.

But, when I clear the cache, enable that option, and F5-reload my site a couple of times, this is what I see:

enter image description here

The resource has been cached, and is being served from cache, despite "disable cache" being enabled! So what does this option actually do?

EDIT

Maybe this behaviour I'm seeing relates only to caching of service worker scripts? If you load this page (an example linked from this guide to service workers), at least for me the sw.js file is fetched from disk cache even with "disable cache" enabled.

drmrbrewer
  • 11,491
  • 21
  • 85
  • 181
  • why not try opening the webpage in incognito mode ? – mrid Sep 21 '17 at 10:24
  • @mrid yes I could but I just want to know what the purpose is of this option... in case I'm missing something very exciting – drmrbrewer Sep 21 '17 at 10:27
  • @wOxxOm I've provided an example in my edited post... I'm beginning to wonder whether there is some special (maybe buggy?) treatment of service worker scripts specifically... fetching from disk cache even with that option enabled. Do you see `sw.js` fetched from cache too, with the "disable cache" option enabled? – drmrbrewer Sep 21 '17 at 11:01

2 Answers2

22

Interesting question!

In the screenshot you've provided, the Name column is cut off, so I can't tell what resource is still being served from disk cache. I'll assume that it's a service worker script, based on the description in your "EDIT".

The question I'll answer, then, is "how does the browser cache service worker (SW) scripts?"

  1. When a SW gets registered, the browser stores the SW script in a separate database in the disk cache. I'll just call this the SW database, but note this isn't an official term. Note that if the service worker calls importScripts(), those scripts are also stored in the SW database. Also note that when a service worker script gets updated, the browser overwrites the currently-stored script in the SW database with the new script. This is the Chrome implementation, other browsers may do it differently. 1
  2. Every time you load the page, the browser makes an invisible request (i.e. you can't see this in DevTools) to see if there are any updates to the service worker script. IMO, DevTools should expose this request, so that developers get a better idea of the SW lifecycle.
    • If one byte of the script is different, then the browser updates the SW script in the SW database.
    • If the SW script hasn't changed, the browser just serves the script from the SW database. This is the request that you're seeing in DevTools. IMO it's misleading that DevTools describes this request as (from disk cache). Ideally, it should have some other name to indicate that this cache isn't affected by the Disable Cache checkbox.

So, in this case, you're right: the Disable cache checkbox does nothing. If you want to ensure that your cache is completely cleared (including service worker stuff):

  1. Go to the Clear Storage pane, make sure that all the checkboxes are enabled, and then click Clear Site Data.

  2. While DevTools is still open, long-press Chrome's Reload button, and select Empty Cache and Hard Reload. See https://stackoverflow.com/a/14969509/1669860 for an explanation of these different options.

    Empty cache and hard reload

1 I got this info from Alex Russell, Chrome engineer and co-author of the service worker spec

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • Great answer, and extra kudos for the mention of scripts imported via `importScripts()`... which I use in my service worker. You're right though, it would be much nicer to have full visibility of all requests in the service worker lifecycle, so that we can better understand what is happening. – drmrbrewer Sep 22 '17 at 08:41
  • In my case, this was happening with a normal JS file. The second proposal (pressing the Reload button) didn't help, but clearing the cache with "Clear Storage" did. Subsequent reloads worked just fine, so it looked like a bug. – tokland Jan 02 '18 at 10:55
2

In addition to the disable cache option, on the network pane of the developer tools you can now right click and choose "Clear Cache" from the popup menu.

Also, you can use this plugin if you need to clear the cache frequently: https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap

mrid
  • 5,782
  • 5
  • 28
  • 71