next-pwa not working in Production Envrionment

[dhavalveera]

Hello,

My Website => I am unable to use PWA on Production Environment on both Desktop & Mobile.

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

module.exports = withPWA({
	reactStrictMode: true,
	pwa: {
		dest: 'public',
		sw: 'service-worker.js'
	}
});

here is my next.config.js code, but it is not working on Production Environment, whereas it is working on Development Environment.

also, after upgrading the npm dependencies packages it's not working on the Production Environment but working perfectly fine on Development Environment.

please help me @shadowwalker

[twlite]

This seems to be a bug (maybe) with nextjs https://github.com/vercel/next.js/issues/30692

[dhavalveera]

I don't think that it's a bug with nextjs, because if I switch to an older version - the first release of next-pwa, then it's working perfectly fine.

[twlite]

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

[SimHoZebs]

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

[gitnasr]

@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!

[patgpt]

Workbox needs to be updated to 6.0

[dhavalveera]

Workbox needs to be updated to 6.0

how to update Workbox in the Next.js app?

[tordsta]

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

[patgpt]

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

[Paultje52]

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?

[TheaRong]

this working for me too! Thanks

[ahurlburt]

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,

[caleb531]

I too am having trouble running next-pwa in a Production environment. Many of the key requests are returning 404s after refreshing the initial page (supposedly when the service worker kicks in).

As you can see, some requests are being served from the service worker just fine, but most are not.

Here are the details:

node version:: v16.5.0 next version: v12.0.8 next-pwa version: v5.4.0

next.config.js

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

/** @type {import('next').NextConfig} */
const nextConfig = withPWA({
  reactStrictMode: true,
  pwa: {
    dest: 'public',
    sw: 'service-worker.js',
    register: true,
    disable: process.env.NODE_ENV === 'development',
    skipWaiting: true,
    runtimeCaching,
    buildExcludes: [
      /middleware-manifest.json$/
    ]
  }
});

module.exports = nextConfig;

It seems like this is related to the OP's issue; does anyone have any insight?

[caleb531]

Figured out the issue; turns out I had an old index.html in my public folder (from before I migrated my project to NextJS), and the next-pwa service worker was trying to cache that and the assets it references. As soon as I removed that index.html and rebuilt the project with npx next build && npx next start, the service worker started working beautifully.

[robertseghedi]

@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. Thanks.

[komailf67]

    "next": "latest",
    "next-pwa": "5.5.4",

in next.config.js

const withPWA = require('next-pwa');
const withPlugins = require('next-compose-plugins');

module.exports = withPWA({
	reactStrictMode: true,
	pwa: {
		dest: 'public',
                runtimeCaching,
                disable: process.env.NODE_ENV === 'development',
	}
});

[aashishnutanix]

next-pwa/cache

Hi I am still working on this issue, not able to resolve it yet, can you help is some way ?

[ahadalichowdhury]

can anyone help me?? i am facing this problem