Verbindungsmeldung und Offline-Grundlage #2

Closed
opened 2026-10-07 22:22:35 +02:00 by lena · 3 comments
Collaborator

Ziel

In MVP-1 braucht die App eine Verbindung zum Server. Fehlt sie, soll das nie
überraschen: Eine gut sichtbare Meldung sagt, was gerade nicht geht. Zugleich
wird die technische Grundlage so gelegt, dass „Kochen ohne Internet“ in MVP-2
ohne Umbau dazukommt (Prinzip 3b).

Grundlage

PRD Kapitel 03 (Prinzip 3b), 10 (Verbindung und Offline), 18 (Verbindung und
Offline, Plattform), 19 (Punkt 12); CLAUDE.md „Technik-Stapel“ und
„Offline-fähig von Anfang an“

Abhängig von

#1

Akzeptanzkriterien

Meldung bei fehlender Verbindung

  • AK-1: Ist das Gerät offline oder der Server nicht erreichbar, erscheint
    innerhalb weniger Sekunden eine gut sichtbare Meldung, die auf jeder Seite
    stehen bleibt, solange die Verbindung fehlt.
  • AK-2: Die Meldung sagt in Alltagssprache, was gerade nicht möglich ist
    (z. B. „Keine Verbindung – Rezepte können gerade nicht geladen werden.
    Neue Rezepte werden gespeichert und später hochgeladen.“).
  • AK-3: Kommt die Verbindung zurück, verschwindet die Meldung von selbst,
    ohne dass die Seite neu geladen werden muss.
  • AK-4: Eine Aktion, die wegen fehlender Verbindung scheitert (z. B.
    Haus-Liste ändern), geht nicht still verloren: Entweder wird sie für später
    vorgemerkt, oder die App sagt deutlich, dass sie nicht ausgeführt wurde.
  • AK-5: Ausnahme Erfassung: Neue Rezepte können auch ohne Verbindung
    erfasst werden (Upload-Warteschlange, siehe #4).

Installierbare Web-App

  • AK-6: Die App lässt sich auf iPhone und Android zum Home-Bildschirm
    hinzufügen und öffnet sich dann ohne Browserleiste.
  • AK-7: Die installierte App startet auch ohne Verbindung und zeigt dann
    die Meldung aus AK-1 statt einer leeren oder fehlerhaften Seite.

Grundlage für MVP-2 (technisch prüfbar)

  • AK-8: Alle Änderungen der Oberfläche laufen über die einheitliche Form
    POST /api/<Aktionsname> mit Idempotency-Key, wie in Checkly. Dieselbe
    Aktion zweimal mit demselben Schlüssel gesendet wird auf dem Server nur
    einmal ausgeführt (automatischer Test).
  • AK-9: Die Offline-Bausteine aus Checkly (ReactUi/src/offline/:
    Verbindungserkennung, Speicher im Browser, Warteschlange) sind übernommen.
    In MVP-1 sind sie nur für die Upload-Warteschlange aktiv.

Nicht in dieser Stufe

  • Rezepte, Haus-Liste und Kochmodus ohne Verbindung nutzen (MVP-2)
  • Hinweis „Für Kochen ohne Internet: zum Home-Bildschirm hinzufügen“ und
    „Offline verfügbar: x Rezepte“ (MVP-2)

Offene Fragen

– keine

## Ziel In MVP-1 braucht die App eine Verbindung zum Server. Fehlt sie, soll das nie überraschen: Eine gut sichtbare Meldung sagt, was gerade nicht geht. Zugleich wird die technische Grundlage so gelegt, dass „Kochen ohne Internet“ in MVP-2 ohne Umbau dazukommt (Prinzip 3b). ## Grundlage PRD Kapitel 03 (Prinzip 3b), 10 (Verbindung und Offline), 18 (Verbindung und Offline, Plattform), 19 (Punkt 12); CLAUDE.md „Technik-Stapel“ und „Offline-fähig von Anfang an“ ## Abhängig von #1 ## Akzeptanzkriterien ### Meldung bei fehlender Verbindung - **AK-1:** Ist das Gerät offline oder der Server nicht erreichbar, erscheint innerhalb weniger Sekunden eine gut sichtbare Meldung, die auf jeder Seite stehen bleibt, solange die Verbindung fehlt. - **AK-2:** Die Meldung sagt in Alltagssprache, was gerade nicht möglich ist (z. B. „Keine Verbindung – Rezepte können gerade nicht geladen werden. Neue Rezepte werden gespeichert und später hochgeladen.“). - **AK-3:** Kommt die Verbindung zurück, verschwindet die Meldung von selbst, ohne dass die Seite neu geladen werden muss. - **AK-4:** Eine Aktion, die wegen fehlender Verbindung scheitert (z. B. Haus-Liste ändern), geht nicht still verloren: Entweder wird sie für später vorgemerkt, oder die App sagt deutlich, dass sie nicht ausgeführt wurde. - **AK-5:** Ausnahme Erfassung: Neue Rezepte können auch ohne Verbindung erfasst werden (Upload-Warteschlange, siehe #4). ### Installierbare Web-App - **AK-6:** Die App lässt sich auf iPhone und Android zum Home-Bildschirm hinzufügen und öffnet sich dann ohne Browserleiste. - **AK-7:** Die installierte App startet auch ohne Verbindung und zeigt dann die Meldung aus AK-1 statt einer leeren oder fehlerhaften Seite. ### Grundlage für MVP-2 (technisch prüfbar) - **AK-8:** Alle Änderungen der Oberfläche laufen über die einheitliche Form `POST /api/<Aktionsname>` mit `Idempotency-Key`, wie in Checkly. Dieselbe Aktion zweimal mit demselben Schlüssel gesendet wird auf dem Server nur einmal ausgeführt (automatischer Test). - **AK-9:** Die Offline-Bausteine aus Checkly (`ReactUi/src/offline/`: Verbindungserkennung, Speicher im Browser, Warteschlange) sind übernommen. In MVP-1 sind sie nur für die Upload-Warteschlange aktiv. ## Nicht in dieser Stufe - Rezepte, Haus-Liste und Kochmodus ohne Verbindung nutzen (MVP-2) - Hinweis „Für Kochen ohne Internet: zum Home-Bildschirm hinzufügen“ und „Offline verfügbar: x Rezepte“ (MVP-2) ## Offene Fragen – keine
Author
Collaborator

Lena hat die Kriterien am 07.10.2026 freigegeben (keine offenen Fragen). status/entwurf entfernt - das Issue ist bereit zum Bau.

Lena hat die Kriterien am 07.10.2026 freigegeben (keine offenen Fragen). status/entwurf entfernt - das Issue ist bereit zum Bau.
lena self-assigned this 2026-10-08 10:30:53 +02:00
Author
Collaborator

Claimed by session "Go [7041ff]"

Claimed by session "Go [7041ff]"
Author
Collaborator

Fertig (Session "Go [7041ff]").

Was gebaut wurde

  • Verbindungsmeldung (AK-1 bis AK-3): Fehlt das Internet oder antwortet der Server nicht, steht oben auf jeder Seite (auch auf der Anmeldeseite) eine Meldung in Alltagssprache: was gerade nicht geht, und ob noch Aenderungen warten. Ein Server-Ausfall wird auch bemerkt, wenn niemand klickt (kurze Nachfrage alle 15 Sekunden, waehrend des Ausfalls alle 5). Kommt die Verbindung zurueck, verschwindet die Meldung von selbst, und die Seite holt den aktuellen Stand.
  • Nichts geht still verloren (AK-4): Scheitert eine Aenderung an der Verbindung, sagt die App deutlich, dass sie nicht gespeichert wurde. Lehnt der Server eine vorgemerkte Aenderung spaeter endgueltig ab, erscheint eine Meldung, die stehen bleibt.
  • Installierbare App (AK-6, AK-7): eigenes Symbol, Manifest und Service Worker. Auf dem Home-Bildschirm oeffnet sich die App ohne Browserleiste und startet auch ohne Verbindung - mit dem zuletzt gewaehlten Namen und der Meldung statt einer leeren Seite. Gibt es eine neue Fassung, bietet die App "Neu laden" an.
  • Grundlage fuer MVP-2 (AK-8, AK-9): Jede Aenderung traegt einen zufaelligen Schluessel; der Server fuehrt dieselbe Aenderung nur einmal aus, auch wenn sie doppelt oder gleichzeitig ankommt. Checklys Offline-Bausteine sind uebernommen (Verbindungserkennung, Speicher im Browser, Warteschlange mit Wiederholung).
  • AK-5 (Rezepte ohne Verbindung erfassen) ist vorbereitet: Die Warteschlange ist da, die Aktionen dafuer traegt #4 ein (Hinweise dort als Kommentar).

Wie getestet

  • 48 Server-Tests (8 neue, u. a. fuenf gleichzeitige gleiche Anfragen ergeben nur einen Eintrag), 42 Oberflaechen-Tests.
  • Von Hand im Test-Container: Server gestoppt, Meldung nach etwa 15 Sekunden; Server gestartet, Meldung verschwindet ohne Neuladen; auch auf Handy-Breite.
  • Sicherheitspruefung ohne schwere Funde; behoben: offene Datenbank-Verbindung nach einem Fehler beim Speichern, Wettlauf bei gleichzeitig doppelt gesendeten Aenderungen.

Wichtige Entscheidungen

  • Speicher im Browser wie bei Checkly in localStorage; fuer Fotos (#4) wird vermutlich IndexedDB noetig.
  • Die App merkt sich auf dem Geraet nur "angemeldet" und den gewaehlten Namen, keine Rezepte. Ob das Geraet wirklich angemeldet ist, entscheidet weiter der Server.

So probierst du es aus

  1. Test-Container starten (Befehl in CLAUDE.md), http://localhost:8090 oeffnen und anmelden.
  2. Im Ordner Kochbuch docker compose -p kochbuch-test -f docker-compose.test.yml stop app ausfuehren: Nach spaetestens 15 Sekunden erscheint oben die Meldung.
  3. Mit ... start app wieder starten: Die Meldung verschwindet von selbst.
  4. Auf dem Handy (sobald die App auf dem Server laeuft, #18): Teilen-Menue, "Zum Home-Bildschirm". Danach Flugmodus an und die App oeffnen - sie startet mit der Meldung.

Bekannte Luecken

  • Den Service Worker konnte ich nur bis zur Datei pruefen; das eingebaute Browserfenster von Claude laesst keine Service Worker zu. Er ist bis auf Namen identisch mit Checklys erprobter Fassung. Echte Pruefung auf dem Handy, sobald #18 erledigt ist.
  • Im Test-Container ist man nach jedem Neubau abgemeldet (es fehlt der feste Schluessel DATA_PROTECTION_KEY, kommt mit #18).
Fertig (Session "Go [7041ff]"). **Was gebaut wurde** - **Verbindungsmeldung (AK-1 bis AK-3):** Fehlt das Internet oder antwortet der Server nicht, steht oben auf jeder Seite (auch auf der Anmeldeseite) eine Meldung in Alltagssprache: was gerade nicht geht, und ob noch Aenderungen warten. Ein Server-Ausfall wird auch bemerkt, wenn niemand klickt (kurze Nachfrage alle 15 Sekunden, waehrend des Ausfalls alle 5). Kommt die Verbindung zurueck, verschwindet die Meldung von selbst, und die Seite holt den aktuellen Stand. - **Nichts geht still verloren (AK-4):** Scheitert eine Aenderung an der Verbindung, sagt die App deutlich, dass sie nicht gespeichert wurde. Lehnt der Server eine vorgemerkte Aenderung spaeter endgueltig ab, erscheint eine Meldung, die stehen bleibt. - **Installierbare App (AK-6, AK-7):** eigenes Symbol, Manifest und Service Worker. Auf dem Home-Bildschirm oeffnet sich die App ohne Browserleiste und startet auch ohne Verbindung - mit dem zuletzt gewaehlten Namen und der Meldung statt einer leeren Seite. Gibt es eine neue Fassung, bietet die App "Neu laden" an. - **Grundlage fuer MVP-2 (AK-8, AK-9):** Jede Aenderung traegt einen zufaelligen Schluessel; der Server fuehrt dieselbe Aenderung nur einmal aus, auch wenn sie doppelt oder gleichzeitig ankommt. Checklys Offline-Bausteine sind uebernommen (Verbindungserkennung, Speicher im Browser, Warteschlange mit Wiederholung). - **AK-5** (Rezepte ohne Verbindung erfassen) ist vorbereitet: Die Warteschlange ist da, die Aktionen dafuer traegt #4 ein (Hinweise dort als Kommentar). **Wie getestet** - 48 Server-Tests (8 neue, u. a. fuenf gleichzeitige gleiche Anfragen ergeben nur einen Eintrag), 42 Oberflaechen-Tests. - Von Hand im Test-Container: Server gestoppt, Meldung nach etwa 15 Sekunden; Server gestartet, Meldung verschwindet ohne Neuladen; auch auf Handy-Breite. - Sicherheitspruefung ohne schwere Funde; behoben: offene Datenbank-Verbindung nach einem Fehler beim Speichern, Wettlauf bei gleichzeitig doppelt gesendeten Aenderungen. **Wichtige Entscheidungen** - Speicher im Browser wie bei Checkly in localStorage; fuer Fotos (#4) wird vermutlich IndexedDB noetig. - Die App merkt sich auf dem Geraet nur "angemeldet" und den gewaehlten Namen, keine Rezepte. Ob das Geraet wirklich angemeldet ist, entscheidet weiter der Server. **So probierst du es aus** 1. Test-Container starten (Befehl in CLAUDE.md), http://localhost:8090 oeffnen und anmelden. 2. Im Ordner Kochbuch `docker compose -p kochbuch-test -f docker-compose.test.yml stop app` ausfuehren: Nach spaetestens 15 Sekunden erscheint oben die Meldung. 3. Mit `... start app` wieder starten: Die Meldung verschwindet von selbst. 4. Auf dem Handy (sobald die App auf dem Server laeuft, #18): Teilen-Menue, "Zum Home-Bildschirm". Danach Flugmodus an und die App oeffnen - sie startet mit der Meldung. **Bekannte Luecken** - Den Service Worker konnte ich nur bis zur Datei pruefen; das eingebaute Browserfenster von Claude laesst keine Service Worker zu. Er ist bis auf Namen identisch mit Checklys erprobter Fassung. Echte Pruefung auf dem Handy, sobald #18 erledigt ist. - Im Test-Container ist man nach jedem Neubau abgemeldet (es fehlt der feste Schluessel `DATA_PROTECTION_KEY`, kommt mit #18).
lena 2026-10-08 11:01:23 +02:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
robert/rezeptbuch#2
No description provided.