[Web] Don't force-reload the Service Worker

[adamziel]

Description

Auto-reloading the service worker when it's updated thrashes any postMessage communication that's in progress at the moment of calling skipWaiting(). This causes Playground to hang at the "login" step in #559.

This PR removes the entire concept of detecting the service worker version and enforcing an update on mismatch.

The browsers handle a lot by default:

• registration.update() method downloads the new service-worker.js file and compares it byte-by-byte with the existing one
• The previous service worker won't die until all the browser tabs it serves are closed
• The new service worker will automatically replace the previous one afterwards

The only problem remains deploying a website that is backwards–incompatible with the previous service worker.

Let's handle that case as follows:

• Avoid changes that break the website before the service worker gets updated.
• If they can't be avoided, let's ship them with a service worker that forces a one-off skipWaiting() and reloads all served browser tabs.

cc @ellatrix @dmsnell

[adamziel]

This PR solves one issue but creates another – despite the window.top.location.reload() call the service worker is only actually reloaded on a second page refresh. Once we figure that out, we'll be good here.

[dmsnell]

I'm confused here. Is the problem that the service worker upgrades itself to newer copies of the service worker code, but we initiate that?

Is there a way to reject updates? Why apply the update in the middle of a session when we could choose to only update at app bootup? Or when there are no messages going on (consider, for example, triggers at a new session at at some number of minutes since the last activity from a session)

[adamziel]

@dmsnell I still find service workers confusing.

• Once it gets registered, it lives in the browser forever. If you visit https://playground.wordpress.net/ today and return in a month, you'll still have the previous service worker. However, if there was a deploy in the meantime, there's a chance the new website is incompatible with the old service worker – which is why we want to update it.
• At the same time, if someone is on https://playground.wordpress.net/ at the exact time we deploy a new service worker, I'd prefer them to keep using the previous version instead of force-reloading their browser tab. This means any new playground tab must load the old JS, CSS etc files.
• Also, a single service worker serves all open tabs. It won't update until you close all your Playground tabs, unless the service worker itself forces it by calling self.skipWaiting()

I'm starting to think the only bulletproof solution here might be doing a PWA. This way we could auto-update on return, but keep using the old version if you open a new playground in an active browsing session.

[adamziel]

I removed the entire concept of detecting the service worker version and enforcing an update on mismatch.

I just realized the browsers give us a lot by default:

• The update() method downloads the new service-worker.js file and compares it byte-by-byte with the existing one
• The previous service worker won't die until all the browser tabs it serves are closed
• The new service worker will automatically replace the previous one afterwards

The only case this doesn't cover is "the newly deployed site is backwards–incompatible and requires the new worker".

Let's handle that case as follows:

• Avoid changes that break the website before the service worker gets updated.
• If they can't be avoided, let's ship them with a service worker that forces a one-off skipWaiting() and reloads all served browser tabs.

The latter would mean reloading work-in-progress tabs for folks who:

• Use Playground as that change is rolled out
• Open a new Playground tab while the existing tabs are still active

Since that could be potentially destructive, that new tab could ask for permissions, e.g.

New Playground version was just released. You can continue using your current browser tabs, but if you need to open a new tab then Playground will reload ALL your currently open tabs. This will destroy your work in progress on all your temporary sites but won't affect your permanent sites. Would you like to proceed?