MrCoder/service-worker.md

## service-worker.md

      
    Raw
  

              service-worker.md
            
          
    Service workers intercept all network connections

There is one Service worker for one tab

There is one service worker for one tab, if you open two tabs for the same site, there will be two service workers.
Misunderstanding
Servicer workers are generated with some tools and not hand-written

Misunderstanding
I have got this impression because the project I worked on is using the gulp task "generate-service-worker'.
It requires two refreshes to activiate a new version of service worker

Once you have made changes to the service worker, it requires two refreshes to activiate it
Misunderstanding
Once you have made changes to the service worker, when you refresh the page, the service worker enters a wating status. Regardless how many times you refresh the page, it remains in waiting status. There are a few ways to activiate the new service worker:

Shift refresh;
Close the current tab and open a new tab;
Go to a different domain (not a different URL on the same domain) and come back;
Enable "update on reload" on the dev tools -> Applications -> Service Workers window and refresh;
Click "skipWaiting" on the Service Workers window.

"update on reload" configuration has impact on the current tab only

Misunderstanding
This configuration is a global configuration. You can think of it as a global variable. The last set matters. For example, if you have 3 tabs: A, B, C.
Step 1: A OFF, B OFF, C OFF;
Step 2: Switch on "update on reload" on A, the global configuration is "ON";
Step 3: Switch it on on B and C and switch it off on B, the global configuration is "OFF".

To verify that registration is global, in the developer tools console, switch context to sw.js, and check the values of registration.active and registration.waiting.