404 Error When Trying to Register Serviceworker

404 error when trying to register serviceWorker

You mention that you have service-worker.js in the same directory as app.js, but the URL passed to .register() is relative to the HTML document's path. You need to make sure your service-worker.js file is in the same directory as the .html file corresponding to the page you're on.

Registering a Service Worker gives 404 in webpack project

Your src/sw.js is never ingested into the webpack asset pipeline, so the webpack development server doesn't know how to respond to requests for it.

If your src/sw.js is just a static file (like it is right now), then you should put it in the public/ directory, and your webpack configuration will automatically expose it to the development server.

The one wrinkle here is that you'd want to make sure that everything in public/ is served from your web root /, not from /public/, because you need the URL for your service worker to be /sw.js, not /public/sw.js.

You can change your CopyWebpackPlugin config to do this:

new CopyWebpackPlugin({
  patterns: [{
    from: Path.resolve(__dirname, '../public'),
    to: '.', // changed from 'public'
  }],
}),

Angular 7 Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script

Since you have mentioned the root as dist folder, your service-worker.js file must be in the dist folder after you run the ng build script.

Add "precache": "sw-precache --verbose --config=sw-precache-config.js" to your package.json scripts object.

Then run: ng build --prod --aot, then npm run precache. Now your service-worker.js file would be present in the dist folder.

Since the angular compiler has compiled your app code into js files and stored it in the dist folder, now you must serve your app from the dist folder.

But the default ng serve doesn't support it. I suggest you use http-server. npm install http-server -g. Then http-server ./dist -o. This opens up your app on the default browser.

I got the error : Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script

Include this in your app.js and put your service worker in your public directory/folder.

app.get("/ServiceWorker.js", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "ServiceWorker.js"));
});

Failed to register a ServiceWorker (404 error) using WebEssentials.AspNetCore.PWA

After submitting my issue on Github I realised that this site is purely Razor Pages whereas my other sites are a mix of MVC (for API routes) and Razor Pages.

This means that the other sites have controllers added and mapped in ConfigureServices and EndPoint Routing but not in this project which is something the package needs to map the additional code.

I've posted this on StackOverflow and Github for the community interest mainly because Microsoft is promoting Razor Pages as the way forward over MVC and other folks may fall over the same issue in the future.

---

Related Topics