React PWA tutorial: How to Create progressive web app with React?

You’ve definitely heard of the PWA if you revolve in the tech circles. Progressive Web Applications has been the center of IT attention since Google introduced the term at the Chrome Dev Summit in 2015. Some say that PWA is an empowering industry-changing force. Some predict that Progressive Web Applications will soon replace native apps. So, why is everyone talking about PWA?

This article will help you catch up with the world and figure out the deal with the PWA. Most importantly, we will guide you through the PWA development process. For these purposes, Halo Lab experts developed this comprehensive React PWA tutorial.

We will take your hand and, in no time, brief you on all the basics you need to know about React PWA. So, do not worry: If you are not familiar with PWA, we are fixing this ASAP.

Let’s begin our PWA 101 course with a definition. Progressive Web Application aims to transfer some of the functionality of mobile applications to web applications. PWAs offer unique functionality (like cross-browser compatibility and offline accessibility) without writing a separate application for different devices.

Firstly touched upon in prehistoric 2007 by Steve Jobs and now actively pushed by Google, PWA has a great potential to generate leads, reduce data consumption, and increase engagement.

Numbers back up PWA success. The relatively new technology has 36% higher conversion rates than native apps. Adoption of PWA correlates with a more than half rise in website visits.

You may ask: ok, if PWA poses some threat to the Native apps, how is it different from Native? PWA is a JavaScript web application with limited functionality, while a native one has full access to the OS features. There is no point in creating competition between these two. Plenty of more complicated websites can only work through Native apps.

So, which products does PWA fit best? Let’s stay critical: PWAs have limited functionality. Nevertheless, they can do wonders for simple applications. Overall, PWA works best with simple applications. It’s predominantly used for e-commerce, media websites, and geolocation apps.

You know what? There is nothing more helpful than a real-life example to grasp the concept fully. Let’s take a look at how these world-famous companies gained their superpower with the help of PWA.

PWA Examples

Nothing compliments PWA better than the proven success of the tech giants like Twitter, Alibaba, Tinder, Uber, Instagram, and Aliexpress. This list can go on and on. These companies are early adopters of the PWA who demonstrated its beauty to the world.

Tinder
Tinder created its PWA version — Tinder Online — in 2017. It is fascinating that the mobile version attracts a wider audience: love-seeking users swipe and message more on the web than native.

Instagram
Facebook-owned social media’s PWA is probably one of the most similar to the company’s native app. Instagram is also a fascinating example because developers recently reprogramed its web option. According to The New Stack, it’s no longer a PWA but a native app built with yet not widely known Blocks technology.

Uber
For Uber, PWA solved the issue of the low Internet connectivity and devices that may not be compatible with the Uber app. Now, a light version of the service is accessible for everyone. It makes life easier for both sides: a hungry customer and a hard-working delivery rider.

Pros and Cons of PWA

We touched upon the limitations of PWA. Now, let’s conduct a thorough analysis of the benefits and drawbacks of the React progressive web app.

Pros:

• Fast connection. The goal is to provide high connectivity using the lowest amount of memory and mobile data possible.
• Easy access. One can devote a whole marketing strategy to make the user download an app. You can simply open PWA through any browser without a dull trip to the app store.
• Complete availability. PWA is accessible in all browsers on any possible device: smartphone, laptop, or tablet.
• Offline usage. Some pages can still be accessed even offline, which improves user satisfaction.
• Reduced developers’ work. Compared with a native app, developers can create only one app instead of two with PWA.

Cons:

• Limited functions. As mentioned above, PWA functions work only for simple apps.
• Lack of Apple support. Apple doesn’t fully support PWA.
• Potential losing competition. PWA products can be overshadowed by sophisticated native apps in the competitive market.

What Framework is Best for Progressive Web Application?

Depending on the key PWA capabilities, you should choose one of the several JavaScript frameworks.

Let’s compare the most popular frameworks without further ado and pick your personal winner. We will analyze React.js and Angular.js. Let the battle begin!

