What are Progressive Web Apps (PWAs)?
Reliable — Service workers (client-side proxies that pre-cache key resources) enable PWAs to load instantly and provide an instant, reliable experience for users, regardless of the network state.
Fast — 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast.
Engaging — PWAs are installable and can live on users’ home screens without the need for an app store. You can specify home screen icons and the page to load when the app is launched.
In this guide, you will:
- Set up a simple React app
- Learn how to use the Audits tab in Chrome Dev Tools to run audits for your React app against Google’s PWA Checklist.
- Register a Service Worker
- Apply the the principle of progressive enhancement to your React app
- Add a splash icon
- Deploy your React PWA
Step 1: Set Up a Simple React App
Create a new “Task Manager” React app with create-react-app, which will create a new boilerplate React app for you!
To do this, run the following commands:
npm install -g create-react-app
create-react-app pwa-task-managerNext, install react-router-dom, which will allow you to navigate between components in your React app.
cd pwa-task-manager
npm install --save react-router-domTo create a simple page with navigation, replace the code in src/App.js with the following:
To update the default styles, replace the code in src/App.css with the following:
You just set up a simple React app with two routes! To test your app in the browser, run the following command:
npm-startYour React app should look like this:
Let’s start converting it into a PWA!
Step 2: Use the Audits Tab in Chrome Dev Tools
In this step, we’ll use the Audits tab to run audits for your React app against Google’s PWA Checklist. The Audits tab allows you to check how your app is doing in certain against Google’s set audits for things like performance, accessibility, progressive web apps, etc.
Open up Chrome Dev Tools in your browser and toggle to the Audits tab. Check the “Progressive Web App” box next to Audits.
Once you click “Run audits”, an automated report is generated through Lighthouse (an an open-source, automated tool for improving the quality of web pages).
The generated report should look like this:
Let’s fix those failed audits!
Step 3: Register a Service Worker
What is a service worker?
Service workers (client-side proxies that pre-cache key resources) enable PWAs to load instantly and provide an instant, reliable experience for users, regardless of the network state.
Create a new worker.js file in the public folder (public/worker.js) and add the following code:
Update your index.html file in the public folder (public/index.html) to check if the client’s browser supports service workers (lines 17–31):
Now, update line 12 of index.js in the src folder (src/index.js) from serviceWorker.unregister() to serviceWorker.register().
Restart (npm start) and reload your React app — you should see the message “Worker registration successful” in the console.
Go back to the Audits tab in Chrome Dev Tools and run a new report. It should look something like this:
Your React app now:
- Responds with a 200 when offline
- Registers a service worker
Progress!
Step 4: Apply the Principle of “Progressive Enhancement”
What is progressive enhancement?
Progressive enhancement is a strategy that emphasizes core webpage content first and progressively adds more layers and features on top of the content as the end-user’s network connection allow.
In order to make sure your React app renders styling and works without any JavaScript loaded, add lines 13–45 and 50–57 (to your index.html file in the public folder (public/index.html).
Try reloading your React app without internet connection — the app should contain the added content (above) when JavaScript is not available.
Step 5: Add a Splash Icon
What are splash icons?
You can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.
In order to pass the audit, you must include a 512x512 pixel icon. Chrome will automatically scale the icon for the device.
To do this, first create a new images folder in the public folder (public/images). Add the following icon image to the folder (and re-name it “icons-512.png”):
Next, update the “icons” array in the manifest.json file in the public folder (public/manifest.json) to match the following:
Restart (npm start) and reload your React app.
Go back to the Audits tab in Chrome Dev Tools and run a new report. It should look something like this:
Your React app is now configured for a custom splash screen.
Almost there!
Step 6: Deploy Your React PWA
The final step is to redirect HTTP traffic to HTTPS. Why? To make your app secure. In most cases, deploying your app will take care of this step for you.
NOTE: You should have already connected your repository to GitHub and committed your changes up to this point.
For some development platforms (like Firebase), your app will automatically become secure (redirect to HTTPS) once you deploy. For others (like Heroku), you’ll have to get a certificate from a Certificate Authority (CA) and upload it.
Once your app is deployed and secure, your last audit should be passing.
Congratulations, you just created a working progressive web app!
