Zum Inhalt

Frontend-Integration und Alert-Einstellungsseite

ID: PA-005 · Service: push-alerts · Status: 🟢 aktiv · Use Case: UC-PA-001, UC-PA-002, UC-PA-003, UC-PA-004, UC-PA-006, UC-PA-007

Der Push-Alert-Service wird als neue Seite "Alerts" in der bestehenden Frontend-App integriert. Kein eigener Frontend-Container. Der Service Worker wird einmalig in der PWA registriert und läuft unabhängig von der geöffneten Seite.

Typ

functional

Service Worker

Datei: public/sw.js

Registrierung: in main.jsx oder App.jsx beim App-Start

Events

Push

Beschreibung: Empfang und Anzeige der Push-Nachricht

Payload Format
Feld Wert
Titel string
Body string
Url string (optional, Ziel beim Klick)
Icon string (optional, URL zum App-Icon)
Badge string (optional)

Aktion: self.registration.showNotification(title, { body, icon, data: { url } })

Notificationclick

Feld Wert
Beschreibung Benutzer klickt auf die Benachrichtigung
Aktion Öffne oder fokussiere PWA-Tab, navigiere zu data.url (falls gesetzt, sonst zu '/')
Feld Wert
Eintrag "Alerts" in der bestehenden Seitennavigation
Icon Glocke (🔔)

Seiten Struktur

Abschnitt Subscription

Titel: Push-Benachrichtigungen

Inhalt

Eintrag 1
Feld Wert
Status aktiv / nicht aktiv (pro Gerät)
Eintrag 2
Feld Wert
Button Aktivieren / Deaktivieren
  • Liste registrierter Geräte mit Deaktivieren-Option

Abschnitt Automatische Alerts

Titel: Automatische Alerts

Inhalt

  • Liste der verfügbaren Trigger (aus GET /api/alerts/triggers)
  • Toggle pro Trigger (aktiv / inaktiv)
  • Kurzbeschreibung des Triggers

Abschnitt Reminder

Titel: Erinnerungen

Inhalt

Eintrag 1
Feld Wert
Button Neue Erinnerung
Eintrag 2
Feld Wert
Formular Titel, Text, Datum, Uhrzeit, Link
  • Liste offener Reminder (zukünftige, noch nicht gesendet)
  • Löschen-Button pro Reminder

Abschnitt Verlauf

Titel: Verlauf (letzte 30 Tage)

Inhalt

  • Liste der gesendeten / fehlgeschlagenen Alerts
  • Status-Badge, Titel, Zeitstempel
  • Fehlermeldung bei failed (aufklappbar)

Notification Payload

Format: JSON (serialisiert als Push-Message-Data)

Felder

Feld Wert
Titel string (Pflicht)
Body string (optional)
Url string (optional, relativ: z.B. "/lunch")
Icon string (optional, default: /icons/icon-192.png)

Beispiel

{ "title": "🍽️ Mittagessen fehlt – Arnold", "body": "Für Arnold sind in 2+ Wochen keine Bestellungen vorhanden.", "url": "/lunch", "icon": "/icons/icon-192.png" }

Pwa Requirements

Feld Wert
Manifest icons/icon-192.png und icons/icon-512.png vorhanden (für Badge/Icon)
Https Pflicht für Push API (bereits erfüllt über Cloudflare Tunnel)

Abnahmekriterien

  • [ ] Service Worker wird beim App-Start registriert (keine Aktion des Benutzers nötig)
  • [ ] Berechtigungsabfrage erscheint nur auf expliziten Benutzer-Klick
  • [ ] Push-Nachrichten erscheinen auch wenn die PWA geschlossen ist
  • [ ] Klick auf Benachrichtigung öffnet / fokussiert die PWA und navigiert zur Ziel-URL
  • [ ] Alert-Seite ist über die bestehende Navigation erreichbar
  • [ ] Alle Einstellungen sind in einer Seite gebündelt

Depends On

  • PA-001
  • PA-002
  • PA-003
  • PA-004
  • PLATFORM-001
  • PWA_001

Changelog

Eintrag 1

Version: 1.0

Changes: Initiale Version