Progressive Web Apps in React

Making your React app a PWA

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already.

In the index.ts for your app, there is a call to a serviceWorker.unregister() function. The base CRA provides has service workers as an opt-in feature, so it must be enabled. To enabled, call serviceWorker.register().

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// 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();
serviceWorker.register();

Once this package has been added run ionic build and the build directory will be ready to deploy as a PWA.

note

By default, react apps package comes with the Ionic logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.

note

Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.

Service Worker configuration

By default, CRA/React Scripts come with a preconfigured Service Worker setup based on Workbox's Webpack plugin. This utilises a cache-first strategy, meaning that your app will load from a cache, even if the network returns a newer version of the app.

Because of the nature or CRA/React Scripts, the configuration for this is internal to React Scripts, meaning that is cannot be customized without ejecting from React Scripts. Currently, the Ionic CLI does not support an ejected React App, so if this action is taken, you'll need to use npm/yarn scripts instead of the Ionic CLI.

Deploying

Firebase

Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for HTTP2 push.

First, if not already available, create the project in Firebase.

Next, in a Terminal, install the Firebase CLI:

npm install -g firebase-tools

With the Firebase CLI installed, run firebase init within your Ionic project. The CLI prompts:

"Which Firebase CLI features do you want to set up for this folder?" Choose "Hosting: Configure and deploy Firebase Hosting sites."

"Select a default Firebase project for this directory:" Choose the project you created on the Firebase website.

"What do you want to use as your public directory?" Enter "build".

note

Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:

Configure as a single-page app (rewrite all urls to /index.html)?" Enter "Yes".

"File build/index.html already exists. Overwrite?" Enter "No".

A firebase.json config file is generated, configuring the app for deployment.

The last thing needed is to make sure caching headers are being set correctly. To do this, add a headers snippet to the firebase.json file. The complete firebase.json looks like:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      }
    ]
  }
}

For more information about the firebase.json properties, see the Firebase documentation.

Next, build an optimized version of the app by running:

ionic build --prod

Last, deploy the app by running:

firebase deploy

After this completes, the app will be live.