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.
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?
