How do I build my service worker in the package.json file?

Question

This is the top of my package.json file:

{
"name": "genta",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "http-server ./build -c-1",
"watch": "watchify -e  ./src/index.js -o ./build/assets/js/client.bundle.js -t [ babelify ] -t [ envlocalify ]",
"build": "npm run compile && npm run minify",
"compile": "browserify -e  ./src/index.js -o ./build/assets/js/client.bundle.js -t [ babelify ] -t [ envlocalify --envfile .env.prod ]",
"minify": "uglifyjs  ./build/assets/js/client.bundle.js -o ./build/assets/js/client.bundle.js -c -m",
"start": "npm-run-all --parallel watch serve",
"sync": "npm run build && aws s3 sync build/ s3://spark.generaltraffic.co.uk --profile=genta-s3 --acl public-read --exclude 'node_modules/*|.env'"
},

This is my serviceWorker.js file:

self.addEventListener('install', (e) => {
    console.log('Service Worker Installed');
});

This is my index.js file (main in package.json):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            console.log('window loaded')
            navigator.serviceWorker
            .register('../serviceWorker.js')
            .then(reg => {
                console.log('Service worker registered value', reg);
            })
            .catch(err => {
                console.log(`Service worker Error: ${err}`);
            })
        })
    };

I currently get this error in the browser:

Service worker Error: TypeError: Failed to register a ServiceWorker for scope ('https://spark.generaltraffic.co.uk/') with script ('https://spark.generaltraffic.co.uk/serviceWorker.js'): A bad HTTP response code (403) was received when fetching the script.

pate · Accepted Answer · 2019-12-01 13:09:41Z

1

Your question's title doesn't actually really correspond to the error you're getting :-)

What your error message in the console is saying, rephrased: the browser tried to register a Service Worker from the URL "https://spark.generaltraffic.co.uk/serviceWorker.js" but the server responded with an HTTP 403 Forbidden -- this resulted in a failure to register the Service Worker.

If you go to that address - https://spark.generaltraffic.co.uk/serviceWorker.js - you'll see that the server is not serving your SW file but instead giving an HTTP 403. You'll have to fix that first. So make sure the SW script is available by checking it in your browser and only after that try to see if the page registers the SW etc.

answered Dec 1, 2019 at 13:09

pate

5,3232 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael93 Over a year ago

thanks for the answer but I don't really know get what you mean / why it's not working. Can you tell me what to do?

Collectives™ on Stack Overflow

How do I build my service worker in the package.json file?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related