How to build PWA

Progressive Web Apps (PWAs) are web applications that provide a native app-like experience to users. They are fast, reliable, and engaging, and can be installed on a user’s device like a native app.

Project Structure

my-pwa/
├──index.html
├──app.js
├──styles.css
├──manifest.json
├──service-worker.js
├──images/
│   ├──icon-192x192.png
│   └──icon-512x512.png

Create index.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PWA Demo</title>
  <link rel="stylesheet" href="style.css">
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Welcome to My PWA!</h1>
  <p>This is a simple Progressive Web App built with vanilla JS.</p>

  <script src="app.js"></script>
</body>
</html>

Create manifest.json file

{
  "name": "PWA Demo",
  "short_name": "PWADemo",
  "description": "A simple PWA demo using vanilla JavaScript.",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#333333",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-large.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Add a Service Worker

A service worker is a script that allows the app to cache assets and work offline. Create a new file called sw.js:

const CACHE_NAME = "pwa-demo-cache-v1";
const ASSETS_TO_CACHE = [
  "/",
  "/index.html",
  "/style.css",
  "/app.js",
  "/manifest.json"
];

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

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Register the Service Worker in App.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("/sw.js")
      .then(() => console.log("Service Worker registered successfully."))
      .catch((err) => console.log("Service Worker registration failed:", err));
  });
}

Add icons

You’ll need to create icons for your PWA to the root directory of your project: