Service Worker First Load

The SW only takes control of pages when they’re loaded.
Naturally, if your page had loaded before the SW existed, it wouldn’t be able to control it.
Once you refresh the page, the new SW will take control of it.

Updating a Service Worker

If a page loads via a SW, it will check in the background for an update to the SW. If it finds that it’s changed, it becomes the next version.
But it doesn’t take control, it waits while the older SW is still in control. It wont take over until all pages using the current SW are gone (i.e. close, hard refresh or navigate into a page outside the SW scope).

DevTools Tests

Any code you run in the Console tab will run against the document.
The SW lives outside document. So logging self.registration which only exists in a SW will give us undefined.
Change the context of the Console using the drop down and choose sw.js.
Now log the following code and it will work.

self.registration

Try updating the SW with anything then use the Application tab to check for the waiting new SW after you’ve updated the SW file.