SW registration failed

[MatteoGioioso]

Bug report 🐞

Hello there, I am trying to use this library with my custom service-worker file, but unfortunately is not working for my use case.

I am receiving this error:

SW registration failed:  TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

I am using Next.js inside a Docker container

Docker file:

FROM node

WORKDIR /usr/src/app

COPY . .

RUN npm install pm2 -g

RUN npm install

RUN npm run build

CMD ["pm2-runtime", "start", "npm", "--", "start"]

Docker compose

#Test service workers configuration
version: '3'

services:
  frontend:
    build: frontend/
    ports:
      - 3000:3000

Next.js config

const config = {
  // Service Worker
  generateSw: false,
  workboxOpts: {
    swDest: "./service-worker.js", // <-- I have tried different path (static/, server/)
    swSrc: path.join(__dirname, "./utils/serviceWorker/sw.js"),
    globPatterns: [
      "**\/*.{ico,html,js,json}"
    ],
    globDirectory: './_next/static',
  },
}

"next": "8.0.3",
"next-offline": "3.3.7",
"react": "16.8.1",
"react-dom": "16.8.1"

After the build process I can see my service worker file appear correctly in the .next folder.

Looks like the custom service worker use case is not common, so if there is something wrong in my config, please forgive me 🙏 .

This is the repo where you can reproduce the error (In this case I have not use Docker): https://github.com/MatteoGioioso/next-offline-sw-error-2

Thanks

[hanford]

Thanks providing a repo where this consistently happens. I'm pretty busy this week but will report back once I have some time to dig in

[straxico]

i have similar problem

[MatteoGioioso]

@hanford hello any update? If you have something in mind, with some guidance I can help to fix it.

[srosset81]

I'm running into the same issue. @MatteoGioioso I would be glad to hear how you solved it !

[hanford]

@srosset81 @MatteoGioioso @straxico

After looking, you need to either have a custom next.js server or a now.json to handle the service worker request.

next-offline needs something to handle the request, as Next.js won't handle it by default.

The Now 1.0 example is probably easiest for existing Next.js applications, I use it in several other personal projects.

The only real changes are the server.js and package.json scripts but this code should basically be a drop in fix for you: https://github.com/hanford/next-offline/tree/master/examples/now1

[hanford]

I've fixed the issue in the repro case you shared over here: https://github.com/hanford/next-offline-issue-127

Going to go ahead and close issue. Feel free to drop another comment if you have any questions

[GusRuss89]

I'm a bit confused by this. If the service worker is generated at compile time, why do I need a custom server to serve it? Can't I just point to the pre-generated service-worker.js as a static file?

[hanford]

@GusRuss89 service workers aren't treated as ordinary JS files.

w3c/ServiceWorker#940

If you're using Now 2.0, you don't need a standalone server, just a now.json. You can see how that works by looking at my personal website

[MatteoGioioso]

@hanford Hei, sorry, I forgot to say thanks for the help!

[softwarenacho]

https://github.com/hanford/next-offline-issue-127

The link is down and I have this same issue.

[hanford]

@softwarenacho please open a new issue

[MatteoGioioso]

@softwarenacho I have forked it
https://github.com/MatteoGioioso/next-offline-issue-127

[hanford]

thanks @MatteoGioioso !

[softwarenacho]

@softwarenacho I have forked it
https://github.com/MatteoGioioso/next-offline-issue-127

Thanks @MatteoGioioso , I managed to solve it following one off the examples @hanford had published at:
https://github.com/hanford/next-offline/blob/master/examples/now2/now.json

I was missing including the service worker in the now configuration.

[ahmadawais]

For folks who are using workspaces and have the Next.js site in a dir called www make sure you use the following now.json setting.

{
"routes": [
		{
			"src": "/service-worker.js",
			"dest": "/www/_next/static/service-worker.js",
			"headers": {
				"cache-control": "public, max-age=43200, immutable",
				"Service-Worker-Allowed": "/"
			}
		},
]
}

[davisbartce]

@hanford I have the same problem but in a pm2 server in nginx

but in now work perfect any idea ??

[hanford]

@davisbartce No idea! maybe you need to set something up manually in nginx?

[davisbartce]

@hanford the nginx configuration is ok, the site work but the service worker is not found,,. maybe you now where is the directory to generate this file?? y wrote the detail in this isue #141

[Toyurc]

Hi @hanford, this error still occurs till date. I read through this thread and even checked out your website, It is also broken on there, check the console and you would see SW registration failed: TypeError: Failed to register a ServiceWorker for scope ('https://jackhanford.com/') with script ('https://jackhanford.com/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.

[nikhilmeria]

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

module.exports = withPWA({
pwa: {
dest: 'public', // this is very imp
disable: process.env.NODE_ENV === 'development',
register: true,
scope: '/',
sw: 'service-worker.js',
},
});`

add this line in next.config.js -> dest: 'public',