next.js: PWA not working in production
What version of Next.js are you using?
12.0.1
What version of Node.js are you using?
14.17.4
What browser are you using?
Chrome
What operating system are you using?
Windows
How are you deploying your application?
Vercel
Describe the Bug
I implemented PWA using next-pwa
in my application, and went through all the necessary steps. ( creating service worker, next-config file, etc ). Everything looks fine in development - “Install app” option pops up . But in production it just seems to disappear, and not even shows the install option
Expected Behavior
PWA pop-up should both appear in development as well as in production.
To Reproduce
- Install
next-pwa
- Generate manifest ( using Simicart ).
- Creating
_document.js
and adding the necessary links.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icon.png"></link>
<meta name="theme-color" content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
- Configure next-config file
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
register: true,
skipWaiting: true,
},
});
- Add following to
.gitginore
# PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
Also followed according to Nextjs pwa example
For more details visit this repo
Screenshots from Chrome dev tools -
Production link - https://adaalat.vercel.app
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 7
- Comments: 22 (3 by maintainers)
Commits related to this issue
- make genereated service worker ignore middleware-manifest https://github.com/vercel/next.js/issues/30692 — committed to ivandotv/nextjs-material-pwa by ivandotv 3 years ago
Working on this.
This config saves me
https://github.com/shadowwalker/next-pwa/issues/295#issuecomment-972302942
Hi @thinhtran3588 @adikari. The fix is just a update to the Next.js pwa template. If you have already created a project using the template, just upgrading Next.js wouldn’t help. You should use a new version of next-pwa as the PR did. Actually, the problem is on next-pwa’s side.
@wendellhu95 makes sense. Pretty sure I updated next pwa too. I am fine using the suggested config and it’s working fine for now. Thank you
I believe the issue hasn’t been fixed yet, only using the config from the above comment as a work around but it’s not a proper fix @lfade s
Same here, reverted to 11 to make it work again.
There is an example that can easily to reproduced
yarn create next-app --example progressive-web-app progressive-web-app
. The example comes with version “latest”.Follow in below what happens in the lighthouse:
Same issue here. I spent many hours without being able to find a solution
I have the same issue. Changed back to next 11.1.2 then it worked again. Not sure what’s the root cause.