search

shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.86k stars 323 forks source link

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://xxx.vercel.app/') with script ('https://xxx.vercel.app/sw.js'): A bad HTTP response code (404) was received when fetching the script. #386

Open matteomontipo opened 2 years ago

matteomontipo commented 2 years ago

UPDATE: it works fine using next-pwa 5.5.4

Summary

What can I help with? Please keep this clear and concise.

Versions

How To Reproduce

Steps to reproduce the behavior:

  1. Add the same exact files and settings as indicated in the guide
  2. Do a npm run build + npm run start
  3. Deploy to vercel
  4. Open production site url
  5. See error in chrome console

Additional Context

I have my icons inside /public/images/icons/ (correctly linked in manifest, _app.js, everywhere) but the icons are not directly inside /public/ if that's an issue, idk

My next.config.js file:

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

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

jsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/utils/*": ["utils/*"]
    }
  },
  "typeRoots": [
    "../node_modules/@types",
    "../@types"
  ],
  "engines": { 
    "node": ">=12.0.0"
  }
}

@/types/alltypes.d.ts file:

declare module 'next-pwa';
declare module 'next-pwa/cache';

/public/manifest.json file:

{
  "name": "My pwa",
  "short_name": "pwa",
  "description": "my description",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#xxx",
  "theme_color": "#xxx",
  "icons": [{
      "src": "images/icons/icon-16x16.png",
      "sizes": "16x16",
      "type": "image/png",
      "purpose": "maskable"
    },{
      "src": "images/icons/icon-32x32.png",
      "sizes": "32x32",
      "type": "image/png",
      "purpose": "maskable"
    },{
      "src": "images/icons/icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-76x76.png",
      "sizes": "76x76",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-120x120.png",
      "sizes": "120x120",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }, {
      "src": "/images/icons/icon-1024x1024.png",
      "sizes": "1024x1024",
      "type": "image/png",
      "purpose": "maskable"
    }]
}

_app.js:

import Head from 'next/head'
import {useEffect} from 'react'
import { SessionProvider } from 'next-auth/react'
import '../public/styles/globals.css'
import '../public/styles/style.css'

const MetaLinkHead = () => {
  return (
    <Head>
      <meta charSet="utf-8"/>
      <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"/>
      <meta httpEquiv="ScreenOrientation" content="autoRotate:disabled"/>

      <link rel="alternate" href="https://xxx.vercel.com/" hrefLang="x-default" />

      <meta name="description" content=""/>
      <meta name="keywords" content=""/>
      <meta name='format-detection' content='telephone=no' />
      <meta name='mobile-web-app-capable' content='yes' />

      <link rel="apple-touch-icon" href="/images/icons/icon-152x152.png"/>
      <meta name="theme-color" content="#xxx"/>

      <meta name="apple-mobile-web-app-capable" content="yes"/>
      <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
      <meta name="apple-mobile-web-app-title" content="xxx"/>

      {/* <meta name='msapplication-config' content='/icons/browserconfig.xml' /> */}
      <meta name="msapplication-TileImage" content="/images/icons/icon-144x144.png"/>
      <meta name="msapplication-TileColor" content="#xxx"/>

      <link rel="icon"
        type="image/png"
        href="/images/icons/icon-16x16.png"
        sizes="16x16"
      />
      <link rel="icon"
        type="image/png"
        href="/images/icons/icon-32x32.png"
        sizes="32x32"
      />

      <link rel="manifest" href="/manifest.json"/>

      <meta property="og:image" content="https://xxx.vercel.com/images/og-icon.png" />
      <meta property="og:url" content="https://xxx.vercel.com"/>
      <meta property="og:title" content=""/>
      <meta property="og:site_name" content="xxx.vercel.com"/>
      <meta property="og:description" content=""/>
      <meta name="twitter:card" content="summary"/>
      <meta name="twitter:title" content=""/>
      <meta name="twitter:description" content=""/>
      <meta name="twitter:creator" content="xxx"/>
    </Head>
  )
}

function MyApp({ Component, pageProps: { session, ...pageProps } }) {

  return (
    <SessionProvider session={session}>
      <MetaLinkHead />
      <Component {...pageProps} />
    </SessionProvider>
  )
}
export default MyApp

inside my .gitignore file:

# Auto Generated PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
varand-pez commented 2 years ago

I'm not sure if this is a next-pwa issue. I experienced it too after trying to fresh install my app (by deleting .next, cache and things that next-pwa had added). I think ever since I upgraded to next 12.2.3+ there is an issue in config.js. this is just for reference https://github.com/vercel/next.js/issues/39161

bruceharrison1984 commented 1 year ago

I'm seeing this as well with 5.6.0 and nextjs 13.1.1.

Seems somewhat intermittent, because at one point I had it all working, then the SW.js file started returning 404.

EDIT My issue was related to Turborepo: https://github.com/shadowwalker/next-pwa/issues/449