pwa: Failed to register a ServiceWorker: 404
I just created a new project using this template (I answered y to everything except eslint), then ran yarn followed by yarn run dev.
When I opened the Chrome console I noticed this error message:
Uncaught (in promise) TypeError: Failed to register a ServiceWorker:
A bad HTTP response code (404) was received when fetching the script.
On Windows 10, Chrome version 58.0.3029.96 (64-bit)
Edit: some additional related errors popped up after a while:
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 31 (4 by maintainers)
Same problem, but service-worker.js don’t show this error in production env
Hello everybody!!!
For those who believe that the workers work only on https: https://angular.io/guide/service-worker-getting-started (read carefully)
Hello!!! this error for me was occured in angular project, i moved location of sw file to src folder and added in angular-cli.json in assets […“sw.js”]. that helped me! i wish this info will be useful for you!
#21 has now landed. If anyone continues to see issues with this after testing master, please let us know!
@addyosmani yes, still got error on dev. +1 for support this (I would like to test my app performance locally before publish)
The workaround I have for this locally is that we just register SW if we detect that you’re not running under localhost or a dev server. For the majority of beginners (who aren’t going to understand how to switch off SW or debug it easily), just enabling it during the production build seems to be a reasonable call. Does anyone strongly disagree?
@ragingwind created https://www.npmjs.com/package/sw-precache-webpack-dev-plugin which works during dev, but as it notes it works under limited circumstances. I’d personally suggest we try to get folks using precache in prod and consider improving on that in the future.
#21 removes Service worker registration when running in dev mode. This fixes the error.
We still can’t debug Web Service in dev mode (as it’s disabled), but as said before, this is an sw-precache-webpack limitation (https://github.com/goldhand/sw-precache-webpack-plugin#webpack-dev-server-support).
@brunorafael8 @SoullessWaffle @zackkrida @kaungmyatlwin If any of you have a chance, would you mind giving https://github.com/vuejs-templates/pwa/pull/21 a try and let us know how well it solves the issue? I’d love to figure out if that’s sufficient or whether I should keep working on my local fixes for it. Cheers!
@addyosmani I made it, PTAL https://github.com/vuejs-templates/pwa/pull/21
I’ll take another look at this today. Thanks for confirming the issue is present, folks.
@ragingwind Do you want to try PR’ing in a version of your patch in https://github.com/ragingwind/pwa/commit/8035a6a412d44b2d79b53ac7774d72af5623a43f? There may be a cleaner way for us to do the dev/prod injection but it would be nice to play around with it in PR form a little.
FYI, I’ve also create https://www.npmjs.com/package/sw-precache-webpack-plugin-loader. To use sw-precache to be regardless during develop apps. For some of developers, it would be good that it could be deal with in a document like receipt docs.
Supporting sw-precache in webpack-dev-server is growing as something else to worry about. so I think we need to find a way of supporting it.
Thanks for filing an issue!. I haven’t been able to repro this yet, but will give it a few retries.