React: Building Progressive Web Apps (PWAs)

Learn to use React to create progressive web applications that combine features for offline use and network resilience.

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.

Introduction

• Build a resilient progressive web app with React
• What you should know

1. What Are PWAs?

• What is a Progressive Web App?
• Why PWAs?
• Using the PWA checklist

2. Setup: Create React App

• Using create-react-app
• Create an app component
• Fetch data with React Hooks
• Install serve
• Run a build

3. PWA Tools

• Using Lighthouse
• Lighthouse metrics
• Register the service worker
• Going offline

4. Understanding PWA Features

• Understanding the PWA manifest
• Add a custom icon
• Change the name of the app
• Add PWA to Chrome
• Add PWA to iOS
• Deploy on Netlify

Conclusion

• Next steps