React.js

For almost ten years, React.js has proudly been one of the most popular JavaScript frameworks. What makes it so special?

• Programmers can easily apply the same code for other apps;
• Next.js and Gatsby.js allow more functionality, like server-side and client-side rendered pages, routing, etc.;
• Rendering is quicker.

Angular.js

Angular.js is a younger sister of React.js (the version supporting PWA was launched seven years ago). This Google-owned framework uses HTML language. What are the benefits of Angular.js?

• JSON allows you to speed up the process: there is no need to write PWA from zero.
• Angular.js is one of the most versatile frameworks: its functionality is so rich that working with it requires an advanced coding experience.
• The framework is backed-up by Google and has a vast developing community.

Perhaps, choosing an all-time ‘winner’ for the PWA framework wasn’t the best way to approach this comparison. As you see, each framework is suitable for different purposes and developers’ preferences. It’s also worth noting there are other possible options like Vue.js and Svelte.js.

The PWA Components

Now, we are getting closer to answering the question: how to make a PWA with React? Before beginning our ReactJS PWA tutorial, let’s take the last theoretical step: PWA components.

1. Service workers

Service workers are relatively independent and fairly influential elements of your PWA. They act as a delegate between the browser and the network. All in all, one can think of a service worker as a blueprint for an architectural project. You create a detailed foundation that will be necessary for deploying your project.

Simply put, service workers manage your PWA in the background, overlooking all the features that don’t require user interaction.

2. Web manifests

Web manifest is a JSON file that sets the parameters of how your PWA should look. You need it to set up the application name, main colors, icons, etc. To better understand what and how you can configure there, look for the “Generate the Manifest with Your App’s Details” section below, where we explain it with an example.

Here are several examples of the keys for the progressive web apps react manifests:

• name
• icons
• shortcuts
• background_color
• categories

3. Application shell

Application shell ensures that the content loads quickly and uses as little data as possible. It maintains the PWA basics, like the interface, even when there is no connection. Overall, the app shell is your interface’s blueprint.

How to create PWA App with React

Let’s learn how to create React app PWA!

To create a PWA application in a few simple steps, we’ll use the Next.js framework and next-pwa plugin. Just follow the lead!

1. Create an empty Next.js app

First, open your terminal and ensure you have your Node.js installed to check the run:

node -v

You should get something like this:

v16.13.1

If it looks so, everything’s fine. You’re looking at your Node.js version.

You may also get the following notification:

node: command not found

Then, you need to install Node.js before running your Next.js PWA app. Refer to this doc to find a suitable way to install Node.js.

The next step is to bootstrap your Next.js PWA application. You can do it by running

npx create-next-app pwa-app

Next, move to your folder and install the next-pwa plugin:

cd pwa-app 
npm i next-pwa

2. Generate the Manifest with Your App’s Details

As mentioned above, the manifest is a configuration file for your PWA application. You can either create it manually or use a generator. The filename should be manifest.webmanifest.

To let the users have a proper app-like experience, provide them with application icons. If your icon is already designed, just drop the 512x512 version in a tool and download a zip file with all required sizes generated. You need different icon sizes to support devices with different screens.

Also, you will need maskable icons that allow web developers to specify a full-bleed icon that the user-agent will crop to match other icons on the device. It enables Android developers to get rid of the default white background around their icons and use the entire provided space by generating adaptive icons.

Now, tweak the config to support the latest standards. The icons configuration should contain purpose property, and the value of that purpose property should be either maskable or any maskable.

Maskable icons use a new specific key, "purpose," to indicate that they should be used with icon masks. Icons with transparent backgrounds have a default "purpose" of "any", you can use them for multiple purposes by separating each option with a space.

To create such an icon, use Maskable.app Editor, download it and put it in the public folder.

You should add the information about a maskable icon manually. Your valid manifest.webmanifest file is supposed to look as follows:

