This article was originally published on Codica Blog.

Steve Jobs came up with the first idea of progressive web applications back in 2007. He saw them as the model for iPhone Apps. However, at that time, the tech community did not show much interest in web apps.

In 2015, the topic of progressive web applications (or PWAs for short) was brought up again. Such tech giants as Google and Microsoft started promoting this innovative technology. Soon Twitter, AliExpress, Starbucks, and Flipkart followed their lead. With the help of PWAs, famous brands could boost their online presence.

At Codica, we have been engaged in PWA development for several years. Our vast experience in this field allowed us to create a comprehensive guide you will find below. It will show you how to create a progressive web application with React.

What does the term Progressive Web Apps mean?

In a nutshell, a PWA is a web application that takes the best from native and web apps.

On one side, it offers an offline mode, access to geolocation, push notifications, and adding to the home screen. Earlier, we could see these options only in native apps. On the other side, PWAs function like any regular websites.

A significant benefit of PWA technology is a huge ecosystem of tools and frameworks for web development. Besides, now you will have only one cross-platform application. As a result, its deployment and maintenance are getting much easier and faster.

Below you can see a PWA for both mobile and desktop devices built by Pinterest:

To learn more about how PWAs are different from mobile apps, read our article PWAs vs Native Apps.

How to install a progressive web app, you may wonder. Well, the procedure looks the following way:

If you are a smartphone owner, you need to find an ‘Add to Home screen’ button (check notifications provided by the website or the browser settings).

If you use a desktop, proceed to the address bar and click on the install button on the right.

Foundations of PWA development

So what makes progressive web applications so powerful? To answer this question, let’s take a closer look at the technologies that lie at their core. These are as follows:

Service workers

The service worker is code processed by your browser in the background to ensure work in the offline mode for web applications. This component is responsible for caching and using the cached files, thus offering a seamless user experience.

Web manifests

Web app manifest is basically a JSON file defining how your progressive web application will look like. You can specify the app description, icon version, theme color, and launch style with its help.

Application shell

This key element of PWAs makes fast performance possible. Besides, it is vital for progressive web apps with dynamic content and fixed navigation.

5 advantages that make React perfect for PWA development

React is known as an open-source library for JavaScript. Jordan Walke from Facebook created it in 2013 with the purpose of building user faces in a simple, fast, and scalable way.

With the help of React, large and extensive web applications that support hot reloading can be built. This feature becomes vitally important when you need to tweak the UI functionality.

Currently, the library is maintained by the Facebook team and is implemented in their products, for example, Instagram.

Let’s discuss the key benefits of React that make it the right technology for building a PWA.

High-powered

React works well for building robust and scalable web apps. It also helps to avoid performance issues. The library uses a virtual Document Object Model to alter the UI without redrawing the whole page. Thus, rendering issues are eliminated. Also, with React, developers can make changes to the page in the virtual memory. They no longer need to use code-heavy bootstrapping libraries like JQuery instead.

Easy to learn

React is much easier to learn in comparison with such JS frameworks as Angular or Ember. The library supports JSX. This syntax extension enables coders to write HTML-like syntax in their JavaScript code. However, it is not obligatory. Developers can use plain JavaScript and HTML & CSS instead.

Well-equipped

React comes with multiple developer tools and libraries. These instruments are aimed at simplifying debugging, testing, and design processes. Developers are not confined to one option. They can choose the solution that works for the specific task better. The most well-known instruments include Semantic UI React, Ant Design, and React Developer Tools.

SEO-friendly

When it comes to SEO, the first issue that comes to our mind is failures in Web Rendering Service while working with heavy web apps. Simply put, some parts of your website can not be displayed in Google search results. However, it is no longer an issue when you use virtual DOM. It ensures that the correct indexation of your content on React-powered web pages.

Community-backed

Currently, React is the fifth frequently starred open-source repository on Github. The library is famous for its strong and responsible community. It is not by chance that their slogan is: “Help us push the web forward and get involved.”

How to create a PWA with React?

We have discussed the main benefits of the React JavaScript library. The time has come to proceed to the most valuable part of our article.

Below you can see a thorough guide on PWA development. With this manual, you will be able to build your first React progressive web application.

Step 1: Build a simple React app

We will use a previously mentioned tool called Create React App (or CRA). It is a convenient environment, especially if you have not created PWAs with React before. With its help, you can use the latest JavaScript functionality with built-in Babel and webpack. It is the reason why you no longer need to worry about bundling and transpiling required for your application to be shipped to the browsers.

With CRA, you can install and bootstrap your app with the following commands that you need to run on your terminal:

npx create-react-app cra-pwa --template cra-template-pwa

Here, npx is a command-line tool for running npm packages. The command create-react-app cra-pwa creates the app called ‘cra-pwa’. After mere seconds, you get a bare-bones React app in the cra-pwa directory.

