I have just attempted to implement service workers to cache some JSON files and other assets on a static site (running on localhost chrome Version 47.0.2526.73 (64-bit)). Using cache.addAll() I have added my files to the cache, and when I open the resources tab in chrome, and click on cache storage, all the files are listed. 

[![screenshot json files shown in cache][1]][1]

The issue I am having is that my service worker is listed as &quot;activated&quot; and &quot;running&quot; in chrome://service-worker-internals however, I cannot determine if the worker is actually intercepting the requests and serving up the cached files. I have added the event listener and even when I console log the event in the service workers dev tools instance, it never hits the break point: 

    this.addEventListener(&#39;install&#39;, function(event) {
      event.waitUntil(
        caches.open(&#39;v1&#39;).then(function(cache) {
          console.log(cache);
          return cache.addAll([
            &#39;/json/0.json&#39;,
            &#39;/json/1.json&#39;,
            &#39;/json/3.json&#39;,
            &#39;/json/4.json&#39;,
            &#39;/json/5.json&#39;,
          ]);
        })
      );
    });

    this.addEventListener(&#39;fetch&#39;, function(event) {
      console.log(event);
      var response;
      event.respondWith(caches.match(event.request).catch(function() {
        return fetch(event.request);
      }).then(function(r) {
        response = r;
        caches.open(&#39;v1&#39;).then(function(cache) {
          cache.put(event.request, response);
        });
        return response.clone();
      }).catch(function() {
      }));
    });


Basically I am running through things exactly as described in HTML5 rocks service workers intro, but I am pretty sure that my assets aren&#39;t being served from the cache. I&#39;ve noted that assets served up from a service worker are noted as such in the network tab of devtools in the size column by indicating &#39;from service workers&#39;.

It just seems as if my code is no different than the examples but it&#39;s not ever hitting the fetch event for some reason. Gist of my code: https://gist.github.com/srhise/c2099b347f68b958884d


  [1]: http://i.stack.imgur.com/SBp4R.png

Service worker is caching files but fetch event is never fired

MDN suggests that you do the following to create and populate service worker cache:

    this.addEventListener(&#39;install&#39;, function(event) {
      event.waitUntil(
        caches.open(&#39;v1&#39;).then(function(cache) {
          return cache.addAll([
            &#39;/sw-test/&#39;,
            &#39;/sw-test/index.html&#39;,
            ... etc ...
          ]);
        })
      );
    });

I do not understand that code. The `waitUntil` method is documented too, and it seems the code above is the single purpose of it&#39;s existence at the moment:

&gt; The ExtendableEvent.waitUntil() method extends the lifetime of the
&gt; event. When called in an EventHandler associated to the install event,
&gt; it delays treating the installing worker as installed until the passed
&gt; Promise resolves successfully. This is primarily used to ensure that a
&gt; service worker is not considered installed until all of the core
&gt; caches it depends on are populated.

What I do not understand is:

 - How does `waitUntil` generally affect code flow? Does it stop event from propagating until it&#39;s promise resolves?
 - Why is it needed in the context of opening worker cache?

I am asking this question because I have problems with the code above and I would like to understand it.

What does event.waitUntil do in service worker and why is it needed?

I know I can use Chrome on a desktop or Android device to “Add to Home screen”. I know I can use “Add to homes screen” in Safari iOS.

But, can I use “Add to home screen” feature in Chrome for iOS?

Can I use Add to home screen in Chrome on an iOS device?

I am familiar with http status codes, but recently I saw a strange line in my chrome debugger. Instead of ordinary `Status Code:200 OK` I saw the following: `Status Code:200 OK (from ServiceWorker)`.

[![enter image description here][1]][1]

My guess is that this just tells me that ServiceWorker is somehow responsible for accessing this document, but this is just random guess. Can anyone authoritatively (without guesses, with links to respected resources) tell me what does this mean and what are the implications?


  [1]: http://i.stack.imgur.com/A6xZN.png

