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
importScriptsto 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?
Let users install your app on their Android device. It works exactly like a native app.
Your PWA is installable on iOS and iPad OS. It will open in its own standalone window. Progressier shows users custom instructions.
Make your app a standalone desktop app that open in its own window. Your PWA can be installed from Chrome and Edge.
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.
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.
Cache Static Resources
Progressier lets you build caching strategies without writing code so you can easily cache resources and make them accessible offline.
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.
Send push notifications to up to 1,000,000 users in one go within the Progressier dashboard or via the API.
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.
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?
Integrating Progressier with your React app bestows you with a flexible app manifest editable via a dashboard instead of directly in code, a more advanced service worker than Workbox, an all-inclusive push notification system, top-tier PWA promotional tools, continuously updated iOS splash screens, and PWA analytics.
Why not stick to the default React PWA service worker?
While the Create React App site offers guidance on building progressive web apps inclusive of auto-precaching URL instructions, its default service worker has shortcomings:
- Lack of built-in support for push notifications
- Reliance on Workbox, which, despite being intricate, offers less caching flexibility than Progressier
- No straightforward method to resend POST requests during offline periods
Any potential pitfalls with React PWAs?
Ensure you turn off React's caching/offline-first feature to prevent overlap with Progressier's capabilities. Also, double-check to avoid unintentionally deregistering the service worker using
For those utilizing tools like Webpack, Gulp, or Babel in their deployment pipeline and attempting to import the Progressier service worker into their existing one via
importScripts is not defined error might crop up. A solution can be found here.
Do React, Angular, and Vue have distinct differences concerning PWAs?
In essence, no. If you can manage the root of your domain, you can craft a PWA, irrespective of the underlying framework of your app.
Is it possible to list a React PWA on Google Play and the App Store?
Absolutely! Leveraging Progressier alongside PWABuilder enables you to develop a comprehensive PWA and position it on both Google Play and the App Store.
What prerequisites exist for forging a React-based PWA?
Your React application should be SSL-secured, incorporate a web app manifest, and include a service worker with an attached listener for the fetch event.
Can push notifications be dispatched from a React PWA?
Certainly! By integrating Progressier, your React PWA is instantly equipped with a holistic system for crafting, timing, and transmitting push notifications.
Will a React-driven PWA operate offline?
Indeed! Utilizing either Progressier or Workbox, you can set caching methods to ensure your React application operates seamlessly offline.