How to build a Progressive Web App (PWA) with React.js?
It's necessary to set up your project before you can start coding. Let's begin by making sure you can use React (if you're already comfortable with React code, you can definitely skip this piece!). When using web frameworks like Angular, React, or Vue for development, you must use Node.js, especially if you intend to employ libraries and packages to speed up the process.
The Node Package Manager, also known as "npm," is a widely used tool for using such packages and libraries. You can start building your React application using webpack and install and remove packages using this program, among many other things. For your requirements, you can use npm to build a React application using a PWA template, allowing you to start coding right away. Whenever you begin developing a React project, you can use Facebook's templates by using the npm command "create-react-app."
Let's develop the PWA basic application by executing the following command:
npx create-react-app my-first-pwa-app --template cra-template-pwa
The following is a breakdown of the above command:
- npm : Each npm command must begin with npm (or, more specifically, the node package manager you have installed; nonetheless, 'npx' is used here and is included with npm version 5.2.0). This facilitates the use of npm packages and manages numerous functionalities.
- create-react-app: This command launches the well-known Create React App tool, which assists you in creating the basic react project.
- Project Title: This is simply the application's placeholder title. You can give the name to the app whatever want. Here, the standard "my-first-pwa-app" name is utilized.
- --template: This is a debate. By adding an argument to a command, you are essentially turning on an option. You can choose a particular template for our beginning React application here.
- cra-template-pwa: The PWA template for your PWA react application is called cra-template-pwa.
After executing this command, your PWA React application should begin to develop. Your command-line interface must offer a constant stream of prompts.
Figure 1 Folder Structure
The folder structure of your program up to this point is shown here. When it comes to PWAs, there are a few files you should be aware of:
service-worker.js:
A service worker is a special type of web worker that intercepts network requests from a web app and controls how these requests are handled. In particular, the service worker can manage the caching of resources and retrieval of these resources from the cache, thereby supporting the offline-first mode that’s crucial for PWAs.
Service workers provide essential support for running a progressive web application. A service worker takes the form of a JavaScript file that runs in a separate, non-blocking thread from the main browser thread.
manifest.json:
In essence, this is a configuration file that lists several customizable properties for progressive web apps. When the application is presented, it can choose the icons, names, and colors to be used.
{
"short_name": "React PWA",
"name": "A React Todo PWA",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#F4BD42",
"background_color": "#2B2929",
}
The functionality of these attributes in the manifest are:
- The attributes "short_name" and "name" are used within the users’ home screens and icon banners respectively.
- The "icons" is an array containing the set of icons used on home or splash screens.
- The "start_url" is the page displayed on startup. In this case the home page.
- The "display" property will be responsible for the browser view. When standalone, the app hides the address bar and runs in a new window like a native app.
- Property "theme_color" is the color of the toolbar in the app.
- Property "background_color" is the color of the splash screen.
We will link the manifest file to the index.html as