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.
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
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
Once this package has been added run
ionic build and the
build directory will be ready to deploy as a PWA.
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.
Service Worker configuration
By default, CRA/React Scripts come with a preconfigured Service Worker setup based on Workbox's Webpack plugin. This utilizes 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.
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".
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".
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:
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"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:
After this completes, the app will be live.