Day 9: Converting an Existing React App into a PWA

Today, you’ll convert an existing React app into a Progressive Web App (PWA). This process involves adding a service worker, a manifest file, and configuring the app to work offline with a seamless native-like experience.

What You Will Do Today:

1. Verify the structure and requirements for a PWA.
2. Add and register a service worker.
3. Configure the manifest file for installability.
4. Test the app’s PWA functionality.

Step 1: Verify PWA Requirements

To convert a React app into a PWA, ensure the following:

• A service worker for offline capabilities.
• A Web App Manifest file with icons, theme colors, and start URL.
• Responsive design to adapt to various screen sizes.

Step 2: Setting Up a Service Worker

If you used create-react-app to build the app, a service worker setup is already included. You’ll need to enable and customize it for offline support.

1. Open src/index.js and import serviceWorkerRegistration to register the service worker.

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import * as serviceWorkerRegistration from './serviceWorkerRegistration';

   ReactDOM.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
     document.getElementById('root')
   );

   // Register the service worker for offline capabilities
   serviceWorkerRegistration.register();

2. In public/service-worker.js, add caching logic for network requests. Open service-worker.js and ensure caching is enabled, or customize it as needed.

   const CACHE_NAME = 'my-react-app-cache-v1';
   const urlsToCache = ['/', '/index.html', '/static/js/bundle.js'];

   self.addEventListener('install', (event) => {
     event.waitUntil(
       caches.open(CACHE_NAME).then((cache) => {
         return cache.addAll(urlsToCache);
       })
     );
   });

   self.addEventListener('fetch', (event) => {
     event.respondWith(
       caches.match(event.request).then((response) => {
         return response || fetch(event.request).then((networkResponse) => {
           return caches.open(CACHE_NAME).then((cache) => {
             cache.put(event.request, networkResponse.clone());
             return networkResponse;
           });
         });
       })
     );
   });

Step 3: Configuring the Web App Manifest

The manifest.json file provides metadata, allowing users to add your app to their home screen with a custom icon, background color, and display settings.

1. Open public/manifest.json and configure it as follows:

   {
     "short_name": "MyApp",
     "name": "My Progressive Web App",
     "description": "An existing React app converted to a PWA",
     "icons": [
       {
         "src": "icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ],
     "start_url": ".",
     "display": "standalone",
     "background_color": "#ffffff",
     "theme_color": "#333333"
   }

2. Ensure that the icons paths in the manifest file point to icon-192x192.png and icon-512x512.png files in the public folder. You can generate these icons using an icon generator if needed.

Step 4: Testing PWA Functionality

Once you’ve configured the service worker and manifest, it’s time to test the PWA capabilities.

1. Start your app locally using:

   npm start

2. Open Google Chrome and navigate to http://localhost:3000.
3. Go to Developer Tools (F12 or right-click and select “Inspect”) and open the Application tab. Check for:

• Manifest: Ensure all fields (name, icons, start URL) are correctly populated.
• Service Workers: Confirm that the service worker is registered and running.

2. To test the offline functionality:

• In Developer Tools > Network, set the network to Offline.
• Refresh the page. The cached content should load, verifying that the app works offline.

2. To test the installability:

• Look for an Install button in the browser’s address bar or the “Add to Home Screen” option.
• Click Install to add the app to your device’s home screen. Once installed, the app should open in a standalone window without the browser UI.

Summary

Today, you successfully converted an existing React app into a Progressive Web App (PWA). You:

• Registered a service worker to enable offline support.
• Configured the Web App Manifest for installability.
• Tested the app’s offline and installable features.

Tomorrow, you’ll learn how to deploy the PWA to Netlify, Heroku, or AWS, and make it installable by users.