ReactJS — PWA [Installation/Setup]
This is a ReactJS — PWA Boilerplate, created using create-react-app 🚧
What are Progressive Web Apps?
A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.
PWAs support functionality that is not available for regular websites. It includes offline work, push notifications, access to geolocation, camera, microphone, etc. A PWA can even work outside of a browser, using a native app shell that can launch at startup.
Some of the Popular PWAs:
Some pf the Popular PWAs using ReactJS:
Note: Why use ReactJS?
There is no particular reason to use ReactJS for building PWAs. It’s just my preference. You can use any Technology.
How to Build a PWA 👷
Before making our hands dirty with codes, let’s understand a few facts about PWAs.
⛽️ Following Technologies fuel the Progressive Web Apps:
- service workers: A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.
- web manifests: Or web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the home-screen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).
- application shell: An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications.
Let’s start building our ReactJS — PWA 🚀
How to Install a PWA on your Device
- Mobile Users: find an ‘Add to Home screen’ button (in the notifications provided by the website or in the browser settings).
- Desktop Users: go to the address bar and find the install button on the right.
References:
- Create React App : https://create-react-app.dev/docs/making-a-progressive-web-app
- Lighthouse Chrome Extension: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en
- Link to the Boilerplate GitHub Repository: https://github.com/rajesh-tsg/ReactJS-PWA-Boilerplate