How can we convert a React Application into a PWA

To convert a React application into a Progressive Web App, you need to follow these steps:

Manifest File:

1
Create a manifest.json file that provides metadata about the app, including icons, colours, and a short name.
2
This file helps browsers identify and display your app as an installable PWA.

Add Web App Manifest:

1
Include the <link> tag to the manifest.json file in the <head> section of your HTML. This allows browsers to discover your app as a PWA.

Service Worker:

1
Implement a service worker, which is a JavaScript file that runs in the background and controls how your app behaves.
2
It enables features like offline access and background syncing.

1
In your React app's main file (e.g., index.js), register the service worker using the serviceWorker.register() method.
2
This should be done after your app has loaded.

Cache Resources:

1
Use the service worker to cache important resources such as HTML, CSS, JavaScript, and assets (images, fonts) in the browser's cache.
2
This allows your app to work offline and load faster on subsequent visits.

Offline Page:

1
Create an offline page that displays when the user is offline and tries to access your app.
2
This page can provide basic information and a user-friendly experience.

App Shell Architecture:

1
Implement an app shell architecture, which involves caching the minimal HTML, CSS, and JavaScript required to display the basic app structure.
2
This shell loads quickly and is then populated with dynamic data.

HTTPS and Secure Origins:

1
PWAs require a secure origin (HTTPS) to ensure data security. Make sure your app is hosted on a secure server.

Optimize Performance:

1
Optimize your app's performance by minimizing code, optimizing images, and using techniques like lazy loading.

Push Notifications (Optional):*

1
If you want to enable push notifications, you need to integrate a push notification service like Firebase Cloud Messaging (FCM) or another compatible service.

Difficulty: 5/10

Topics: service workers, web manifest, offline caching

0-2 years experience

1
How would you add a web manifest to an existing React app and make sure it’s referenced correctly?
2
What steps do you take to register a service worker using create‑react‑app’s default setup?
3
If the ‘Add to Home Screen’ prompt never appears on Android, what are the common things you would check?

2-5 years experience

1
We enabled a service worker but some API calls still fail when the network is offline. Walk me through how you’d debug the caching strategy.
2
Why might a service worker stop updating after we changed the build folder structure, and how would you fix it?
3
When converting a React app to a PWA, what trade‑offs do you consider between using Workbox versus writing a custom service worker?

5-8 years experience

1
Design a caching strategy for a React e‑commerce PWA that balances fresh product data with offline availability. What patterns would you use and why?
2
How would you handle large image assets in a PWA to avoid exceeding storage quotas on low‑end devices?
3
If the PWA is served from a CDN with HTTP/2, what impact does that have on service‑worker registration and manifest delivery?

8+ years experience

1
Our organization has multiple legacy React apps that need to be migrated to PWAs over the next year. How would you architect a shared solution that minimizes duplication while supporting team autonomy?
2
Discuss the long‑term maintenance implications of using Workbox plugins versus hand‑rolled service‑worker code across many micro‑frontends.
3
What metrics would you put in place to monitor PWA performance and reliability after rollout, and how would you use them to drive future improvements?

❓What would you do if the service worker never activates?
❓How do you decide which resources to cache statically versus dynamically?
❓Can you describe how you’d version and update the service worker without breaking existing users?