How can we convert a React Application into a PWA

Difficulty: 5/10

service workers, web manifest, offline caching

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.

0-2 years experience

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

2-5 years experience

1We 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.
2Why might a service worker stop updating after we changed the build folder structure, and how would you fix it?
3When 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

1Design a caching strategy for a React e‑commerce PWA that balances fresh product data with offline availability. What patterns would you use and why?
2How would you handle large image assets in a PWA to avoid exceeding storage quotas on low‑end devices?
3If 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

1Our 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?
2Discuss the long‑term maintenance implications of using Workbox plugins versus hand‑rolled service‑worker code across many micro‑frontends.
3What 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?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.