Does Next-PWA service worker take a long time to get activated

[pranayperiwal]

Hi, I am working on an app that uses notifications. However, the struggle I am having is to register the service worker and get it active and controlling the page in the first run of the app. It seems like it takes a very long time to register and not on the first run. I need to kill the app maybe once or twice, and only after that does the notification subscription work.
I am using the classic VAPID keys method of enabling notifications.

Is there something I should know about service workers i.e. is this expected behaviour? If it's not, happy to add all my code in.

This is what my custom service worker looks like:

// Push Notification Event Handler
self.addEventListener("push", function (event) {
  console.log("notif push");
  console.log(event);
  if (event.data) {
    const data = event.data.json();
    console.log(data);
    const options = {
      body: data.body,
      icon: data.icon || "/logo.png",
      badge: "/logo.png",
      vibrate: [100, 50, 100],
      data: {
        dateOfArrival: Date.now(),
        primaryKey: "2",
        url: data.url || "/",
      },
    };
    event.waitUntil(
      self.registration
        .showNotification(data.title, options)
        .then(() => {
          console.log("Notification displayed successfully.");
        })
        .catch((error) => {
          console.error("Error displaying notification:", error);
        })
    );
  }
});

// Notification Click Event Handler
self.addEventListener("notificationclick", function (event) {
  console.log("Notification click received.");
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

// Custom logic can go here (if needed)

self.addEventListener("install", (event) => {
  console.log("Service worker installing...");
  self.skipWaiting(); // Skip waiting and activate immediately
});

self.addEventListener("activate", (event) => {
  console.log("Service worker activating...");
  event.waitUntil(
    (async () => {
      await clients.claim(); // Take control of all uncontrolled pages
      console.log("Service worker has taken control of all pages.");
    })()
  );
});

This is my next.config.mjs:

// @ts-check

import withPWAInit from "@ducanh2912/next-pwa";

const withPWA = withPWAInit({
  dest: "public",
  cacheOnFrontEndNav: true,
  aggressiveFrontEndNavCaching: true,
  reloadOnOnline: true,
  disable: false,
  dynamicStartUrlRedirect: "/user",
  publicExcludes: ["!apple-*.jpg", "!manifest-*.png"],
  dynamicStartUrl: true,
  cacheStartUrl: false,
  workboxOptions: {
    disableDevLogs: true,
    skipWaiting: true,
  },
  scope: "/",
  customWorkerSrc: "public/service-worker", // Directory containing the custom worker
  register: true,
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "X-Content-Type-Options",
            value: "nosniff",
          },
          {
            key: "X-Frame-Options",
            value: "DENY",
          },
          {
            key: "Referrer-Policy",
            value: "strict-origin-when-cross-origin",
          },
          {
            key: "Content-Security-Policy",
            value:
              "default-src 'self'; connect-src 'self' https://xyz.supabase.co https://hooks.stripe.com https://js.stripe.com; img-src 'self' https://xyz.supabase.co; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://js.stripe.com; frame-src 'self' https://js.stripe.com; style-src 'self' 'unsafe-inline';",
          },
        ],
      },
    ];
  },
};

export default withPWA(nextConfig);