Progressive web applications or PWA are some of the most famous web apps that are being created and used today. This is something that is in-demand and can help people open more opportunities. One of the most prominent developers of PWA is ReactJS. But why do people create a Progressive web app with react? Well, we will be answering this question in this blog.
In addition to this, we shall be looking at a lot of other things including the definition of PWA, the benefits of Creating it in React, and the steps to create it. With this being said, let’s get started:
Creating Progressive Web App: All You Need to Know
We will be discussing how to Create react app progressive web app. But before we get into technical stuff let’s see what does PWA actual mean:
Progressive Web App: Definition
PWA stands for a progressive web app. These web apps are a kind of web application that has properties of both a web application and a native one. Thus, it provides many benefits like offline use, lighting fast response time, less to no load time, and much more. In order to make this possible, it makes use of several different techs like service worker, manifest, etc.
Making a Progressive Web App provides many benefits as they are lighting fast, take up less storage and offer a number of advantages to users. For instance, they can be installed like a native app, have a responsive design, are re-engageable as well as linkable, and can be reached through a browser. Let’s see why you should create a progressive web application in react in the next section.
Why Create a Progressive Web App with React?
- PWA has Good Support
When it comes to Developer Tools, boilerplates, and libraries React is well-equipped. This makes it a lot easier to debug, test, and design. Moreover, it offers a range of options. Thus, it is easier to find the ones that fit your needs.
Some of the most popular examples of these tools are, React Developer Tools, Create React App, Semantic UI React, and Ant Design.
- Simple and Easy To learn
When you compare the ReactJS to its siblings like Angular or Ember, this framework is the easiest to learn. This is quite handy if you are a beginner who wants to learn, how to create a progressive web app with ReactJS.
- It is SEO-friendly
Well, SEO is an important part of marketing an application, and as things stand Search Engine Optimization doesn’t go well with web rendering services in the case of the heavy web application. This combination often results in failure.
This means that some parts of the websites won’t appear on Google search results at all. However, thanks to the virtual DOM in React Progressive Web Apps, the WebPages are indexed properly.
Basics of Making A Progressive Web App in React
While it is true that you can hire a Progressive web app developer for this, having some basic knowledge can be fruitful in many ways. Therefore, before getting the steps of Progressive web app development in react, let’s look at some of the basics. This will allow a better understanding of the much more advanced concepts and step which will appear later in the blog.
Just like any other development process, there are different web technologies used in progressive web app development. The ones which we will be using are, as mentioned below:
- service worker
- web manifests
Let’s look at each of these in detail, turn by turn:
HTTPS stands for Hypertext Transfer Protocol Secure. It is an extension of HTTP (hypertext transfer protocol). This web technology is used to secure communication between a network of systems. This is widely used across the internet and has been an essential part of web applications over the years.
A service worker is a code that provides the technical foundation for a progressive web app. It is the same code that is processed by the browser to avail the app in offline mode. This processing is done in the background. The service Worker is responsible for handling and interpreting the network requests. As such, it acts as an intermediary between device and network.
Web manifest is another one of the essential components of the progressive web app. Web manifest allows the progressive web application to be installed as a separate native-like app on the home screen of the user. Here, it can be then used offline with help of a service worker.
How to Create a Progressive Web App with React?
Now, we have looked at the definition of Progressive Web apps and the advantage of creating a PWA in React. It is time to learn how to create react app progressive web app. In this section of the blog, we shall be looking at the entire process of making a PWA using the ReactJS library.
We will look at each step turn by turn and explain the stuff as well as the technical stuff. With this tutorial, you will have enough knowledge to create a progressive web app on your own. With this being said, let’s get right into the first step. That is setting up the application:
Step 1: Building a Basic React App
So, the first step of creating a Progressive web app using react is setting up a simple react app. For this, we will be using a tool that is known as “CREATE REACT APP” or CRA. This tool provides a very convenient environment for those who are not well versed with PWA development in ReactJS and are thus, being used here.
Now, using CRA, we will be installing PWA while also bootstrapping it at the same time. This is done by the command mentioned below:
npx is a command-line tool that runs the npm package. And the command “create-react-app cra-pwa” helps create the name of PWA, seen above as “cra-pwa”. With this, you will have a basic React progressive web application. This app will be available in the cra-pwa directory.
Another command seen above as “–template cra-template-pwa ”, is used to integrate service workers in the app. The reason is that there is no built-in feature to do that for CRA 4 and later versions.
The following command can be used to navigate the directory:
After this, the folder structure will look like the picture seen below:
Now, you have to run the app we created in the development mode. This can be done through the following command.
Following this, you can now open the http://localhost:3000 which will launch the app in the browser. This was the first step to build a Progressive Web App, now let’s move to the second one.
Step 2: Registering Service Worker
The second step is registering the service worker. CRA tools provide enough features for handling and creating Progressive Web applications in React. But there is a question that remains, How do you make a react progressive application that is runnable in offline mode?
The answer is, you will need to configure a service worker file to do that. As you already know, the recently made project directory is contained in a file named index.js. now, you have to open the same and then enter the following code:
In this command, the service worker is not registered as we can see. Now, we have to change the unregister() to register(). While it is as simple as it is, this is still an important step when you want to build a progressive web app with react.
Now, that we are done with this, let’s move to the third step of creating a progressive web application using ReactJS.
Step 3: Web Application Manifest Configuration
The third step mainly deals with setting up the web app manifest for the concerned progressive web app which is located in the manifest.json file, it can be found in a public directory. You will also need to change the metadata which is responsible for the appearance of the application.
When this is done, the manifest file should look something like this:
As you can see, there are a lot of new attributes in this code. Let’s see what they stand for:
- short_name: The name of the Progressive web app is known as “Short_name”. It is displayed along with Icon on Homescreen as well as a launcher.
- name: the name that is displayed on the app store and browser is known as “name”. if the name is not present in the code, short_name is used instead.
- icons: icons may refer to a single icon or a group of icons. It is displayed on the home screen, task switchers, splash screens, etc.
- start_url: as the name suggests, the URL of the app seen during Startup is known as “Start_url”
- display: This property deals with PWA’s browser view. Some attributes of the same are mentioned below:
- fullscreen: These attributes let the app open without browser UI, covering the entire display of the user.
- standalone: Standalone attribute opens the PWA in a new window just like a native application. Again, it hides browser UI.
- minimal-UI: This attribute shows just a minimal set of Browser’s UI. For instance back and reload button.
- browser: here, the PWA is opened in the browser.
- theme_color: Theme colors refers to the toolbar’s color within the application.
- background_color: splash screen color that is seen when the user clicks on the app icon on the home screen is known as the background color.
All of the graphical elements that appear when PWA is launched are known as splash screens. It covers all the data concerning the app’s logo and name. The background color used here is the same as defined by the developer.
In the case of chrome browser-generated splash screen, it is based on web manifests’ three different properties. These three are namely:
Moving on, the icons while making a progressive web app are chosen by chrome itself based on the device resolution.This is usually around 192px and512px. Now, let’s see how you can make your web manifest file functional. You will need to add the same to the page of the web app. This is how to do it:
<link rel=”manifest” href=”/manifest.json”>
You can check whether or not the configuration is working as it is supposed to on the manifest panel which is available in the application menu of Chrome DevTools. This is all about the third step, lets move on to the fourth one which concerns with testing of the web app.
Step 4: Testing Progressive Web Application
If you want to Make a Progressive Web App that is successful testing is an important part of it. So, you also have to check whether it is working right before launching it in the market. And this is the step where we do it.
When you want to run the application in the production mode, you have to write the following command:
After creating the progressive web application, you can test the same here. Google has made a Checklist on PWA and you can assess the safe your app through Lighthouse. The same tool is also available in Chrome DevTools.
How to Test Progressive web app made using react in Lighthouse?
- Open Chrome DevTools through “inspect” option in the menu. (you can also use a shortcut = Control + Shift + C in windows and Command + Option + C in macOS)
- Open the Lighthouse tab
- Click on the button labeled as “generate report”
- Make sure that you have checked the box that says “Progressive web app”
- Lighthouse will deliver the report. It will look something like this:
So, this is everything you need to know about creating Progressive Web App in React. This is a blog, we discussed each and everything related to PWA development in React. Even if you are a beginner you can follow the steps mentioned here to create a progressive web app.
If you are looking for developers to create a Progressive web app with react, it is recommended that you consult a professional PWA developer.