Skip to main content

Introduction to Progressive Web Apps with React

In this tutorial, we will explore the fundamentals of Progressive Web Apps (PWAs) and learn how to build one with React to provide an enhanced user experience.

What is a Progressive Web App?​

A Progressive Web App (PWA) is a web application that uses modern web technologies to deliver an app-like experience to users. PWAs work in any browser, can be installed on the user's device, and provide features such as offline access, push notifications, and fast load times.

Advantages of PWAs​

  1. Responsive: PWAs adapt to various screen sizes and devices, providing a consistent user experience across platforms.

  2. Offline access: PWAs can work offline, allowing users to access content even when they don't have an internet connection.

  3. Installable: Users can install PWAs on their devices, making them easily accessible like native apps.

  4. Discoverable: PWAs can be indexed by search engines, making it easier for users to find your app.

  5. Fast: PWAs load quickly, improving the overall user experience.

Building a PWA with React​

To build a PWA with React, you need to follow these steps:

  1. Create a React app: Use create-react-app to set up a new React project:
npx create-react-app my-pwa
  1. Add a manifest file: Create a manifest.json file in the public directory of your project. This file contains information about your app, such as its name, icons, and display settings.
{
  "name": "My PWA",
  "short_name": "PWA",
  "description": "A sample Progressive Web App built with React",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  1. Reference the manifest file: Add a reference to the manifest.json file in your public/index.html file:
HTML
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  1. Register a service worker: A service worker is a JavaScript file that runs in the background, allowing your PWA to work offline and handle background tasks like caching and push notifications. In a new React app created using create-react-app, a service worker is provided by default. To enable it, open src/index.js and replace serviceWorker.unregister() with serviceWorker.register(). Now your React app is a PWA! Test it out by running npm start and installing it on your device.

  2. Cache assets for offline access: In the service worker file generated by create-react-app, you will find a section for caching assets. You can modify this section to include the assets you want to cache for offline use. Make sure to update the CACHE_NAME variable when you make changes to your assets, so the service worker knows to update the cache.

JavaScript
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = ['/', '/static/js/bundle.js', '/static/css/main.css', '/icon-192x192.png', '/icon-512x512.png'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});
  1. Handle fetch events: To serve cached assets when offline, you need to add a fetch event listener to your service worker. This event listener intercepts network requests and tries to return a cached response if available; otherwise, it falls back to making a network request.
JavaScript
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});
  1. Update the service worker: To ensure your users always have the latest version of your PWA, you should add logic to update the service worker when a new version is available. You can do this by listening for the activate event and deleting old caches.
JavaScript
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Conclusion​

Now your React PWA has offline support! When users visit your app, the service worker will cache the specified assets, making them available even when there's no internet connection.

With these steps, you have created a simple Progressive Web App using React. By following best practices and using modern web technologies, you can provide an enhanced user experience and ensure your app is fast, reliable, and engaging.