Progressive Web apps using react

Progressive web apps build websites that deliver an experience indispensable from native mobile apps. When smartphones first hit the scene back in 2007- 2008, they brought with them all kinds of new features that are not available on websites such as push notifications, offline mode, camera, Geolocation, and more. Internet explorers powered the web back then web developers did not have access to most in-device features. In 2021 though the game will be changed. 

Today the web platform has reached near feature parity with native apps. Notice how the Twitter PWA can be installed like a native app. It works without a connection, It can interact with the device, camera, Geolocation, and also receive Push Notification. On top of that, the web applications offer much better distribution than the app stores ( Android and iOS ). It does not cut 30 Percent of your app revenue. Also, your PWA will work on iOS, Android, and the web from a single code base. 

Steps to Turn Website into PWA

If you own a website, then turning to PWA is much easier than you think:

Firstly, you need to open up the lighthouse tool in chrome dev tools to run an audit on your website. It will tell you how well your website performs and want things you need to change to qualify as PWA. At a bare minimum, the site needs to load more quickly and be accessible on mobile. Most websites already check these boxes. The more difficult requirement is making the PWA work offline. 

Normally a website works on a single thread while the tab is open. However, modern websites can now register a service worker which is just a script that runs in the background. It can perform caching background sync and listen to push notifications among other things. The implementation is actually simple, we just have to check if the browser supports this feature. Then, register a JavaScript file as the worker. Once registered, you will find it activated in the application tab in the chrome dev tools. From there you can write your own code in the worker file or use a library like a workbox to do everything.  

Most importantly, you will want to cache the URLs in your app, so that they can be viewed offline. You can inspect the cache and other background services here in the application tab. The final step is to create a manifest.json file that contains Icons and other metadata about the app. Once the requirements have been met you will unlock the PWA achievement and lighthouse at which point your app can be installed on most native devices and can be listed in app stores i.e. google play store or iOS store.

Developing PWA with React: Step by Step Guide

1. Firstly to develop Progressive web apps with React you need to install, we have to “create-react-app”

 npm install -g create-react-app

2. You can use the command given below

“ create-react-app PWA-task-manager “ to create the project.

3. Use the Audit tab in the chrome browser

To check the exhibition, openness, Progressive web applications, and so forth of the site, you have to open a review tab in google chrome. Now, you need to click on run review button that will automatically generate a report through the lighthouse.

4. Service worker

For developing progressive web apps, the technical foundation is provided by service workers. Now many of you might be thinking about what service workers are?. A service worker is a script that your browser runs in the background to enable the offline working of your web app. It acts as an intermediary between your browser and the network, to intercept and handle network requests.

Service worker is separate from a web page as it enables the features that do not need a web page or user interaction. It also enables Progressive web applications to use the cached files and give moment incredible client experience, past the organization state. It also enables web apps to dynamically load as you navigate around the app and also minimize data traffic.

Read Also: Reactjs vs Angularjs

5. Register/Unregister Service specialist 

You can simply register service-worker by putting code in the script tag if you are having a methodology of utilizing index.html record for root document. On the other hand, If your service workers are enabled, then it will show the popup message in the console i.e. “Worker registration successful”. Now, your progressive web applications are set up and in response. It is the ideal opportunity for testing.

6. Check Progressive web applications working

You can test your PWA on the localhost, but need to make sure that you host it on a secure server. You can check it in localhost using the below command

$ yarn start

Now Run your web app in the audit tab of chrome browser, it will generate a report function. When developing a PWA we enable available choices to set up everything like the above advances. There is a drawback while creating one PWA is that for storing local data of apps, it depends on your browser’s memory. 

Now, you have to go to the Network tab in your chrome program and go offline to disconnect. Furthermore, hard refresh or revive the page. You will see that the application has successfully developed. 

Therefore, the reason for its working in offline mode we have discussed above i.e  service-workers. Its pre-cache is the key source and it will load from the stored cache when not found the online source. Your PWA will get the updated, if anything got adjusted within source in live mode.