Introduction to Progressive Web Apps (PWAs)

A Progressive Web App (PWA) is a web application that behaves like a native mobile app—without the cost, complexity, or app store friction. It runs in the browser but can be installed on a device, work offline, and send push notifications, blurring the line between web and mobile.

PWAs combine standard web technologies (HTML, CSS, JavaScript) with modern browser capabilities like Service Workers, Web App Manifests, and Caching APIs to deliver fast, reliable, and engaging experiences. The result is an app that loads instantly, works on flaky networks, and keeps users coming back—without forcing them to download anything from an app store.

For use cases like habit trackers, reminders, and productivity tools, PWAs are often a better choice than native apps: faster to build, easier to maintain, and powerful enough to drive daily engagement.

What We’re Building

By the end of this guide, you’ll have:

• A PWA Habit Tracker
• Installable on desktop & mobile
• Offline-first using Service Workers
• Push notifications for habit reminders
• A clean mental model of how everything fits together

No magic. No hand-waving.

Step 1: Scaffold the Habit Tracker App

You can use plain HTML/JS, React, Vue, or Next.js—but keep this rule in mind:

Service Workers don’t care about your framework.

For simplicity, let’s assume:

• React (or vanilla JS)

A basic habit model:

{
  id: string,
  name: string,
  reminderTime: "07:00",
  completedToday: boolean
}

At this stage, focus on:

• Creating habits
• Listing habits
• Marking them complete

No PWA stuff yet. Earn it.

Step 2: Add the Web App Manifest (Installability)

This is where your web app begins to resemble native applications.

Create manifest.json:

{
  "name": "Habit Tracker",
  "short_name": "Habits",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Then link it in index.html:

<link rel="manifest" href="/manifest.json" />

That’s it. Your app is now installable.

Step 3: Register a Service Worker (Non-Negotiable)

No Service Worker = No PWA = No Push Notifications.

Create service-worker.js:

self.addEventListener("install", event => {
  self.skipWaiting();
});

self.addEventListener("activate", event => {
  clients.claim();
});

Register it in your app:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js");
}

At this point, your app:

• Can be installed
• Has background execution capability

We’re just getting warmed up.

Step 4: Cache for Offline Support (Because Users Go Offline)

A habit tracker that dies on poor internet is unacceptable.

Inside service-worker.js:

const CACHE_NAME = "habit-tracker-v1";
const ASSETS = ["/", "/index.html", "/styles.css", "/app.js"];

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

Now your app:

• Loads instantly
• Works offline
• Feels native

Step 5: Request Notification Permission

Never auto-prompt. Ever. That’s rookie behavior.

Trigger permission after the user creates a habit:

const permission = await Notification.requestPermission();
if (permission !== "granted") {
console.warn("Notifications denied");
}

Remember:

• Permission is per origin
• You only get one real chance

Step 6: Subscribe to Push Notifications

Push notifications need three things:

1. Service Worker
2. Push subscription
3. Backend (yes, unavoidable)

Client-side subscription:

const registration = await navigator.serviceWorker.ready;

const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: VAPID_PUBLIC_KEY
});

Send this subscription object to your backend and store it.

This is where most tutorials panic. Don’t.

Step 7: Send Habit Reminder Notifications (The Payoff)

From your backend (Node.js example):

webpush.sendNotification(subscription, JSON.stringify({
title: "Habit Reminder",
body: "Time to complete your morning habit",
}));

Handle it in the Service Worker:

self.addEventListener("push", event => {
const data = event.data.json();  event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/icons/icon-192.png"
})
);
});

Now your Habit Tracker:

• Nudges users
• Rebuilds habits
• Actually earns its existence

Step 8: Schedule Habit Reminders (The Smart Part)

Don’t rely on users remembering anything.

On the backend:

• Store each habit’s reminderTime
• Use a cron job (or queue worker)
• Fire push notifications at the right time

This separation matters:

• Frontend = UX
• Backend = timing + reliability

Step 9: UX That Actually Works

Strong opinion here:

If your habit tracker needs explanation, you’ve already failed.

Must-haves:

• One-tap completion
• Clear daily streaks
• Gentle, non-spammy notifications
• Silent success feedback

Push notifications should feel like encouragement—not nagging.