How to build an A+ Progressive Web App with React

  • Fast — respond quickly to user interaction
  • Integrated — user doesn’t have to go via browser
  • Reliable — load instantly, even if offline / bad network
  • Engaging — keep user coming back with great UX

The Baseline PWA

Example Add To Home Screen Banner
  1. App must originate from a Secure Origin
    So it must be served over SSL / HTTPS.
  2. App must load when offline
    It should function offline (even if only a custom offline page or basic caching). This means a Service Worker to be installed.
  3. App must reference a Web App Manifest
    A simple JSON file describing your app.

App Shell

App Shell Pattern

Loading States

Loading States

Code Splitting

  • Offline Support
  • Pre-cache App UI
  • Dynamically cache network data / assets

Service Workers with Workbox

PRPL Pattern

  • Push critical resources for the initial route
  • Render initial route
  • Pre-cache remaining routes
  • Lazy-load and create remaining routes on demand

Server Side Rendering vs Pre-Rendering & CDN

Wrap Up

--

--

--

JavaScript full stack developer, I specialise in Progressive Web Apps, React & React Native. I also Scrum Master.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Web Scraping using scrapy with JSON APIs

ANGULAR PIPES

Event Management Application “Aloha!”

Don’t write an SPA*

JavaScript: global variables vs singletons

The most confusing thing in JavaScript: The ‘this’ keyword

Dear Amarians,

Event Listeners and Parent Nodes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Hudson

Dave Hudson

JavaScript full stack developer, I specialise in Progressive Web Apps, React & React Native. I also Scrum Master.

More from Medium

React countdown timers simplified.

React Router v6 : Hash Router

How to Create Glowing Images with React

Building a Progressive Web App with React 18