Can't get new service worker to activate using skip waiting

Viewed 432

I'm using Next.js and next-pwa. I'm trying to implement the following example : https://github.com/shadowwalker/next-pwa/tree/master/examples/lifecycle

In my layout component, I'm registering my service worker like so

  const handleNewVersion = () => {
      const wb = window.workbox;
      wb.addEventListener("controlling", event => {
        window.location.reload();
      });

      wb.messageSW({type: "SKIP_WAITING"});
  };

  useEffect(() => {
    const wb = window.workbox;

    if (typeof window !== "undefined" && "serviceWorker" in navigator && window.workbox !== undefined) {
      // handleClick opens a snackbar with a refresh button, which when clicked calls the handleNewVersion function
      wb.addEventListener("waiting", handleClick);
      wb.addEventListener("externalwaiting", handleClick);
    }
    
    wb.register();
  }, []);

The snackbar appears, but the refresh button does nothing. In the DevConsole, the skipWaiting button does nothing too.

skipWaiting not working

This is my next.config.js

const withPWA = require("next-pwa");
const withPrefresh = require("@prefresh/next");
const preact = require("preact");
const withPreact = require("next-plugin-preact");

const runtimeCaching = require("next-pwa/cache");
runtimeCaching[0].handler = "StaleWhileRevalidate";

const prod = process.env.NODE_ENV === "production";

module.exports = withPreact(
  withPWA({
    pwa: {
      disable: prod ? false : true,
      register: false,
      dest: "public",
      skipWaiting: false,
      runtimeCaching,
    },
    experimental: {
      modern: true,
    },
  })
);

Can someone tell me what I'm doing wrong?

0 Answers
Related