This is a common source of confusion, so I wanted to go into a bit more detail. I have a full working demo in this Gist, and you can view a live version of it thanks to RawGit. Here’s the relevant portion of the service worker code inline, for illustrative purposes: self.addEventListener(‘fetch’, event => { … Read more
As an alternative to using self-signed certificates, you can launch Chrome or Firefox such that it pretends certain domains are secure. For example, using Chrome on a Mac, you can launch it using: /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ –user-data-dir=/tmp/foo –unsafely-treat-insecure-origin-as-secure=http://www.your.site Service workers should then work from http://www.your.site. More info can be found here: Options for testing … Read more
If you know the cache name you can simply call caches.delete() from anywhere you like in the worker: caches.delete(/*name*/); And if you wanted to wipe all caches (and not wait for them, say this is a background task) you only need to add this: caches.keys().then(function(names) { for (let name of names) caches.delete(name); });
In general, you need to serve both your page and your service worker script via HTTPS in order to use service workers. The rationale is described at Prefer Secure Origins For Powerful New Features. There’s an exception to the HTTPS requirement in place to facilitate local development: if you access your page and service worker … Read more
Removing Service Workers Programmatically You can remove service workers programmatically like this: navigator.serviceWorker.getRegistrations().then(function(registrations) { for(let registration of registrations) { registration.unregister() } }) Docs: getRegistrations, unregister Removing Service Workers Through The User Interface You can also remove service workers under the Application tab in Chrome Devtools.
I wanted to expand on some of the other answers here, and approach this from the point of view of “what strategies can I use when rolling out a service worker to production to ensure that I can make any needed changes”? Those changes might include fixing any minor bugs that you discover in production, … Read more
Service workers are basically a proxy between your web application and the internet, so it can intercept calls to the network if so desired. Scope in this instance refers to the path that the service worker will be able to intercept network calls from. The scope property can be used explicitly define the scope it … Read more
Note: As of Firefox 57, and Chrome 68, as well as the versions of Safari and Edge that support service workers, the default behavior has changed to account for the updated service worker specification. In those browsers, HTTP cache directives will, by default, be ignored when checking the service worker script for updates. The description … Read more
Access to Opaque Responses’ Headers / Body The most straightforward limitation around opaque responses is that you cannot get meaningful information back from most of the properties of the Response class, like headers, or call the various methods that make up the Body interface, like json() or text(). This is in keeping with the black-box … Read more