< Back to blog
PUBLISH DATE:
UPD:
Maryna YanulMaryna YanulJavaScript Developer

The React PWA Tutorial: How to Build and Why?

A progressive web app developed with React is a synergy of two outstanding technologies, which maximizes benefits of both

The React PWA Tutorial: How to Build and Why?

The introduction of React has shaken the world of front-end development with the application performance and development simplicity that it offered. A few years late, the PWA technology has shaken the world once again — now, web and mobile applications are losing in popularity and user experience quality to progressive web apps. 

In this article, I want to tell you more about how you can make your application stand out by making use of these two technologies. Let’s have a quick look at what is React, what is PWA, and how to develop the latter with the former.

Brief Intro to React

React is a JavaScript UI development library. It is quite simple, component-based, declarative, and universal. First introduced in May 2013, it has won the affection and love of multiple front-end developers from all over the world. Simple but powerful, it is the most popular JavaScript technology for building user interfaces. Armed with the support of a large and active developer community, React is often updated, thoroughly maintained, and learner-friendly. Most React developers love this technology due to its stability, fast performance, and simplicity.

So, the advantages of React development include the following:

  1. The framework is quick to set up, so the work on the project can be launched in the shortest terms possible.

  2. User interfaces built with React are responsive and interactive because React offers a perfect opportunity to fetch and record dynamically changing data.

  3. Due to component-based structure and reusability of these components, React greatly facilitates and accelerates the development of apps.

  4. React.js can work for almost any project, from a simple SPA to a complex web or mobile platform.

  5. This technology enjoys a strong support of a well-developed community, who maintain up-to-date documentation and are ready to offer a helping hand to aspiring developers.

  6. React can be easily integrated with other frameworks or libraries, which facilitates development and makes it a great choice for both new and ongoing projects.

Such apps as Airbnb, Dropbox, Facebook, and Netflix have been built with React JS.

Apps built with React

Quick Look at PWA

PWA stands for a progressive web app, and it is the technology that brings web and mobile development to a new level. It is designed to bring the best user experience for the mobile users of web apps and platforms. The PWA technology allows the user to open a native-like app via a browser, to install it instantly, to make use of most native-like functions, and to use the app offline. The goal of a progressive web app developer is to make a website resemble an app installed on one’s smartphone, tablet, laptop, or PC.

The PWA technology offers six essential benefits:

  1. A progressive web app loads faster than an ordinary website and is faster to install and start using than a mobile app. All static website assets are cached, so the page loads faster with each subsequent visit. 

  2. Progressive web apps are much simpler to develop and use than other web or native solutions. For instance, since they can be installed from the browser, there is no need to submit them to the App Store or Google Play.

  3. PWAs are universal — they are compatible with all devices on all operating systems if accessed through a standards-compliant browser.

  4. If the network connection is unstable or absent, PWAs use cached data from previous sessions to ensure perfect and uninterrupted performance. The users will be able to access your app from basically anywhere.

  5. Progressive web apps provide an excellent user experience due to their simplicity and speed, combined with all the necessary features of native solutions. Similarly to a native mobile app, a user can open the PWA by clicking the icon on the home screen. Moreover, unlike in native apps, updates are downloaded in the background.

  6. While PWAs have no direct impact on SEO results, a properly developed PWA has the potential to decrease the bounce rate and to improve retention rates and the overall SEO performance of your web page.

The examples of PWA apps are Twitter, Pinterest, The Weather Channel, and Alibaba.

Apps built with PWA

Are you not a hundred percent sure that you need PWA?

PWA is not a panacea and not a one-size-fits-all solution. Sometimes, you should go with mobile development. To understand which one to choose, PWA or mobile, have a look at my article titled “Four Questions to Understand If You Need PWA”


The Guide on React PWA Development

Finally, here goes the section where I will tell you about how to build a progressive web app. Building a progressive web app is easier than you might expect, and you can do it with basically any JavaScript framework. So, why would you choose React for that? Precisely for the same reason why you would choose it to develop any other kind of app — it is fast, performant, simple to work with, and VERY popular among developers.

Step 1: Add a progressive web app manifest 

Let’s start with what a web app manifest is. It is a JSON file, which tells the browser about your PWA and its expected behavior when installed on the user's desktop or mobile device. A web app manifest file should contain the name of the app, the icon to appear on the home screen, and the link that should be opened with the application launch. Such browsers as Google Chrome, Microsoft Edge, Firefox, Opera, and the Samsung browser support manifests, whereas Safari offers only partial support.

{
  "short_name": "KeenEthics",
  "name": "KeenEthics",
  "description": "Be Keen. Follow Ethics",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#12233d",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#12233d",
}

After you have created the manifest, add it to your app. To do so, add a <link> tag to every page of your PWA. For instance:

<linkrel=”manifest” href=/manifest.webmanifest” >

To learn more about PWA manifests, read through the official W3C documentation.

KeenEthics PWA manifest

Step 2: Add service workers  

The service worker is a JavaScript file, which runs separately from the main browser thread, intercepts network requests, caches data, retrieves data from the cache, and delivers push messages. Service workers let PWAs control network requests, cache these requests to boost performance, and ensure access to the cached content offline. Also, they can get push messages from a server even if the app is not open, and thus, they can send push notifications to the user similarly to what a native app can do.

To ensure offline app performance, service workers depend on two APIs: Fetch and Cache. Fetch API is used to intercept network requests and modify the response, as well as to serve resources from the cache when the network connection is absent. Cache API is independent of the browser cache.

Service workers scheme

A few more technical nuances associated with service workers:

  • To avoid “man-in-the-middle” attacks, service workers run only over HTTPS. 

  • A service worker cannot access DOM directly, so it uses postMessage() to communicate with the page.

  • Service workers cannot use synchronous XHR and localStorage.

More about how to register, install, and activate service workers, you can read at Google Developers.

Step 3: Test your PWA

After you set up everything, it is time to check if your application adheres to the standards of PWA. There is an official tool for that provided by Google, called Lighthouse. What you need to do is to download a Google Chrome extension and launch screening on your website. If the result is 100 percent — congratulations! Your app is fast and optimized as a PWA. If it is under 100 percent, the service will show you what is the problem and what can you do to improve the performance. 

Retrieved from https://developers.google.com/web/tools/lighthouse/
Retrieved from https://developers.google.com/web/tools/lighthouse/

Final Remarks

Simple as it is, PWA development becomes easier and faster with React. Performant as they are, React apps become even more powerful and effective with the help of PWA technology. A progressive web app developed with React is a synergy of two outstanding technologies, which maximizes the benefits of both.

The process of React progressive web app development consists of the following steps:

  1. Adding a PWA manifest

  2. Adding service workers, deciding on what should be cached and at which point

  3. Testing your PWA with Lighthouse

These 3 steps will bring you a mile closer to business success.

Do you need help with a React PWA?

Our specialists are here to help! Learn more about React.js development services and PWA development services that we offer or contact us!