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

Most upvoted comments

Working on this.

+11

wzhudev on Nov 9, 2021

This config saves me

https://github.com/shadowwalker/next-pwa/issues/295#issuecomment-972302942

faturachmanyusup on Nov 21, 2021

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.

wzhudev on Nov 26, 2021

@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

adikari on Nov 26, 2021

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 Screen Shot 2021-11-25 at 20 22 17 s

thinhtran3588 on Nov 25, 2021

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: Screenshot from 2021-11-03 08-40-04

julioflima on Nov 3, 2021

Same issue here. I spent many hours without being able to find a solution

GuillaumeBettin on Nov 1, 2021

I have the same issue. Changed back to next 11.1.2 then it worked again. Not sure what’s the root cause.

thinhtran3588 on Nov 1, 2021