Forem: Hussain Pettiwala

Transforming Your React App into a PWA: A Comprehensive Guide

Hussain Pettiwala — Tue, 11 Apr 2023 05:48:29 +0000

Progressive Web Apps (PWAs) are web applications that are designed to provide a native app-like experience to users, including features such as offline accessibility, push notifications, and home screen installation. By implementing PWAs, you can improve user engagement, increase conversions, and deliver a more seamless experience for your users.

In this comprehensive guide, we'll walk through the steps to transform your react app (built using create-react-app) into a PWA. We'll cover everything from generating assets for your PWA, updating your web manifest, creating a service worker, and registering your service worker. We'll also see how to test your PWA using ngrok.

By the end of this guide, you will have converted your react app to a PWA, and that can be easily installed on their home screens for easy access. So let's get started!

Generate Assets for your PWA

1. We will use pwa-asset-generator

npx pwa-asset-generator public/favicons/android-chrome-512x512.png public/pwa-assets -b "#2F3437"

2. CRA by default creates a site.webmanifest file update its contents by.

copy icons content for your manifest.json file.
here make sure that you remove the public prepend from the urls

For example:
your output might have been something like

   {
     "src": "public/pwa-assets/manifest-icon-192.maskable.png",
     "sizes": "192x192",
     "type": "image/png",
     "purpose": "any"
   }

update it to for every URL in the icons array

   {
    "src": "/pwa-assets/manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
   },

3. Incase site.webmanifest does not exist in your project create one in your public folder and link it in your index.html file

Here I would highly recommend to prepone the URLs with %PUBLIC_URL%/

For example:
Update

   <link
     rel="apple-touch-startup-image"
     href="public/pwa-assets/apple-splash-2048-2732.jpg"
     media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
   />

   <link
     rel="apple-touch-startup-image"
     href="%PUBLIC_URL%/public/pwa-assets/apple-splash-2048-2732.jpg"
     media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
   />

Note: you can do this quickly by using the multicursor feature of your code editor.

<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />

4. copy iOS meta tags content for your index.html file

Update webmanifest

This is an example webmanifest. You can get more details regarding the same here

Note that the screenshots field is optional

{
  "short_name": "App Name",
  "name": "App Name: What it does",
  "scope": "/",
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "theme_color": "#b241ff",
  "background_color": "#2F3437",
  "description": "Description of your app",
  "icons": [
    {
      "src": "public/pwa-assets/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "public/pwa-assets/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "public/pwa-assets/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "public/pwa-assets/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/dark-1.png",
      "type": "image/png",
      "sizes": "417x720"
    },
    {
      "src": "/screenshots/home-screen-dark-1.png",
      "type": "image/png",
      "sizes": "417x720"
    },
    {
      "src": "/screenshots/light-1.png",
      "type": "image/png",
      "sizes": "417x720"
    },
    {
      "src": "/screenshots/home-screen-light-1.png",
      "type": "image/png",
      "sizes": "417x720"
    }
  ]
}

Create a `service-worker.ts` file in your `src` folder

copy contents from the official create-react-app pwa template

for typescript - here
for javascript - here

Create a `serviceWorkerResgistration.ts` file in your `src` folder

copy contents from the official create-react-app pwa template

for typescript - here
for javascript - here

In your `src/index.tsx` file

...
import * as serviceWorkerRegistration from "./serviceWorkerResgistration";
...
...

serviceWorkerRegistration.register();

You can test your PWA using `ngrok`

build your react app

npm run build

serve that build using serve

serve -s build

Then in another terminal window

ngrok http 3000

(Optional) add custom install prompt

1. As stated here

Users may not be familiar with the PWA install process. As the developer, you will understand when it is the right time to invite the user to install the app.

2. You can add a custom install button that will invite the user to install the app.

3. create a useAddToHomescreenPrompt hook
credits : https://gist.github.com/rikukissa/cb291a4a82caa670d2e0547c520eae53

import { useEffect, useState } from "react";

export function useAddToHomescreenPrompt(): [
  BeforeInstallPromptEvent | null,
  () => void
] {
  const [prompt, setState] = useState<BeforeInstallPromptEvent | null>(null);

  const promptToInstall = () => {
    if (prompt) {
      return prompt.prompt();
    }
    return Promise.reject(
      new Error(
        'Tried installing before browser sent "beforeinstallprompt" event'
      )
    );
  };

  useEffect(() => {
    const ready = (e: BeforeInstallPromptEvent) => {
      e.preventDefault();
      setState(e);
    };

    window.addEventListener("beforeinstallprompt", ready as any);

    return () => {
      window.removeEventListener("beforeinstallprompt", ready as any);
    };
  }, []);

  return [prompt, promptToInstall];
}

4. If you are using typescript here's the BeforeInstallPromptEvent type credits

/**
 * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
 * before a user is prompted to "install" a web site to a home screen on mobile.
 *
 */
interface BeforeInstallPromptEvent extends Event {
  /**
   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
   * This is provided for user agents that want to present a choice of versions to the user such as,
   * for example, "web" or "play" which would allow the user to chose between a web version or
   * an Android version.
   */
  readonly platforms: Array<string>;

  /**
   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
   */
  readonly userChoice: Promise<{
    outcome: "accepted" | "dismissed";
    platform: string;
  }>;

  /**
   * Allows a developer to show the install prompt at a time of their own choosing.
   * This method returns a Promise.
   */
  prompt(): Promise<void>;
}

5. You can use it like so

