In this article, we will learn how to create Progressive Web App with react.
Online apps known as PWAs combine the advantages of native and web applications. In the guise of a cross-platform app that is quicker, simpler, and less expensive to develop and maintain than a native app, it provides hardware functionalities.
PWAs support features that are unavailable on standard websites.
It has access to geolocation, push notifications, a camera, a microphone, and other features. Even without the use of a browser, a PWA can function by using a native app shell that can run automatically.
-You need to create a project using customer templates which is provides a service-worker.js file. an using this file we can make our app offline.
-Here we are creating a pwa-app project :
npx create-react-app pwa-app --template cra-template-pwa
-Then register the service worker :
open the index.js file and find the below code.
// If the app works offline and loads faster, you can change // unregister() t o register() below. // Learn more about service workers: serviceWorker.unregister();
here you can see service worker is not registered. The unregister() call must be changed to register ().
-Then test you PWA :
npm run build
npx server build
Your application is now complete, and you can test it. Google has created a PWA checklist, and we can use Lighthouse to evaluate the web app .
