Add Web Push notifications, PWA support, and full-screen tablet kiosk

Parents get a real push notification when a kid checks off a task (false->true transitions only, fire-and-forget, degrades gracefully with no VAPID keys configured). Dashboard is a fully installable iOS/Android PWA; each child's kiosk link gets its own dynamic per-token manifest so "Add to Home Screen" opens straight into their board in standalone mode. Kiosk view is reworked for tablets: safe-area-aware full-bleed layout, the whole task row is now tappable (previously only the 24px checkbox was, well under Apple's touch-target minimum), and app icons are generated by a small dependency-free PNG encoder (no image tooling available in this environment). Push requires real HTTPS (iOS Safari won't allow it otherwise) - README and UNRAID.md cover VAPID setup and the HTTPS prerequisite.
2026-08-15 16:14:56 -04:00
parent 56d8c4616c
commit 2826a3819c
27 changed files with 792 additions and 14 deletions
@@ -7,6 +7,13 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@500;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/css/shared.css">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
+<meta name="theme-color" content="#F1F5FB">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="Calendar">
 </head>
 <body>

@@ -7,6 +7,13 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@500;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/css/shared.css">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
+<meta name="theme-color" content="#F1F5FB">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="Calendar">
 </head>
 <body>

@@ -21,6 +28,16 @@
  </div>
 </header>

+<div class="section">
+  <h2>Notifications</h2>
+  <div class="entity-card" id="notificationsCard">
+    <p class="meta" id="notificationsMessage">Checking notification support…</p>
+    <div>
+      <button class="tool primary" id="notificationsBtn" style="display:none;">Enable notifications</button>
+    </div>
+  </div>
+</div>
+
 <div class="section">
  <h2>Household</h2>
  <div id="parentsList" class="card-grid"></div>
@@ -109,6 +126,7 @@
 <div class="toast" id="toast"></div>

 <script src="/js/api.js"></script>
+<script src="/js/push.js"></script>
 <script src="/js/dashboard.js"></script>

 </body>
@@ -25,5 +25,5 @@ const api = {
  get(path) { return this.request('GET', path); },
  post(path, body) { return this.request('POST', path, body === undefined ? {} : body); },
  patch(path, body) { return this.request('PATCH', path, body === undefined ? {} : body); },
-  del(path) { return this.request('DELETE', path); },
+  del(path, body) { return this.request('DELETE', path, body); },
 };
@@ -49,6 +49,17 @@ function renderCalendar({ calendar, editable, weekdayBoard, weekendWrap, handler
    row.appendChild(cb);
    row.appendChild(span);

+    if (!editable) {
+      // Kiosk mode: the 24px checkbox alone is a poor touch target, so the
+      // whole row toggles it. Skip when the tap landed on the checkbox
+      // itself — it already handles its own toggle+change natively.
+      row.addEventListener('click', (e) => {
+        if (e.target === cb) return;
+        cb.checked = !cb.checked;
+        cb.dispatchEvent(new Event('change'));
+      });
+    }
+
    if (editable) {
      span.contentEditable = 'true';
      span.addEventListener('keydown', (e) => {
@@ -0,0 +1,103 @@
+function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = atob(base64);
+  return Uint8Array.from([...rawData].map((c) => c.charCodeAt(0)));
+}
+
+function isIOS() {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+}
+
+function isStandalone() {
+  return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone === true;
+}
+
+const notificationsMessage = document.getElementById('notificationsMessage');
+const notificationsBtn = document.getElementById('notificationsBtn');
+
+function showMessage(text) {
+  notificationsMessage.textContent = text;
+  notificationsMessage.style.display = 'block';
+  notificationsBtn.style.display = 'none';
+}
+
+function showButton(label, onClick) {
+  notificationsMessage.style.display = 'none';
+  notificationsBtn.textContent = label;
+  notificationsBtn.style.display = 'inline-block';
+  notificationsBtn.onclick = onClick;
+}
+
+let cachedPublicKey = null;
+
+async function subscribe() {
+  const reg = await navigator.serviceWorker.ready;
+  const permission = await Notification.requestPermission();
+  if (permission !== 'granted') {
+    return initNotifications();
+  }
+  const sub = await reg.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: urlBase64ToUint8Array(cachedPublicKey),
+  });
+  await api.post('/api/push/subscribe', { subscription: sub.toJSON() });
+  initNotifications();
+}
+
+async function unsubscribe() {
+  const reg = await navigator.serviceWorker.ready;
+  const sub = await reg.pushManager.getSubscription();
+  if (sub) {
+    const endpoint = sub.endpoint;
+    await sub.unsubscribe();
+    await api.del('/api/push/subscribe', { endpoint });
+  }
+  initNotifications();
+}
+
+async function initNotifications() {
+  if (!notificationsMessage) return;
+
+  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+    return showMessage('Push notifications aren\'t supported in this browser.');
+  }
+
+  if (!window.isSecureContext) {
+    return showMessage('Notifications require HTTPS. Set up a reverse proxy with a real certificate to use this.');
+  }
+
+  let vapid;
+  try {
+    vapid = await api.get('/api/push/vapid-public-key');
+  } catch {
+    return showMessage('Could not check notification status.');
+  }
+  if (!vapid.enabled) {
+    return showMessage('Push notifications aren\'t configured on this server yet.');
+  }
+  cachedPublicKey = vapid.publicKey;
+
+  if (isIOS() && !isStandalone()) {
+    return showMessage('On iPhone/iPad: tap Share → Add to Home Screen, then open the app icon from your Home Screen and come back here to enable notifications.');
+  }
+
+  if (Notification.permission === 'denied') {
+    return showMessage('Notifications are blocked for this site in your browser settings.');
+  }
+
+  const reg = await navigator.serviceWorker.register('/sw.js');
+  await navigator.serviceWorker.ready;
+  const existingSub = await reg.pushManager.getSubscription();
+
+  if (existingSub) {
+    showButton('Disable notifications on this device', unsubscribe);
+  } else {
+    showButton('Enable notifications on this device', subscribe);
+  }
+}
+
+if (notificationsMessage) {
+  initNotifications();
+}
@@ -3,16 +3,36 @@
 <head>
 <meta charset="UTF-8">
 <title>My Week</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@500;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/css/shared.css">
+<meta name="theme-color" content="#F1F5FB">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<!--KIOSK_HEAD_TAGS-->
 <style>
  /* Kiosk is touch-first and has nothing to edit — bigger targets, no toolbar chrome. */
  header{ justify-content: center; text-align: center; }
  .toolbar{ display:none; }
  .board{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .task-text{ font-size: 1.02rem; }
+
+  /* Full-bleed standalone launch: respect notches/home-indicator, and stop
+     iOS's rubber-band overscroll from flashing white space at the edges. */
+  body{
+    padding-top: max(24px, env(safe-area-inset-top));
+    padding-right: max(16px, env(safe-area-inset-right));
+    padding-bottom: max(60px, env(safe-area-inset-bottom));
+    padding-left: max(16px, env(safe-area-inset-left));
+    overscroll-behavior: none;
+  }
+
+  /* 24px checkbox alone is well under Apple's 44pt touch-target minimum —
+     make the whole row tappable and give the checkbox itself more room. */
+  .task.kiosk{ cursor: pointer; padding: 8px 4px; }
+  .task.kiosk input[type=checkbox]{ width: 32px; height: 32px; }
 </style>
 </head>
 <body>
@@ -0,0 +1,14 @@
+{
+  "name": "Kids Calendar",
+  "short_name": "Calendar",
+  "start_url": "/dashboard.html",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#F1F5FB",
+  "theme_color": "#4A90D9",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}
@@ -0,0 +1,41 @@
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('push', (event) => {
+  if (!event.data) return;
+  const payload = event.data.json();
+  event.waitUntil(
+    self.registration.showNotification(payload.title, {
+      body: payload.body,
+      icon: '/icons/icon-192.png',
+      badge: '/icons/icon-192.png',
+      tag: 'kc-task-done',
+      data: { url: payload.url || '/dashboard.html' },
+    })
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const targetUrl = event.notification.data && event.notification.data.url;
+  if (!targetUrl) return;
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
+      const existing = clients.find((c) => {
+        try {
+          return new URL(c.url).pathname === new URL(targetUrl, self.location.origin).pathname;
+        } catch {
+          return false;
+        }
+      });
+      if (existing) return existing.focus();
+      return self.clients.openWindow(targetUrl);
+    })
+  );
+});