I am new to react and was learning react by developing a small application. The app was bootstrapped using create-react-app and was deployed using github pages. Everything works fine but i cannot get the PWA part of the app working.
If i click add to home screen option from Application tab in the chrome Dev tool, I'm getting the following error
Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest
My manifest.json file looks like this
{
"short_name": "Bill Splitter",
"name": "205 Bill Splitter",
"icons": [
{
"src": "logo.png",
"sizes": "192X192 144X144 64x64 32x32 24x24 16x16",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
I don't have much knowledge about the service workers and my belief was that it will get registered automatically to the app. But i am not sure whether the build process is doing this. How can i do this.
A live version of the app can be found in this link https://jishnuramesh.github.io/bill-splitter/
According to the facebook docs,
By default, the build process will generate a service worker file, but it will not be registered, so it will not take control of your production web app.
In order to opt-in to the offline-first behavior, developers should look for the following in their src/index.js file:
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers
serviceWorker.unregister();
As the comment states, switching serviceWorker.unregister() to serviceWorker.register() will opt you in to using the service worker.
refer : https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app