Making The Existing React Project a PWA and Android App: A Simple Guide

I wanted to turn my existing React project into a Progressive Web App (PWA) and a standalone Android app. Here’s what I did:

1. PWA Setup:

(i) Adding a service worker:

• I installed workbox-webpack-pluginto easily manage the service worker.
• For new projects, you can use npx create-react-app web --template cra-template-pwa. As for my existing project, I created src/service-worker.js and copied it to the public folder.
• I added this code to index.jsto register the service worker.

if ('serviceWorker' in navigator) {
    // Register a service worker hosted at the root of the
    // site using the default scope.
    navigator.serviceWorker.register('./service-worker.js').then(
      registration => {
        console.log('Service worker registration succeeded:', registration);
      },
      /*catch*/ error => {
        console.error(`Service worker registration failed: ${error}`);
      }
    );
  } else {
    console.error('Service workers are not supported.');
  }

(ii) Updating manifest.json:

• I filled in details like app name, icons, screenshots, start URL, theme color, etc.
• I set display to "standalone"for full-screen mode.

Here is sample manifest.

{
  "short_name": "Your App Name",
  "name": "Your App Name",
  "icons": [
    {
      "src": "icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128",// square icon is required
      "purpose": "any maskable"
    },
    {
      "src": "icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any maskable"
    },
    {
      "src": "icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "screenshot-1.png",
      "sizes": "800x600",
      "type": "image/png",
      "form_factor": "wide" //a screenshot with form_factor is required
    },
    {
      "src": "screenshot-2.png",
      "sizes": "800x600",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone",
  "description": "Your app's description for users"
}

2. PWA to Android Bundle: (I’ve also included the original Google codelab at the end for your reference.)

(i) Bubblewrap setup:

• I installed @bubblewrap/cli globally.
• I ranBubblewrap init --manifest=https://example.com/manifest.jsonto generate an Android project based on my PWA’s manifest.

(ii) Gradle adjustments:

• I modified gradle.propertieswith settings for memory and parallelization .

#org.gradle.jvmargs=-Xmx1536m #original
org.gradle.jvmargs=-Xmx512m #replaced command for memory optimization

#for parallelization
org.gradle.parallel=true #add new command
org.gradle.parallel.threads=1 #add new command

android.useAndroidX=true #original

(iii) Building the bundle:

• I ran bubblewrap buildto generate the Android app bundle.

Now, I’ve successfully converted my existing React project into a PWA and generated an Android bundle, marking a significant step towards a complete mobile app.

Resources:

• Google’s PWA to Android app codelab: https://developers.google.com/codelabs/pwa-in-play#0

Key points:

• workbox-webpack-pluginsimplifies service worker setup.
• PWA manifest defines the app’s look and feel for offline functionalities.
• Bubblewrap creates an Android project from the PWA’s manifest.
• Gradle tweaks optimize build performance.

I hope this simplified explanation helps you navigate the process of turning your React project into a PWA and Android app!

Thanks! Have a nice day!