Project 23, PWA and offline

Reminder Notifications

Set a reminder, switch to another app, and a system notification appears on time. Tap Snooze or Done right from the notification.

Main API: Notifications, Push
Handled by: Service Worker
Files: index.html, sw.js, manifest
Your browser: Checking

New reminder

Checking notification permission

Remind me to

Server push (optional)

Push works even when the page is closed. It needs a server with a VAPID key pair.

Scheduled

How it works

Ask permissionThe browser asks once. Without permission, reminders still show inside the page.
Show from the workerregistration.showNotification() creates a system notification with action buttons.
Handle the tapThe service worker gets notificationclick, snoozes or completes the reminder, and focuses the page.

const reg = await navigator.serviceWorker.register("sw.js");
await Notification.requestPermission();                // "granted"

reg.showNotification("Stand up and stretch", {
  body: "Reminder from your to-do app",
  actions: [{ action: "done", title: "Done" }, { action: "snooze", title: "Snooze 5 min" }],
  tag: "reminder-42", requireInteraction: true,
});

// sw.js
self.addEventListener("notificationclick", (e) => {
  e.notification.close();
  if (e.action === "snooze") { /* tell the page to reschedule */ }
});