Progressive Web Apps (PWAs) combine the best of web and mobile applications, delivering high-speed performance, offline functionality, and a seamless, app-like user experience. If you’re building a new React application and want to turn it into a PWA, this blog will guide you through the process step-by-step.
What is a PWA?
A Progressive Web App is a web application designed to function similarly to a native app. Key features include:
* Offline Support: Works without internet access using caching strategies.
* Installability: Users can install the app directly on their devices.
* Responsiveness: Adjusts seamlessly to different screen sizes and device orientations.
Setting Up Your React Project
Before we turn the React app into a PWA, we need to set up the project.
Step 1: Create a New React Application
npx create-react-app my-pwa --template cra-template-pwa
cd my-pwa
The car-template-pwa template comes with PWA-ready configurations, including a service worker.
PWA Essentials in React
1. Service Worker
The service worker enables caching and offline capabilities. React's PWA template includes a pre-configured serviceWorker.js file
* Locate the service worker file: You can find it in src/service-worker.js.
* Register the service worker: Open src/index.js and ensure the service worker is registered.
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
serviceWorkerRegistration.register();
2. Manifest File
The manifest file provides metadata for your app, like icons and the name displayed when installed.
* Open public/manifest.json.
* Update the properties such as name, short_name, start_url, and theme_color.
Example:
{
"short_name": "MyPWA",
"name": "My Progressive Web App",
"start_url": ".",
"display": "standalone",
"theme_color": "#1976d2",
"background_color": "#ffffff",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Adding Features to Your PWA
1. Offline Caching
React's PWA template uses Workbox to handle caching.
* Modify the caching strategy in src/service-worker.js.
For example, cache API requests using staleWhileRevalidate:
workbox.routing.registerRoute(
({ url }) => url.origin === 'https://api.example.com',
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'api-cache',
})
);
2. Background Sync
Background Sync lets the app retry failed network requests when the internet is available again.
* Add the sync logic in src/service-worker.js using Workbox’s BackgroundSyncPlugin:
const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin('sync-queue', {
maxRetentionTime: 24 * 60, // Retry for 24 hours
});
workbox.routing.registerRoute(
/\/api\/.*\/*.json/,
new workbox.strategies.NetworkOnly({
plugins: [bgSyncPlugin],
}),
'POST'
);3. Push Notifications
Push notifications improve user engagement by sending alerts directly to the device.
* Use a service like Firebase Cloud Messaging (FCM) to manage notifications.
* Integrate FCM in your React app and configure the service worker to handle push events:
self.addEventListener('push', (event) => {
const data = event.data.json();
self.registration.showNotification(data.title, {
body: data.body,
icon: '/icon.png',
});
});4. Responsive Design
A PWA must look good on all screen sizes. Use CSS media queries or a library like Tailwind CSS:
/* Example: Center content on small screens */
@media (max-width: 768px) {
.main-content {
text-align: center;
}
}
Testing Your PWA
1. Local Testing
Run your app in development mode:
npm start
Then build for production to see how the PWA behaves offline:
npm run build
serve -s build
2. Lighthouse Audit
Use Google Lighthouse to test your app’s PWA capabilities. It will highlight areas to improve.
Building a PWA with React enables you to provide users with a seamless app-like experience. Utilizing service workers, caching techniques, and responsive design ensures your application remains fast, dependable, and interactive.
To read more about How to Set Up Typescript in a React Project, refer to our blog How to Set Up Typescript in a React Project.