const IntallPwaComponent = () => {
  const [prompt, promptToInstall] = useAddToHomescreenPrompt();
  const [isPromptVisible, setIsPromptVisible] = useState(false);

  useEffect(() => {
    if (prompt) {
      setIsPromptVisible(true);
    }
  }, [prompt]);

  return (
    <>{isPromptVisible && <Button onClick={promptToInstall}>Install</Button>}</>
  );
};

Attribution

Thank you Pargat Dhanjal for the amazing cover image!

Build a TODO app using Vanilla JavaScript

Hussain Pettiwala — Sat, 16 Jul 2022 18:13:43 +0000

Building a TODO app is a very basic but thorough way to understand concepts of a software tool.

We will build a TODO app using JavaScript for logic and Bootstrap for styling in this tutorial.

Try out the app here.

We will follow the following steps:

Building the `User Interface (UI)` with `Bootstrap`

Start with Bootstrap's Starter Template
Create a form for user to enter the TODO item.
Create an unordered list to hold all todos.
Create list element with checkbox for a todo item.
Make UI responsive using Bootstrap's grid system

Handling `functionality` with `JavaScript`

Define structure of our data - way to represent all TODOs in a JSON (JavaScript Object Notation) format.
renderTodos function to display TODOs in the UI.
renderTodo helper function to render an individual TODO.
addTodo function to add a TODO
Setup an Event Listener for submitting the todo from the UI.
completeTodo function to mark a TODO as completed

Building UI

Copy bootstrap's starter template and add custom script tags

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>TODO App</title>
  </head>
  <body>
    <!-- CONTENT -->
    <div></div>

    <!-- custom JS -->
    <script src="./script.js"></script>

    <!-- Bootstrap JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Create a form for user to enter the TODO item

Give unique id to text field and form to refer them in our JavaScript later.

<form id="todo-form">
  <!-- input field -->
  <input
    id="todo-text"
    class="form-control form-control-lg"
    type="text"
    placeholder="Your TODO"
    required
  />
  <!-- submit button -->
  <input type="submit" class="btn btn-primary my-3 w-100" />
</form>

Create an unordered list to hold all todos

<ul id="todo-list" class="list-unstyled"></ul>

Create list element with checkbox for a todo item

<li>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label" for="flexCheckDefault"> TODO Text </label>
  </div>
</li>

Make UI responsive using Bootstrap's grid system

<div class="container">
  <div class="row row-cols-1 row-cols-sm-1 row-cols-md-2">
    <div class="col">
      <!-- todo form goes here -->
    </div>
    <div class="col">
      <!-- todo list goes here -->
    </div>
  </div>
</div>

Handle functionality using JavaScript

Lets start by creating an array of objects for our `todos`.

var todos = [
  {
    id: 0,
    text: "subscribe to KJSCE codecell",
    complete: false,
  },
  {
    id: 1,
    text: "Star https://github.com/pettiboy/react-ui-scrollspy on GitHub",
    complete: false,
  },
];

Select all required elements from the `DOM`

const list = document.getElementById("todo-list");
const form = document.getElementById("todo-form");
const todoText = document.getElementById("todo-text");

Lets try to render these `todos` to the DOM from our `JS`

/*
loops over each todo in todos and if the task is not completed yet
calls the renderTodo function to render it to the DOM
*/
function renderTodos() {
  emptyTodos();
  todos.forEach((todo) => {
    if (todo.complete === false) {
      renderTodo(todo);
    }
  });
}

/*
takes a todo object as input and appends the innerHTML 
of the unordered list with that todo
*/
function renderTodo(todo) {
  list.innerHTML += `
        <li>
          <div class="form-check">
            <input onclick="completeTodo(${todo.id});" class="form-check-input" type="checkbox" />
            <label class="form-check-label" for="flexCheckDefault">
              ${todo.text}
            </label>
          </div>
        </li>
      `;
}

Lets write a function that given a `todo` adds it to our array of objects called `todos`.

function addTodo(todo) {
  todos.push({
    id: todo.id,
    text: todo.text,
    complete: todo.complete,
  });

  // render that todo to the DOM
  renderTodo(todo);
}

Setup an `Event Listener` for submitting the todo

// listen for form to be submitted
form.addEventListener("submit", (e) => {
  e.preventDefault();

  addTodo({
    id: todos.length + 1,
    text: todoText.value,
    complete: false,
  });

  // reset value of input field
  todoText.value = "";
});

Lets write a function to mark a `todo` as `completed`

function completeTodo(removeId) {
  // Find index of specific object using findIndex method.
  todoIndex = todos.findIndex((todo) => todo.id == removeId);

  // Update object's name property.
  todos[todoIndex].complete = true;

  // Just to wait for a sec before re rendering
  setTimeout(function () {
    saveTodosInMemory();
    renderTodos();
  }, 1000);
}

Store the todos in `localStorage`

// on page load - the following functions will run
todos = JSON.parse(localStorage.getItem("todosInMemory")) || [];
renderTodos();

Now that we can build a TODO app using JavaScript, we will use a popular framework called React to build this app and see how it compares and solves various problems with writing code using Vanilla JavaScript.

To watch a video version of this tutorial check out this lecture I had given at KJSCE Codecell's Month Of MERN.

You can also find the code on GitHub.

Forem: Hussain Pettiwala

Transforming Your React App into a PWA: A Comprehensive Guide

Generate Assets for your PWA

Update webmanifest

Create a service-worker.ts file in your src folder

Create a serviceWorkerResgistration.ts file in your src folder

In your src/index.tsx file

You can test your PWA using ngrok