I have a react app and trying to add PWA functionality to it, I have added manifest.json in the public folder and serviceWorker.js in the src folder.

When I deploy the app on netlify I get an error when checking the manifest file in chrome dev tools in the application section.

No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

My manifest.json

{
    "theme_color": "#f493cf",
    "background_color": "#f6f6f6",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Emily tasks",
    "short_name": "Emily tasks",
    "description": "Emily taks",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

and in index.js in the src folder I have imported serviceWorker and called its register() function.

`import * as serviceWorker from './serviceWorker';

serviceWorker.register();

Currently the serviceWorker.js file is just standard as when it was created when I made the CRA app.

My current folder structure is as follows

-node_modules
-public
--index.html
--manifest.json
-src
--index.js
--serviceWorker.js
-package.json