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

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.