{
	"theme_color": "#000000",
	"background_color": "#ffffff",
	"display": "standalone",
	"scope": "/",
	"start_url": "/",
	"name": "Hello Halo lab",
	"short_name": "Hello Halo",
	"description": "My demo PWA application",
	"icons": [
		{
			"src": "/maskable-icon.png",
			"sizes": "196x196",
			"type": "image/png",
			"purpose": "any maskable"
		},
		{
			"src": "/icon-192x192.png",
			"sizes": "192x192",
			"type": "image/png"
		},
		{
			"src": "/icon-256x256.png",
			"sizes": "256x256",
			"type": "image/png"
		},
		{
			"src": "/icon-384x384.png",
			"sizes": "384x384",
			"type": "image/png"
		},
		{
			"src": "/icon-512x512.png",
			"sizes": "512x512",
			"type": "image/png"
		}
	]
}

Finally, copy your icons and manifest.webmanifest file to the public/ directory in your project folder.

Here’s how it should look:

3. Add meta tags to the _document.js

document.js is the file you can use to modify <!-- fs-richtext-ignore --><html>, <head> or some wrappers in <body> tags on all of your app’s pages. Here, you need to link your manifest file and icon for apple devices, as well as the main theme color.

Here is what its content will look like:

import Document, { Html, Head, Main, NextScript } from "next/document";

class PWADocument extends Document {
  render() {
    return (
      < Html lang=”en”>
        < Head>
          < link rel="manifest" href="/manifest.webmanifest" />
          < link rel="apple-touch-icon" href="/icon-192x192.png" />
          < meta name="theme-color" content="#fff" />
        < /Head>
        < body>
          < Main />
          < NextScript />
        < /body>
      < /Html>
    );
  }
}

export default PWADocument;

4. Init next-pwa plugin in the next.config.js

Now, let’s enable your next-pwa plugin and give it proper configuration in next.config.js file:

const withPWA = require('next-pwa');

module.exports = withPWA({
	pwa: {
		dest: 'public',
		register: true,
		skipWaiting: true,
	},
});

Offline Fallback Page

Also, you can add a page to show that a user is offline. It enhances user experience and makes it work like an actual app.

Just add a page named _offline.js in your pages folder, and next-pwa will automatically show that page if the user is offline. However, it works only if the user visits the website. Thus, the offline page is cached whenever the user first visits the website.

And voila! You’re finally running npm run build and npm start! Now, you can open your app on your mobile phone and see a small install icon. Go ahead and install your PWA! Once installed, the app will be added to your device’s app drawer with the icon you’ve selected in the manifest.webmanifest file.

Now you can access the application directly by clicking on the app icon.

The technical part is finished. But how can you be sure that all Progressive Web App features are in order? The easiest way is turning to the Lighthouse. It’s an open-source tool from Google that helps audit web apps and PWA features. The Lighthouse provides a set of metrics to guide you when building a PWA.

This tool tests your PWA app and answers the following questions:

• Can it load in offline or flaky network conditions?
• Is it relatively fast?
• Is it served from a secure origin?
• Does it use certain accessibility best practices?

The easiest way to run the Lighthouse is to open the devtools panel, select the Lighthouse tab, and press the Generate report button. The Lighthouse will generate the page with the verification results. After that, your PWA test is passed.

Congratulations! You’ve successfully completed the process, and now your Next.js app can be used offline, is installable as an app, and is also a PWA.

Feel free to use our demo repository as a reference! Hopefully, it will be helpful.

Create a PWA Web App with Ease

Well, this is the end of our PWA crash course. We covered all the basics and coherently answered how to make progressive web app React. Are you ready to make your own PWA?

If you still don’t feel confident enough, we are here for you. Halo Lab has been providing refined React.js expertise for more than eight years. We understand the market, and our team is an assembly of the most experienced and versatile developers, and, most importantly, we put customers’ needs first.

Contact us, and let’s create tech wonders together!