Creating a fully-featured PWA with React

Get a universal install page for your React PWA. Manage your service worker and app manifest from a dashboard rather than in code. Send push notifications.

5 min100% compatible
React Logo
Cover image for Creating a fully-featured PWA with React

Getting started with React & Progressier

  1. Illustration screenshot for Sign up to Progressier

    1Sign up to Progressier

    Create a Progressier account, and when asked for how your app was built, select React, then continue to see the tasks required to add Progressier to your existing React app. It usually takes 5 minutes or less.

  2. Illustration screenshot for Add the script tag to your HTML

    2Add the script tag to your HTML

    Add our manifest/script tag to your HTML template (anywhere in the head). Just place the code snippet provided in the Progressier dashboard right below your Google Analytics script, Google Font links, or other third-party meta tags and stylesheets.

  3. Illustration screenshot for Import our service worker file

    3Import our service worker file

    Progressier also provides you with a JavaScript file to use as service worker. If you're using webpack, you likely already have a service worker. You can use importScripts to add our service worker file into your existing SW file.

  4. Illustration screenshot for Install your PWA

    4Install your PWA

    Progressier create an install page for your React PWA (e.g. install.page/covid). This link gives users an easy way to install your app across devices and browsers. Alternatively, your PWA can be made installable directly within the body of your app with our in-app promotion elements.

  5. Illustration screenshot for Send a push notification

    5Send a push notification

    Progressier comes with a complete solution for push notifications. Customize how/when to prompt users to allow notifications, and then notify users right from our dashboard (or with our API). Optionally, you can even connect your own user data to send granular push notifications.

Which PWA features does React support?

Android Installation

Get your PWA installed on any Android smartphone or tablet, just like a native app.

iOS Installation

Progressier walks users through the process of installing your app on their iPad or iPhone.

Windows Installation

Your React PWA is installable from Google Chrome and Microsoft Edge and can be added to a Desktop or Taskbar.

macOS Installation

Get your app installed on macOS from Chrome — Progressier walks users through installing your PWA to their Docks.

Chrome OS Installation

Let users add your PWA to their Chrome OS laptop.

Install Page

A familiar app store installation experience bundled in a single-purpose page for your users.

Original Domain Installation

Your app is directly installable right from your own domain

Web App Manifest

Progressier builds a PWA manifest with your preferences set in the dashboard, with toggles and inputs instead of lines of code

Service Worker

A service worker is JS file that runs separately from the main browser thread. It can intercept network requests (allowing to put resources in the cache or retrieve them from there) and deliver push notifications to someone even when they're not actively using your app. With Progressier, you can define these rules without having to write any code at all.

Cache Static Resources

Progressier has a built-in caching strategy builder that lets you configure how each type of resources should be cached and refreshed. No code to write.

100% Offline-Ready

If you have full control over all the resources required for your website to work, you can make your site work 100% offline in Progressier without writing a single line of code.

Push Campaigns

Notify all your users of news in your app with our dashboard and/or API. Progressier manages all user push subscriptions for you.

Personalized Notifications

Send notifications to any particular user manually or programmatically. All your need is their email, their user ID or any other information that identifies them in your system.

Connect User Data

Connect your own user data (emails, account type, etc). So when a user authorizes push notifications in your React PWA, their data is also saved along with it.

In-App PWA Promotion

Everything you need to encourage users to install your app on their devices.

Offline Alerts

Display an in-app alert when users go offline.

Push Prompt on Standalone

Automatically prompt users to authorize notifications after they've installed your PWA on their device.

Install & Push Analytics

Progressier tracks installs of your React PWA over time. Also tracks push subscriptions.

Programmatic PWA Creation

Create React PWAs programmatically with our API.

Google Play & App Store Upload

With our PWABuilder integration, you can list your React PWA on Google Play or the App Store.

Why choose React and Progressier for your PWA?

The framework created by Facebook is the most popular client-side JavaScript framework at the moment. With its reusable components and virtual DOM, React is a great tool for creating complex apps that scale well. It's probably also the best framework for creating PWAs.

By adding Progressier to your existing React app, you get a customizable app manifest that can be modified from a dashboard rather in code, a service worker with more advanced options not available in Workbox, a complete solution for push notifications, best-in-class PWA promotion widgets, always-up-to-date iOS splash screens, and even PWA analytics.

Why not just use the standard React PWA service worker implementation?

The Create React App website provides documentation for making a progressive web app, which includes guidelines for auto-precaching URLs in your production build. However, the default service worker is missing a few things:

Are there any gotchas when creating a PWA with React?

You'll have to make sure to deactivate the caching/offline-first behavior from React to avoid duplication with the functionality provided by Progressier. Also ensure you're not accidentally unregistering the service worker with serviceWorkerRegistration.unregister();.

If you're using Webpack, Gulp, Babel or other JavaScript compilers as part of your deployment process, and if you're using importScripts to import the Progressier service worker into your existing service worker, you may experience an error telling you importScripts is not defined. This usually solves the issue.

Are there differences between React, Angular and Vue with regards to PWAs?

The short answer is: not really. As long as you have control over the root of your domain, you'll be able to create a PWA, regardless of the framework your app is using under the hood.

Can I upload a React PWA to Google Play and the App Store?

Yes! With Progressier and PWABuilder, you can create a fully-featured PWA and list it on Google Play and the App Store.

What are the requirements for creating a PWA with React?

Your React app must be secured by a SSL, include a web app manifest as well as a service worker with a listener attached to the fetch event.

Can I send push notifications with a React PWA?

Yes! With Progressier, your React PWA automatically has access to a complete solution for composing, scheduling and sending push notifications.

Can a PWA built with React be functional offline?

Yes! You can define caching strategies with Progressier or Workbox to make your React app functional entirely offline.

Your app here

Ready to turn your React app into a PWA?

Try our PWA builder free of charge for 14 days. No credit card required.

Get started See plans