Chrome DevTools "disable cache": what does it actually do apart from nothing (for service worker scripts)? Chrome DevTools "disable cache": what does it actually do apart from nothing (for service worker scripts)? google-chrome google-chrome

Chrome DevTools "disable cache": what does it actually do apart from nothing (for service worker scripts)?


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


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