Building Progressive Web Apps (PWAs)

1What Makes an App a "Progressive Web App"

A PWA is a regular website that meets a specific technical bar: it's served over HTTPS, has a web app manifest, and registers a service worker. Meeting that bar unlocks capabilities normally reserved for native apps — offline functionality, home-screen installation, push notifications, and app-like full-screen navigation — while still being a single codebase that runs in any browser.

For businesses evaluating a mobile presence, a PWA is often the fastest and cheapest path to something that feels like an app, without the App Store/Play Store approval process, native codebases, or per-platform maintenance burden.

2The Three Core Ingredients

1. HTTPS — required; service workers won't register on plain HTTP (localhost is exempted for development)
2. Web App Manifest — a JSON file describing the app's name, icons, colors, and launch behavior
3. Service Worker — a background script that intercepts network requests, enabling caching and offline support

3Step 1 — The Web App Manifest

Create manifest.json in your public root:

{
  "name": "JTechBD POS",
  "short_name": "JT POS",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Link it in your HTML <head>:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0f172a">

4Step 2 — The Service Worker

Register the service worker from your main JavaScript file:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service worker registered:', reg.scope))
      .catch(err => console.error('Service worker registration failed:', err));
  });
}

A minimal sw.js that caches core assets on install:

const CACHE_NAME = 'app-cache-v1';
const CORE_ASSETS = ['/', '/offline.html', '/css/app.css', '/js/app.js'];

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

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

5Step 3 — Caching Strategies

Different content needs different caching logic — don't use one strategy for everything:

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

6Making It Installable

Once the manifest and service worker are in place, most browsers will offer an install prompt automatically. You can also trigger a custom "Install App" button:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById('install-btn').hidden = false;
});

document.getElementById('install-btn').addEventListener('click', async () => {
  deferredPrompt.prompt();
  await deferredPrompt.userChoice;
  deferredPrompt = null;
});

7PWA vs Native App: When to Choose Which

Choose a PWA when:

• You need one codebase across desktop and mobile
• Your app doesn't require deep device APIs (Bluetooth, advanced camera controls, background location)
• Speed to market and lower cost matter more than App Store presence

Choose native (or a hybrid framework) when:

• You need App Store/Play Store discoverability specifically
• The app depends heavily on native device features
• You need the highest possible performance for graphics-intensive apps (games, AR)

8Frequently Asked Questions