&quot;Status Code:200 OK (from ServiceWorker)&quot; in Chrome Network DevTools?

I understand that with a properly made Progressive Web App mobile browsers will display a banner prompting users to &#39;Install&#39; the app on their home screen.

I have been looking around for a way to trigger that prompt from within the app, but have not been able to find anything.

Is there a line of JavaScript that can be used to call the install prompt banner at any time?? Something that I could add to a install button tucked away in a help screen for instance? 

It might be difficult for some users to find the &quot;Add to Home Screen&quot; option if they missed the install banner prompt. I&#39;d like to give them a button they can click to be prompted again. 

### **2020 EDIT**: Yes, this is possible in Chrome - see [answer below](https://stackoverflow.com/a/64727286/8620945)

See this great article: [How to provide your own in-app install experience](https://web.dev/customize-install/) and [my working demo](https://pwa-install-demo.netlify.app/) of the article&#39;s process [applied in a React app](https://github.com/adueck/pwa-install-demo).

Or for a slightly different approach, see [how snapdrop.net did it](https://github.com/RobinLinus/snapdrop).

Is it possible to make an in-app button that triggers the PWA &quot;Add to Home Screen&quot; install banner?

After deleting `/serviceworker.js` from my root directory, Chrome still runs the service worker that I removed from my webroot. How do I uninstall the service worker from my website and Chrome so I can log back into my website?

I&#39;ve tracked the issue down to Service Work&#39;s cache mechanism and I just want to remove for now until I have time to debug it. The login script that I&#39;m using redirects to Google&#39;s servers for them to login to their Google account. But all I get from the login.php page is an `ERR_FAILED` message.  

How do I uninstall a Service Worker?

What can service workers do that web workers cannot? Or vice versa?

It seems that web workers are a subset of the functionality of service workers. Is this correct?

What can service workers do that web workers cannot?

I want to test service workers but I have a virtual host setup and I can&#39;t seem to be able to enable https on localhost.

How can I whitelist my local virtual host url to test service workers 
whenever I try and register for the service worker on the localhost? Chrome says https is required to enable service worker. How can I get past this restriction at least for local testing.

Options for testing service workers via HTTP

When creating a react app, service worker is invoked by default. Why service worker is used? What is the reason for default invoking?

What is service worker in react js

[Opaque responses](https://fetch.spec.whatwg.org/#concept-filtered-response-opaque) are defined as part of the [Fetch API](https://fetch.spec.whatwg.org/), and represent the result of a request made to a remote origin when [CORS](https://fetch.spec.whatwg.org/#http-cors-protocol) is not enabled.

What practical limitations and &quot;gotchas&quot; exist around how opaque responses can be used, both from JavaScript and as resources on a page?

What limitations apply to opaque responses?

I have developer server that are used for testing. They have SSL self-signed certificates, which allow us to test the web application over HTTPS, but with prominent warnings that the certificates are not verifiable.

That&#39;s fine, but I have a Service Worker that throws an error with the `navigator.serviceWorker.register`

&gt; SecurityError: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script.

How do I use a Service Worker with an intranet testing server which has a self-signed certificate?

Can you use a service worker with a self-signed certificate?

As far as I know, once you click &quot;add to homescreen&quot; on a PWA&#39;s website, the browser generates an .apk using the provided manifest file and sources and installs it like a normal app.

I noticed that when I update the website, the app also displays the updated content which suggests that the app is just a wrapper for accessing the website. I also noticed that the update to a website is not displayed instantly, I assume this is due to internal caching.

My question is, are my assumptions correct? Or more generally, when and how are PWAs updatated and is there a way to force an update on a client machine?

When and how does a PWA update itself?

I am using the `Angular-CLI 1.6.6` and `@angular/service-worker 5.2.5` in our `Angular 5.2.5` app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment: 

&gt; Failed to load resource: the server responded with a status of 504
&gt; (Gateway Timeout)

Looking into the `ngsw-worker.js` script I found the lines (2466 following) where the error message above is generated:

```typescript
    async safeFetch(req) {
        try {
            return await this.scope.fetch(req);
        }
        catch (err) {
            this.debugger.log(err, `Driver.fetch(${req.url})`);
            return this.adapter.newResponse(null, {
                status: 504,
                statusText: &#39;Gateway Timeout&#39;,
            });
        }
    } 
```
Console logging err in the catch puts out the following error:
```bash
    TypeError: Failed to execute &#39;fetch&#39; on &#39;ServiceWorkerGlobalScope&#39;: &#39;only-if-cached&#39; can be set only with &#39;same-origin&#39; mode
        at Driver.safeFetch (ngsw-worker.js:2464)
        at Driver.handleFetch (ngsw-worker.js:1954)
        at &lt;anonymous&gt;
```
An error that seems related to this question: https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if

The req that generates this error is any first access to the app:

    https://example.com/test/#/connect
    https://example.com/test/#/map?token=[accestoken]
    ...

On app reload the error is not repeated.

Can anybody help me out here? Is there a bug in `safeFetch()` of the service worker (maybe to support HashLocationStrategy)? Do I have to change anything in my config?

Angular Service Worker - Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

I&#39;m playing with the service worker API in my computer so I can grasp how can I benefit from it in my real world apps.

I came across a weird situation where I registered a service worker which intercepts _fetch_ event so it can check its cache for requested content before sending a request to the origin.
The problem is that this code has an error which prevented the function from making the request, so my page is left blank; nothing happens.
As the service worker has been registered, the second time I load the page it intercepts the very first request (the one which loads the HTML). Because I have this bug, that fetch event fails, it never requests the HTML and all I see its a blank page.

In this situation, the only way I know to remove the bad service worker script is through `chrome://serviceworker-internals/` console.
If this error gets to a live website, which is the best way to solve it?

Thanks!

How can I remove a buggy service worker, or implement a &quot;kill switch&quot;?

Most of the browsers provide localStorage with the storage limit of 5MB per domain.
Are there such memory limits/constraints with respect to service workers?

I know that web workers (on which service workers are based) don&#39;t have such limitations. But Web Workers are not exactly used for assets caching, instead they&#39;re used more for processing (so CPU is the main concern there).

If there&#39;s no limit on the memory size, could a badly designed website crash the browser?

What is the storage limit for a service worker?

As per [this doc on MDN][1]:

&gt; After that it is downloaded every 24 hours or so. It *may* be
&gt; downloaded more frequently, but it must be downloaded every 24h to
&gt; prevent bad scripts from being annoying for too long.

Is the same true for Firefox and Chrome? OR does update to service worker javascript only happens when user navigates to site?


  [1]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Service worker JavaScript update frequency (every 24 hours?)

I&#39;m a newbie in React and I was wondering what is the purpose of registerServiceWorker() in the following code?

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import registerServiceWorker from &#39;./registerServiceWorker&#39;;

    ReactDOM.render(&lt;App /&gt;, document.getElementById(&#39;root&#39;));
    registerServiceWorker();


What does registerServiceWorker do in React JS?

I read that using a service worker for offline caching is similar to browser caching. If so, then why would you prefer a service worker for this caching? Browser caching will check if the file is modified or not and then serve from the cache, and with a service worker we are handling the same thing from our code. By default, the browser has that feature so why prefer a service worker?

Why use a service worker for caching when browser cache handles the caching?

since the new update of Google Chrome (version 69.0.3497.92 (official build) (64-bit)) I can&#39;t find the serviceWorker service in the Navigator anymore. Actually I could register my Service Worker as follows but now I get an error that serviceWorker cannot be found in the navigator:

    if(&#39;serviceWorker&#39; in navigator) {
        /*
        *
        * Register the Service Worker
        *
        * */
        navigator.serviceWorker.register(&#39;sw.js&#39;).then(function(registration) {
            console.log(&#39;Service Worker Registered&#39;);
        });
    
    } else console.log(&#39;Your browser does not support the Service-Worker!&#39;);

How can I now use the Service Worker again, or how can I get it to run again for all Chrome versions?

Can&#39;t find serviceWorker in navigator anymore

So, I have an HTML page with service worker,
the service worker cache the index.html and my JS files.

The problem is when I change the JS, the change doesn&#39;t show up directly on the client browser. Of course in chrome dev-tools, I can disable cache. But in chrome mobile, how do I do that?

I tried to access the site settings and hit the CLEAR % RESET button.
But it still loads the old page/load from cache.
I tried to use other browser or chrome incognito and it loads the new page.

Then, I try to clear my browsing data (just cache) and it works.

I guess that&#39;s not how it should work right? my user won&#39;t know if the page is updated without clearing the chrome browser cache. 



How to clear cache of service worker?

I am trying to implement a `Service Worker` in a test page. My end goal is an application that operates offline. The folder structure is below

    /myApp
      ...
      /static
        /mod
          /practice
            service-worker.js
            worker-directives.js
            foopage.js
      /templates
        /practice
          foopage.html

I am registering a service worker as shown below (within `service-worker.js`):

    navigator.serviceWorker.register(&#39;../static/mod/practice/service-worker.js&#39;).then(function(reg) {
        console.log(&#39;Registration succeeded. Scope is &#39; + reg.scope);
        ...
    }

and in the console I see

`Registration succeeded. Scope is https://example.com/static/mod/practice/`

If my page is located at `https://example.com/practice/foopage`, do I need to make sure that my `service worker` scope is `https://example.com/practice/foopage`?

If I try to define the scope in the `register` function call like

    navigator.serviceWorker.register(&#39;../static/mod/practice/service-worker.js&#39;, { scope: &#39;/practice/foopage/&#39; }).then(function(reg) {
        ...
    }

I get the error

    Registration failed with SecurityError: Failed to register a ServiceWorker: The path of the provided scope (&#39;/practice/foopage/&#39;) is not under the max scope allowed (&#39;/static/mod/practice/&#39;). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

**Question is:** What exactly does *scope* refer to? Is it the collection of URLs that the `service worker` will eventually control? Do I need to move `service-workers.js` somewhere else? If so, where?

Understanding Service Worker scope

In my Progressive Web App, should I be using the Cache API in a service worker for my static assets, or should I just rely on the browser&#39;s native cache control for these? What&#39;s the difference?


What&#39;s the difference between using the Service Worker Cache API and regular browser cache?

How should I structure a project that includes main thread (DOM) script, and workers? Eg:

# main.ts

```ts
// This file must have DOM types, but not worker types.

const worker = new Worker(&#39;worker.js&#39;);

worker.onmessage = (event) =&gt; {
  // Ideally, I should be able to reference types from the worker:
  const data = event.data as import(&#39;./worker&#39;).HelloMessage;
  console.log(data.hello);
};
```

# worker.ts

```ts
// This file must have worker types, but not DOM types.
// The global object must be one of the worker globals (how do I pick which?)

const helloMessage = {
  hello: &#39;world&#39;,
};

export type HelloMessage = typeof helloMessage;

postMessage(helloMessage);
```

Whenever I&#39;ve tried this in the past I feel like I&#39;ve been fighting TypeScript by either:

* Using one `tsconfig.json` that has both worker &amp; DOM types. But of course this isn&#39;t accurate type-wise.
* Using multiple `tsconfig.json`. But then the project boundary makes it hard to reference types between them.

Additionally, how do I declare the global in a worker? Previously I&#39;ve used `declare var self: DedicatedWorkerGlobalScope`, but is there a way to actually set the global (rather than just setting `self`)?

Structuring a TypeScript project with workers

I registered a service worker successfully, but then the code

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
        // Do we already have a push message subscription?
        ....

hangs -- the function is never called. Why?

navigator.serviceWorker is never ready

I&#39;m using [create-react-app][1] with an [express][2] server.

`create-react-app` has a pre-configured ServiceWorker that caches local assets (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app). 

The problem I encountered when I tried to publish on my server is that the `service-worker.js` file was available, but I was getting errors in my browser console when it tried to register it.

On Firefox, I got this error:

&gt; Error during service worker registration:
&gt; &gt; TypeError: ServiceWorker script at https://my-domain.com/service-worker.js for scope https://my-domain.com/ encountered an error during installation.

On Chrome, I get the more descriptive error:

&gt; Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type (&#39;text/html&#39;).

Sure enough, if I look in the Network tab of my developer tools and search for the `service-worker.js` file, I can see that it has the wrong MIME type in the HTTP headers.

I could not understand, though, why it has the wrong MIME type?

  [1]: https://github.com/facebook/create-react-app
  [2]: https://github.com/expressjs/express

Service Worker registration error: Unsupported MIME type (&#39;text/html&#39;)

When a service worker updates, it doesn&#39;t take control of the page right way; it goes into a &quot;waiting&quot; state, waiting to be activated.

Surprisingly, the updated service worker doesn&#39;t even take control of the tab after refreshing the page. Google explains:

https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle

&gt; Even if you only have one tab open to the demo, refreshing the page
&gt; isn&#39;t enough to let the new version take over. This is due to how
&gt; browser navigations work. When you navigate, the current page doesn&#39;t
&gt; go away until the response headers have been received, and even then
&gt; the current page may stay if the response has a `Content-Disposition`
&gt; header. Because of this overlap, the current service worker is always
&gt; controlling a client during a refresh.
&gt; 
&gt; To get the update, close or navigate away from all tabs using the
&gt; current service worker. Then, when you navigate to the demo again, you
&gt; should see the horse [updated content].
&gt; 
&gt; This pattern is similar to how Chrome updates. Updates to Chrome
&gt; download in the background, but don&#39;t apply until Chrome restarts. In
&gt; the mean time, you can continue to use the current version without
&gt; disruption. However, this is a pain during development, but DevTools
&gt; has ways to make it easier, which I&#39;ll cover later in this article.

This behavior makes sense in the case of multiple tabs. My app is a bundle that needs to be updated atomically; we can&#39;t mix and match part of the old bundle and part of the new bundle. (In a native app, atomicity is automatic and guaranteed.)

But in the case of a single tab, which I&#39;ll call the &quot;last open tab&quot; of the app, this behavior is not what I want. I want refreshing the last open tab to update my service worker.

(It&#39;s hard to imagine that anybody actually _wants_ the old service worker to continue running when the last open tab is refreshed. Google&#39;s &quot;navigation overlap&quot; argument sounds to me like a good excuse for an unfortunate bug.)

My app is normally only used in a single tab. In production, I want my users to be able to use the latest code just by refreshing the page, but that won&#39;t work: the old service worker will remain in control across refreshes.

I don&#39;t want to have to tell users, &quot;to receive updates, be sure to close or navigate away from my app.&quot; I want to tell them, &quot;just refresh.&quot;

How can I activate my updated service worker when the user refreshes the page?

EDIT: There&#39;s one answer I&#39;m aware of that&#39;s quick, easy, and wrong: `skipWaiting` in the service worker&#39;s install event. `skipWaiting` will make the new service worker take effect as soon as the update downloads, while the old page tab is open. That makes the update unsafely nonatomic; it&#39;s like replacing a native app bundle while the app&#39;s running. That&#39;s not OK for me. I need to wait until the user refreshes the page of the last open tab.

All Service Worker Solutions on Gang of Coders

Total of 26 Service Worker Solutions