next-pwa: next-pwa not working in Production Envrionment

@dhavalveera yesterday I went through different solutions I found and somehow PWA started to work after updating my config to

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
	reactStrictMode: true,
	pwa: {
		dest: "public",
		register: true,
		skipWaiting: true,
		runtimeCaching,
		buildExcludes: [/middleware-manifest.json$/]
	}
});

package versions:

"next": "^12.0.4",
"next-pwa": "^5.4.0"

before updating the config, I could not get PWA to work on prod

I dont really know if this helps you though.

Hi! I’m having the same problem. In the local environment everything works fine. In production, deployed with Cloudflare Pages, it doesn’t work because the service worker doesn’t get loaded. I’m using the latest version of next-pwa (5.4.1). I also check the package-lock.json file, and everywhere the version of workbox is 6.4.1 (Including packages like workbox-background-sync)

next.config.js

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
  pwa: {
    dest: "public",
    runtimeCaching,
  }
});

When running next build && next export, the files sw.js and workbox-XXXXXXXX.js appear in the out director.

Error message

Looking in the out/_next directory, I cannot find a file called middleware-manifest.json (I’ve checked every dir). There is a file called DcKWOchXOD8AY8wgjWFqP/_middlewareManifest.js, with this content.

self.__MIDDLEWARE_MANIFEST=[];self.__MIDDLEWARE_MANIFEST_CB&&self.__MIDDLEWARE_MANIFEST_CB()

Does that mean that workbox is somehow is trying to load a file that it isn’t supposed to?

@dhavalveera yesterday I went through different solutions I found and somehow PWA started to work after updating my config to

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
	reactStrictMode: true,
	pwa: {
		dest: "public",
		register: true,
		skipWaiting: true,
		runtimeCaching,
		buildExcludes: [/middleware-manifest.json$/]
	}
});

package versions:

"next": "^12.0.4",
"next-pwa": "^5.4.0"

before updating the config, I could not get PWA to work on prod

I dont really know if this helps you though.

Worked for me!

@dhavalveera yesterday I went through different solutions I found and somehow PWA started to work after updating my config to

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
	reactStrictMode: true,
	pwa: {
		dest: "public",
		register: true,
		skipWaiting: true,
		runtimeCaching,
		buildExcludes: [/middleware-manifest.json$/]
	}
});

package versions:

"next": "^12.0.4",
"next-pwa": "^5.4.0"

before updating the config, I could not get PWA to work on prod

I dont really know if this helps you though.

Discussion’s been on going on #288 and so far this is the proposed solution, but people seem to have issues using _middleware.js and a custom error page after this.

This is not working for me. I confirmed the precaching error goes away but I cannot login to the app. Removing withPWA solves the problem.

This was not an issue before next 12 upgrade.

const withPWA = require("next-pwa");

module.exports = (phase, { defaultConfig }) => {
  return withPWA({
    pwa: {
      dest: "public",
      register: true,
      skipWaiting: true,
      buildExcludes: [/middleware-manifest\.json$/],
      disable: process.env.NODE_ENV === "development",
    },
    images: {
      loader: "imgix",
      path: "/",
    },
    swcMinify: true,
  });
};

I’m using amplify.js to handle login via cognito and when I select sign-in the serviceworker loads a static chunk but the spinner just goes indefinitely… Not sure how to further debug this.

Edit: this works if I remove

    swcMinify: true,

Workbox needs to be updated to 6.0

how to update Workbox in the Next.js app?

The template use using an old version of the withPWA plugin so I updated it to the latest in the package.json

@dhavalveera yesterday I went through different solutions I found and somehow PWA started to work after updating my config to

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
	reactStrictMode: true,
	pwa: {
		dest: "public",
		register: true,
		skipWaiting: true,
		runtimeCaching,
		buildExcludes: [/middleware-manifest.json$/]
	}
});

package versions:

"next": "^12.0.4",
"next-pwa": "^5.4.0"

before updating the config, I could not get PWA to work on prod

I dont really know if this helps you though.

This worked for me! Thanks.