workbox icon indicating copy to clipboard operation
workbox copied to clipboard

endless service worker updates after first registration without page refresh

Open pavlexander opened this issue 3 years ago • 0 comments

Library Affected: "workbox-background-sync": "^6.5.3", "workbox-core": "^6.5.3", "workbox-precaching": "^6.5.3", "workbox-window": "^6.5.3"

Browser & Platform: tested on Edge

Issue or Feature Request Description: After SW registers for the fist time (or user manually unregisters a worker and refreshes the page) - all following sw version updates will be auto-activated (skipWaiting auto-triggered).

steps to reproduce

  1. sw.js
import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";

//precacheAndRoute(self.__WB_MANIFEST);
precacheAndRoute([
  { revision: "87f48b43683c695c054d937e20ecf20e", url: "manifest.webmanifest" },
  {
    revision: "1ee7e898708ec49a4f654f623b0579b0",
    url: "assets/index.b806230e.css",
  },
  {
    revision: "74ee3f6b2f7277cd72e41755634f7871",
    url: "assets/index.f4169c83.js",
  },
  { revision: "de1a8c1e5f67be18ed4d254f00217ea6", url: "index.html" },
]);

cleanupOutdatedCaches();

  1. app
import { Workbox, messageSW } from "workbox-window";

let wb;
let registration;
if (process.env.NODE_ENV === "production") {
  if ("serviceWorker" in navigator) {
    isServiceWorkerSupported.value = true;

    wb = new Workbox("/sw.js");

    wb.register({ immediate: false })
      .then((r) => {
        console.log("onRegistered", r);
        setInterval(() => {
          console.log("updating!!");
          r.update();
        }, 10000);
      })
      .catch((e) => {
        serviceWorkerRegistrationError.value = e.message;
        console.error(e);
      });
  }
}
  1. build. Open app first time. Refresh window. This is our starting point.

image

  1. Change code in app. Build. New SW version shown in chromium debugger:

image

Verify: no auto-activation triggered.

  1. Change code in app. Build. New SW version shown in chromium debugger:

image

Verify: no auto-activation triggered.

  1. Unregister service worker in debugger:

image

image

Verify: worker status is stopped and deleted

  1. refresh browser window

image

Verify: version of the website from the last build is shown. Latest sw worker is activated and running.

  1. Change code in app. Build.

image

Verify [PROBLEM]: Service worker new version got auto-activated (old version of the website is still used, no page refresh was done).

  1. Repeat step 8 as many times as you want. New SW version will be activated (skipWersion triggered for us). Old site version will keep running until browser window refresh.

why is this a problem?

Because on first page load - if user keeps using this page without refresh - it will keep updating (installing AND activating) to new version forever! I also think that refreshing the page on first activation is bad solution so please do not propose this.

You can verify this problem by opening an incognito window in browser and checking the service worker statuses after new builds (manual de-registration is just a hack if you don't want to deal with incognito)

Another issue is that according to documentation:

https://developer.chrome.com/docs/workbox/reference/workbox-window/

update: function: Checks for updates of the registered service worker.

update function should only invoke new version updates checks, not activate them.

update function works fine as long as you have done the page refresh after first activation. If you didn't - then you deal with the problem from above. :)

pavlexander avatar May 01 '22 16:05 pavlexander