The argument --template cra-template-pwa needs to be added because since the release CRA 4, the tool doesn’t provide built-in service workers. And the mentioned argument creates an application with a service worker.

The following command will navigate you to this directory:

cd cra-pwa

The initial folder structure looks the following way:

If you need to run an app in the development mode, type this command:

npm start

You can also open http://localhost:3000 for viewing it in your browser.

Step 2: Install a Service Worker

So, CRA offers you all the tools for building a progressive web application with React. One of your primary tasks is to make a React PWA runnable offline. For this purpose, you need to configure the auto-generated service worker file or, in other words, register it.

There is the index.js in the directory of your newly created project. You need to open it and find the following code snippet:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

As you can see, the serviceWorker has not been registered yet. Your next task is to change the unregister() call to register().

Step 3: Configure the Web App Manifest

Let’s proceed to set up the web app manifest for your PWA. Its location is in the manifest.json file in the public directory. Now you have to edit the metadata responsible for the look of your app.

When created, your manifest file will look the following way:

{
 "short_name": "cra-pwa",
 "name": "cra-pwa",
 "icons": [
   {
       "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
   },
   {
       "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
   }
 ],
 "start_url": "/",
 "theme_color": "#F4BD42",
 "background_color": "#2B2929",
 "display": "standalone",
 "scope": "/"
}

Now let’s discuss the meaning of the main manifest attributes:

short_name: It defines the name of your application, which is used within the icons, similar to the users’ home screens or launchers.

name: This is the name displayed in the app stores or browsers on startup screens and prompts. In case name property is omitted, short_name is displayed.

icons: This is the set of icons (or just one icon), displayed on the users’ home screens, launchers, task switchers, splash screens, etc.

start_url: The URL of the page of your application that users can view on the startup.

display: This property answers for the browser view. The app can put away the address bar, run in the new window, go fullscreen, etc. Below there is the list of the attributes that can be used for it:

fullscreen: With this option, your app can be opened without any browser UI and occupy the full display of users’ devices.

standalone: This option allows users to run the app in the new window, just like a native app. It will also hide the browser UI components, such as an address bar.

minimal-ui: This option reminds the previous one. However, it comes with the minimal set of browser UI, including back and reload buttons.

browser: This option allows for the regular browser experience.

theme_color: This property defines the color of the toolbar in your application.

background_color: The color of the splash screen showed when users click on the app icon in their home screens.​

A splash screen is a graphical element displayed when your app is launched. It is a window with your application’s name and logo. It also uses the background color you have chosen earlier. The splash screen is generated by the Chrome browser on the basis of the specific properties in the web manifest:

• name;
• background_color;
• icons. ​ When it comes to icons, Chrome will set the icon that the screen resolution in the most automatically. As a rule, icons having the resolution of 192px and 512px will be suitable.

However, if your logo requires adapting to as many devices as possible, additional icons can be used.

Finally, to make your web manifest file work, add it to the pages of your web app. Check the example below to do this the right way:

<link rel="manifest" href="/manifest.webmanifest">

To make sure everything works fine, check the configurations on the Manifest panel. You may find it under the Application menu in Chrome DevTools. It will look the following way:

That’s all you have to know about building your progressive web application with React.

More information about adjusting your PWA, you can find in the Web App Manifest guide prepared by the World Wide Web Consortium.

Step 4: Test your app

We have discussed the process of creating a React PWA. The time has come to talk about testing your progressive web app.

If you need to run your app in the production mode, enter the following commands:

npm run build

npx server build

Your application has been built, and now you can test it. For this purpose, you can use the checklist on PWA provided by Google. In addition, you can access your PWA using Lighthouse. You can find this instrument in the namely tab of Chrome DevTools.

Follow the steps below to check performance, accessibility, and PWA compliance for your app.

Step 1. Open Chrome DevTools by choosing the ‘Inspect’ option from the right-click menu on the page that requires inspecting. Alternatively, the following keyboard shortcuts: Command + Option + C (for macOS) or Control + Shift + C (for Windows, Linux, Chrome OS) can be used.

Step 2. Proceed to the Lighthouse tab. Press the ‘Generate report’ button. When generating a Lighthouse report, make sure you have checked the ‘Progressive Web App’ box.

As soon as auditing is finished, you will receive the score together with a list of criteria. They will affect your app’s performance in different situations.

Conclusion

In this article, we have covered many exciting topics related to PWA development. We have discussed the meaning of the term “progressive web app” and defined its main components.

Now you know the key benefits of React for building your PWA project, and discussed in detail how to create your progressive web app with React. We hope that our detailed guide will come in handy.

For more information on how to create a PWA, check our article on building a PWA

If you want to see examples of implementing Progressive Web Apps, please check our article 5 Best Examples of PWA for E-commerce Marketplaces.