Nextjs app doesn't register service worker using next-pwa

mhamendes commented 3 years ago

Before opening, please confirm:

[X] I have checked to see if my question is addressed in the FAQ.
[X] I have searched for duplicate or closed issues.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

dt0016ajs5y61

Region

us-east-1

Amplify Console feature

Not applicable

Describe the bug

I'm using next-pwa lib to register the service worker on my web-app.

When I deploy the same code when deployed through AWS Fargate, the service-worker is identified and registered automatically, but when I deploy it using Amplify, the service-worker is not registered, even though I can access the file when going to the url it's available at.

My withPWA config:

withPWA({ pwa: { dest: 'public', skipWaiting: true, disable: process.env.NODE_ENV === 'development', runtimeCaching, register: true, }, )

Both deployments are successful, but only the fargate one is registering the service worker as it should.

Expected behavior

The amplify deployment should automatically register a service worker when the webapp loads

Reproduction steps

Create next app
Config next-pwa on next.config.js
Deploy the webapp using Amplify
Access deployment url

Build Settings

version: 0.1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - export BUILD_DIR=$PWD/$BUILD_DIR_NAME
        - yarn install
        - cat aws-exports.js
        - yarn lint --fix
        - export NODE_OPTIONS="--max-old-space-size=5120"
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Additional information

Fargate deployment is the production, it's using a custom domain and Amplify deployment is using the default amplify url. I don't think it should matter.

mhamendes commented 3 years ago

Any news on this issue? I'm still to get the service worker to properly install in my webapp...

yehonadav commented 2 years ago

i would also like to see this working, i'd even be happy to assist

yehonadav commented 2 years ago

I managed to solve my issues. Here are some errors I encountered along the way, maybe if you had those you can solve the problem yourself like I did:

error in amplify build build fails, usually without an error message. Eventually I saw that I had a static directory inside my public directory that messed up something in cloud front. cause: static directory inside the public directory solution: rename the directory
error in amplify build build fails saying webpack module is missing. cause: later versions of next don't require webpack, but next-pwa does solution: install webpack and make sure to require it in the top of the next.config.js file
error caught in the browser's inspection console: workbox-1846d813.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://xxx.xxx.amplifyapp.com/_next/static/xxx/_buildManifest.js","status":403}] at Y.j (https://xxx.xxx.amplifyapp.com/workbox-1846d813.js:1:16757) at async Y.D (https://xxx.xxx.amplifyapp.com/workbox-1846d813.js:1:16355) at async Y.v (https://xxx.xxx.amplifyapp.com/workbox-1846d813.js:1:7597) cause: I had a sw.js & workbox-1846d813.js files in my public directory that I put there manually solution: I removed the files.
another error caught in the browser's inspection console: A bad HTTP response code (404) was received when fetching the script. last-working-point.d…l.amplifyapp.com/:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://xxx.xxx.amplifyapp.com/') with script ('https://xxx.xxx.amplifyapp.com/sw.js'): A bad HTTP response code (404) was received when fetching the script. cause: not really sure... solution: i added this to my next.config.js
```
pwa: {
dest: "public",
register: true,
skipWaiting: true,
}
```

after this all i did was following chrome's light house results.

And I successfully managed to make next-pwa work with my amplify app.

mhamendes commented 2 years ago

I played a little bit with this today and still no luck, but I'm not using only next-pwa, I'm also using other plugins

In the console I don't get any of the errors you got along the way, it just shows that the service worker is not installable in the manifest area in the application menu on dev tools.

This is my next.config.js file:

const withImages = require('next-images');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
const { withSentryConfig } = require('@sentry/nextjs');
const { i18n } = require('./next-i18next.config');

const moduleExports = withBundleAnalyzer(
  withImages(
    withPWA({
      reactStrictMode: true,
      pwa: {
        dest: 'public',
        register: true,
        skipWaiting: true,
        runtimeCaching,
        buildExcludes: [/middleware-manifest.json$/],
        disable: process.env.NODE_ENV === 'development',
      },
      images: {
        disableStaticImages: true,
      },
      i18n,
    })
  )
);

module.exports =
  process.env.NODE_ENV === 'development'
    ? moduleExports
    : withSentryConfig(moduleExports, {});

and this is my manifest.json file:

{
  "name": "Test",
  "short_name": "Test",
  "theme_color": "#5e35f2",
  "background_color": "#f8f9ff",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "scope": "/",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

YarosalvGoIT commented 4 months ago

Hi. Same problem. Do you have any solution?

When I start project on windows - work fine. On ubuntu - worker don`t register and console is clear.

aws-amplify / amplify-hosting