pwa-baukasten
Aus einer Webseite eine App machen, Baustein für Baustein.
- Ohne Store: eine PWA läuft auf dem Handy wie eine installierte App und am Rechner im Browser, mit einer einzigen Codebasis.
- Mit Vorlagen: Manifest, Service Worker, Push-Meldungen und Update-Weg als fertige Bausteine.
- Ehrlich: sagt bei jedem Baustein, was geprüft ist und was nur am echten Handy gegengetestet werden kann.
Führt durch Vorfragen, Mindestbedingungen, Installation, Push, Updates und Sicherheit. Schreibt Code-Vorschläge, startet aber nichts von allein: Abnahme und Test am Gerät bleiben bei Ihnen.
Kostenfrei. Geprüft haben wir ihn in Claude Code, ChatGPT und Grok. In anderen KI-Werkzeugen sollte er auch laufen; dafür übernehmen wir aber keine Gewähr.
Was er macht
Vom ersten Gedanken bis zur installierten App.
- Erst die Vorfragen: Auf welchen Geräten läuft die App, braucht sie Push oder Offline-Betrieb, liegen sensible Daten auf dem Gerät, ist sie privat oder öffentlich. Er fragt, statt zu raten, und baut ein Feature nach dem anderen.
- Die Hülle: Manifest, Symbole und Service Worker, damit Android und der Rechner die Seite als App anbieten. Zwischenspeichern ist bewusst aus, weil es bei jeder Änderung alte Dateien festhält.
- Push-Meldungen: der ganze Weg von den Schlüsseln über das Abo bis zum Senden, mit streng begrenzten Auslösern, damit die Meldungen nicht nerven.
- Updates, die ankommen: ein Versionsanhang an den Dateiadressen und eine Selbst-Auffrischung, damit Nutzer nicht mit einer alten Fassung hängen bleiben.
- Bedienung am Handy: die Zurück-Taste, die die App nicht schließt, und Wischgesten, die nichts kaputt machen.
Worauf er achtet
Die Leitplanken, die ihn sicher machen.
- Nichts behaupten, was nicht geprüft ist: Aussagen über Browser, Push und iPhone gelten nur mit Stand und werden vor dem Einbau an der aktuellen Dokumentation geprüft. Was nicht getestet ist, steht als „nicht getestet“ im Ergebnis.
- Erst die Hülle, dann der Inhalt: fertig ist nichts, bevor es am echten Gerät lief. Ein Browser ohne Bildschirm prüft die Hülle, aber nicht Installation, Push und Zurück-Taste, und das sagt der Skill am Ende dazu.
- Geheimnisse bleiben draußen: Schlüssel und Passwörter gehören in Dateien außerhalb des Projekts mit engen Rechten, nie in den Code und nie in die Versionsverwaltung.
- Datenschutz: er nennt, was auf dem Gerät des Nutzers liegt, und verweist bei Auftragsverarbeitung und Einwilligungen an eine Fachperson. Keine Rechtsberatung.
- Nichts Fremdes öffnen: Zieladressen in Meldungen werden gegen die eigene Herkunft aufgelöst.
Ehrlich gesagt
Was getestet ist und was nicht.
- Getestet: der Code der Vorlagen ist auf Syntax geprüft, das Manifest ist gültig, der Service Worker registriert sich in einem echten Browser, der Versionsanhang funktioniert an einer Probeseite.
- Nicht getestet: der echte Versand von Push-Meldungen, die Zurück-Taste am Android-Handy, die Auslieferung hinter Passwortschutz und alles am iPhone. Diese Stellen sind in den Vorlagen so gekennzeichnet, damit Sie sie am Gerät nachziehen.
- Herkunft: der Skill ist aus einer echten App entstanden, die knapp vier Wochen lang gebaut, betrieben und getestet wurde.
Prüf-Protokoll
Das Ergebnis, offen gelegt.
Ein Siegel ist Sorgfalt, keine Garantie. Wir zeigen das Ergebnis als Ampel, nicht die Prüfmechanik dahinter. Die Verantwortung für den Einsatz bleibt bei Ihnen.
So laden Sie ihn ein
In vier Schritten einsatzbereit und aktuell.
Herunterladen
Das ZIP oben laden. Es enthält die SKILL.md und zwei Dateien mit Vorlagen.
Entpacken
Den Ordner pwa-baukasten in den Skills-Ordner Ihres Werkzeugs legen, z. B. .claude/skills/. Die Unterordner bleiben zusammen.
Loslegen
„Ich will aus meiner Webseite eine App fürs Handy machen" sagen. Der Skill greift automatisch und fragt zuerst.
Aktuell bleiben
Fragen Sie Ihre KI hin und wieder: „Prüfe pwa-baukasten gegen seine Quelle, aktualisiere ihn, wenn nötig." Der Verweis dazu steckt schon in der Datei.
Beispiel
So sieht das Ergebnis aus.
„Ich habe meine Web-App geändert, aber auf dem Handy sehe ich noch den alten Stand."
Er erklärt, warum alte Dateien hängen bleiben, und geht die Bausteine für Updates durch: Versionsanhang an den Dateiadressen, eine Startseite, die der Browser bei jedem Aufruf neu prüft, und die Selbst-Auffrischung in der App, die nur zuschlägt, wenn nichts Ungespeichertes offen ist. Dazu liefert er die passende Vorlage und sagt, welche Stellen Sie am echten Gerät prüfen müssen.