React: Building Progressive Web Apps (PWAs)

50mIntermediate2019-06-14

Authors

Eve Porcello

Software Developer and Instructor

Course details

Single-page applications may be smooth, quick, and effective—but they disappear when the network connection drops. Progressive web apps (PWAs) work offline, enhancing resilience and allowing developers create seamless user experiences that feel like native apps. Learn how to build your own PWAs using React, the flexible front-end framework, in this course with Eve Porcello. Eve explains how to build the PWA component, fetch data, use Lighthouse to validate your app, and add offline capabilities to keep your app running even when the internet is down. Plus, learn how to install your app locally with browsers like Chrome and Safari for iOS.

Learning objectives
Creating a PWA component
Fetching data with React hooks
Running the build with npm scripts
Auditing your app with Lighthouse
Going offline
Installing the PWA with Chrome and Safari for iOS
Deploying your PWA on a hosting provider

Skills covered

React.jsMetaFront-End Web DevelopmentWeb DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Build a resilient progressive web app with React
02 - What you should know

1. What Are PWAs

03 - What is a Progressive Web App
04 - Why PWAs
05 - Using the PWA checklist

2. Setup - Create React App

06 - Using create-react-app
07 - Create an app component
08 - Fetch data with React Hooks
09 - Install serve
10 - Run a build

3. PWA Tools

11 - Using Lighthouse
12 - Lighthouse metrics
13 - Register the service worker
14 - Going offline

4. Understanding PWA Features

15 - Understanding the PWA manifest
16 - Add a custom icon
17 - Change the name of the app
18 - Add PWA to Chrome
19 - Add PWA to iOS
20 - Deploy on Netlify

Conclusion

21 - Next steps