Creating a fully-featured PWA with React
Get a universal installation page for your React PWA. Manage your service worker and app manifest from a dashboard rather than in code. Send push notifications.


Getting started with React & 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.
-
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. -
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. -
4Install your PWA
Progressier create an installation 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.
-
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
Let users install your app on their Android device. It works exactly like a native app.
iOS Installation
Your PWA is installable on iOS and iPad OS. It will open in its own standalone window. Progressier shows users custom instructions.
Windows Installation
Make your app a standalone desktop app that open in its own window. Your PWA can be installed from Chrome and Edge.
macOS Installation
Progressier helps users add your React PWA to their Docks for quick access.
Chrome OS Installation
Enjoy native PWA support for your app on Chrome OS.
Installation Page
An app-store like installation experience for your PWA — without the hassle of managing Google Play/App Store listings.
Original Domain Installation
Your React PWA can be installed from your existing domain.
Web App Manifest
Progressier generates a web app manifest for you based on your preferences automatically.
Service Worker
A service worker is a JavaScript file that runs in the browser continuously even when the page is not open. It's what allows push notifications to be delivered and resources to be cached intelligently. Progressier allows you to create, manage, customize your service worker without having to write code.
Cache Static Resources
Progressier lets you build caching strategies without writing code so you can easily cache resources and make them accessible offline.
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
Send push notifications to up to 1,000,000 users in one go within the Progressier dashboard or via the API.
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
Link user data like emails, names, status to push subscriptions, so you can easily notify someone from your product directly or from our dashboard.
In-App PWA Promotion
Promote installation of your PWA with a floating action button in the body of your app.
Offline Alerts
Show a custom alert when a user loses network connectivity.
Request Notifications After Installation
Progressier asks users to allow notifications right after they've installed your app, which generally results in a higher subscription rate
Install & Push Analytics
See in real-time and track over time how users install your PWA and allow push notifications.
Programmatic PWA Creation
Create new Progressive Web Apps dynamically with our API on different domains or subdirectories.
Google Play & App Store Upload
Easily upload your app to Google Play or the App Store with our PWABuilder integration.
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:
- No out-of-the-box logic for push notifications
- It uses Workbox under the hood, which is more complex and has fewer caching options than Progressier.
- No easy way to retry POST requests while offline
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.
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