next-pwa sw.js redundant and not working on Vercel

Question

I am working on NextJS app that runs next-pwa but only works on local environment. But when I deploy to vercel, it seems that sw.js is redundant. I spent so many hours on this but feel stuck anyway.

Here's my next.config.js

const { withPlugins } = require("next-compose-plugins");
const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

const nextConfig = {
  env: {
    API_URL: "https://multikart-graphql-dun.vercel.app/server.js",
  },

  // if you want to run with local graphQl un-comment below one and comment the above code
  // env: {
  //   API_URL: "http://localhost:4000/graphql",
  // },

  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

module.exports = withPlugins(
  [
    [withImages],
    [
      withPWA,
      {
        // reactStrictMode: true,
        pwa: {
          dest: "public",
          sw: "sw.js",
          // swSrc: "service-worker.js",
          // scope: "/",
          // register: true,
          // skipWaiting: true,
          // buildExcludes: [/middleware-manifest.json$/],
        },
      },
    ],
  ],
  [nextConfig]
);

and here's my manifest.json

{
  "short_name": "App",
  "name": "App: App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#b8d8e6",
  "background_color": "#b8d8e6",
  "prefer_related_applications": true,
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "/icons/imagedummy192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/imagedummy512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

I commented the rest of the config (runTimeCaching, skipWaiting, register), since it makes no difference

I have followed https://github.com/vercel/next.js/issues/30692 and https://github.com/shadowwalker/next-pwa/issues/295

I also have followed basic config on this repo: https://github.com/shadowwalker/next-pwa/tree/master/examples/minimal

I also did turn off the adblocker

but nothing seems to work, and sw.js always redundant

Can anybody help, What did I do wrong?

Answer 1

I found an answer to the question.

So to make the service worker works, I needed to build the service worker on production build ( npx next build ).

After the build complete, I remove the service worker on .gitignore to make it deployed to the repository.

And then voilaa.. the next-pwa works. Although, it needs 10 minutes for service worker success to build.