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.
This commit is contained in:
+1
-1
@@ -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();
|
||||
}
|
||||
Reference in New Issue
Block a user