Unlock the Power of Progressive Web Apps

Imagine building an app that seamlessly serves all devices and form factors, using web technologies. This app can be accessed over the web, and also surfaces on the home screen of Android and iOS devices. It works offline, displays a splash screen when launched, and sends notifications – all while saving your business money.

The Cost-Effective Alternative

Building separate apps for web, Android, and iOS can lead to a multiplication of cost and complexity. It often results in dividing your team and losing focus. Progressive Web Apps (PWAs) offer a compelling alternative, not just from a developer’s standpoint, but also from a resourcing perspective.

The Catch: Complexity

While PWAs are more complicated than normal web apps, there are easy onramps to building one. In this article, we’ll highlight one of these: how to create a PWA using React and TypeScript.

From Zero to Hero: Building a PWA with Create React App

We’ll use Create React App to build our PWA. This excellent project has matured to provide satisfactory support for making PWAs. We’ll create a new PWA with TypeScript support using Create React App, and then customize it to fit our needs.

npx create-react-app my-pwa --template typescript

From Web App to PWA using Workbox

Going from a web app to a PWA is incredibly simple – it’s just a matter of opting in to offline behavior. We’ll use Workbox, a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build PWAs.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      {
        cacheDidUpdate: async ({ cache, request }) => {
          // Cache images for 30 days
          await cache.add(request);
        },
      },
    ],
  }),
);

Customizing Your PWA with React

We’ll customize our PWA by giving it a name, icon, and splash screen. We’ll also explore how to control how our app behaves using the web app manifest.

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "theme_color": "#4a90e2",
  "background_color": "#f7f7f7",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Creating Multiple URLs in Your PWA

We’ll break up our application into multiple pages using react-router, the de facto routing solution for React.

import { BrowserRouter, Route, Switch } from 'eact-router-dom';

function App() {
  return (
    
      
        
        
      
    
  );
}

Code-Splitting Your PWA

We’ll split our code into smaller files to improve loading times for our PWA. Create React App supports code splitting by default, and we’ll apply it to our app.

import React, { Suspense, lazy } from 'eact';

const HomePage = lazy(() => import('./HomePage'));
const AboutPage = lazy(() => import('./AboutPage'));

function App() {
  return (
    
      
        
        
      
    
  );
}

Deploying Your PWA

Finally, we’ll deploy our PWA using Netlify, and see how it holds up according to the professionals using the Google Chrome DevTools Audit.

netlify deploy --prod

The Future of Frontend Development

Converting your new or existing React applications to PWAs has numerous benefits, especially considering that the future of frontend development is anchored on web optimization. This approach will help you build a performant web application from the start.

By following these steps, you can unlock the power of Progressive Web Apps and take your app to the next level.