Website in eine Progressive Web App umwandeln

Website in eine PWA umwandeln (mit getestetem Code) | We.Inc

Mach jede Website installierbar und offlinefähig: ein Manifest-Generator, ein getesteter Service Worker, ein Installieren-Button, die Grenzen auf dem iPhone und das Setup für Vite oder Next.js.

Website in eine Progressive Web App umwandeln

Um eine Website in eine Progressive Web App zu verwandeln, liefere sie über HTTPS aus, ergänze eine manifest.webmanifest mit Name, start_url, Anzeigemodus und Icons in 192 und 512 Pixeln, verlinke sie auf jeder Seite und registriere einen Service Worker, der Dateien für die Offline-Nutzung cacht. Chromium-Browser bieten dann die Installation an; Safari-Nutzer fügen sie über Teilen hinzu.

Die drei Bestandteile einer PWA

Teil
Was er macht

Name, Icons, Farben und wie die App sich öffnet

Service Worker (sw.js)
Cacht Dateien, damit Seiten offline laden

HTTPS
Pflicht für Service Worker und Installation

Füll das Formular aus, um ein Manifest und die Head-Tags zum Einfügen zu erhalten, und kopiere dann den Service Worker und das Installationsskript. Den Worker auf dieser Seite haben wir vor der Veröffentlichung in einem echten Browser mit getrennter Netzwerkverbindung laufen lassen.

Erstelle Icons in 192 und 512 Pixeln, dazu eine maskierbare Version mit dem Logo innerhalb der mittleren 80 Prozent.
Erzeuge das Manifest mit dem Formular, speichere es als manifest.webmanifest im Stammverzeichnis der Website und füge die Head-Tags in jede Seite ein.
Speichere sw.js, offline.html und das Registrierungsskript und trage deine wichtigsten Dateien in PRECACHE ein.
Öffne die Chrome DevTools, Bereich Application: Prüfe unter Manifest auf Installationsprobleme und unter Service workers den laufenden Worker. Setz den Haken bei Offline und lade neu, um zu testen.
Wenn du gecachte Dateien änderst, erhöhe VERSION, damit wiederkehrende Besucher die neuen bekommen.

Liefere sw.js aus dem Stammverzeichnis der Website aus. Ein Worker steuert nur Seiten in seinem eigenen Ordner oder darunter.
Cache sw.js selbst nicht mit langen HTTP-Cache-Headern; Browser prüfen die Datei auf Updates.
Halte die Precache-Liste kurz. Alles darin wird beim ersten Besuch heruntergeladen.
Sag Menschen auf dem iPhone, wie sie installieren: Teilen, dann Zum Home-Bildschirm. Es gibt keine Aufforderung, die du auslösen könntest.
Teste offline, indem du zusätzlich zur Offline-Checkbox deinen lokalen Server stoppst, damit auch die eigenen Requests des Workers scheitern.

Häufige Fragen

Braucht eine PWA einen Service Worker, um installierbar zu sein?

Im aktuellen Chrome nicht: Ein gültiges Manifest, HTTPS und etwas Nutzerinteraktion reichen für die Installationsoption. Einen Worker willst du trotzdem, denn ohne ihn zeigt die installierte App offline die Fehlerseite des Browsers.

Funktionieren PWAs auf dem iPhone?

Ja, mit Einschränkungen. Safari-Nutzer installieren über das Teilen-Menü, es gibt kein Event für eine Installationsaufforderung, und Push-Benachrichtigungen funktionieren nur für eine Website, die unter iOS 16.4 oder neuer zum Home-Bildschirm hinzugefügt wurde. Offline-Caching funktioniert.

Warum erscheint mein Installieren-Button nie?

beforeinstallprompt wird nur in Chromium-Browsern ausgelöst, nur wenn die Installationskriterien erfüllt sind, und nicht, wenn die App bereits installiert ist. Den Grund findest du im Abschnitt Manifest des DevTools-Bereichs Application.

Wie prüfe ich eine PWA, jetzt da Lighthouse keine PWA-Bewertung mehr hat?

Lighthouse 12 hat die PWA-Kategorie gestrichen. Nutze den Bereich Application in den Chrome DevTools: Die Ansicht Manifest listet Installationsfehler und Icon-Probleme auf, und die Ansicht Service workers zeigt Registrierung, Updates und einen Offline-Schalter.

Wie aktualisiere ich eine PWA nach einem Release?

Ändere die Cache-VERSION in sw.js. Der Browser erkennt den geänderten Worker, installiert ihn, und der activate-Schritt entfernt die alten Caches. Mit skipWaiting und clients.claim übernimmt der neue Worker beim nächsten Laden.

Cache-first oder Network-first

Cache-first antwortet aus dem Cache und geht nur für Dinge ins Netzwerk, die noch nicht gespeichert sind. Das ist schnell und richtig für Dateien, deren Inhalt sich unter demselben Namen nie ändert, etwa gehashte Skripte, Schriften und Icons.
Network-first fragt den Server und nutzt den Cache nur, wenn das fehlschlägt. Das passt zu HTML-Seiten, bei denen eine alte Kopie nach einem Update Menschen verwirren würde. Der Worker oben nutzt beides: Network-first beim Laden von Seiten, Cache-first für alles andere.

Häufige Fehler

Den Worker aus einem Unterordner wie /js/sw.js zu registrieren, was ihn auf Seiten unter /js/ beschränkt.
Zu vergessen, VERSION zu ändern, sodass wiederkehrende Besucher wochenlang altes CSS und alte Skripte behalten.
Antworten von anderen Websites oder Fehlerantworten zu cachen. Der Worker oben überspringt Cross-Origin-Requests und speichert nur erfolgreiche Antworten für Assets.
Nur in Chrome zu testen. Öffne die Website auf einem iPhone, um zu sehen, was Safari-Nutzer tatsächlich bekommen.

Was du bekommst und die Grenzen auf dem iPhone

Durch die Installation bekommt deine Website ein eigenes Icon und ein Fenster ohne Adressleiste. Ein Service Worker ergänzt Offline-Seiten. Push braucht beides, und Apple erlaubt es nur für Websites, die der Nutzer zum Home-Bildschirm hinzugefügt hat.

Was eine PWA kann, nach Plattform

Funktion
Chrome / Edge (Desktop, Android)
Safari auf iPhone und iPad
Firefox

Auf Home-Bildschirm oder Desktop installieren
Ja, mit Installationsaufforderung
Ja, von Hand: Teilen, dann Zum Home-Bildschirm
Android: ja. Desktop: eingeschränkt, prüfe deine Version

Eigener Installieren-Button (beforeinstallprompt)
Ja
Nein
Nein

Offline mit einem Service Worker
Ja
Ja
Ja

Web-Push-Benachrichtigungen
Ja
Nur für eine Website auf dem Home-Bildschirm, iOS 16.4 oder neuer
Ja

Dauerhafter Speicher
Ja, kann bei Platzmangel geräumt werden
In Safari-Tabs kann per Skript geschriebener Speicher nach 7 Tagen Browsernutzung ohne Besuch gelöscht werden; Apps auf dem Home-Bildschirm haben ihre eigene Zählung
Ja, kann bei Platzmangel geräumt werden

Hintergrundsynchronisierung
Ja
Nein
Nein

Ein funktionierender Service Worker

Drei Dateien machen eine Website offlinefähig: der Worker, eine Fallback-Seite und ein paar Zeilen, um ihn zu registrieren. Wir haben genau diese Dateien auf localhost in Chromium laufen lassen: Der Worker wurde installiert, der Cache gefüllt, und mit gestopptem Server lud die Startseite aus dem Cache, während eine nie besuchte Seite offline.html zeigte.

sw.js: ein minimaler Service Worker, der offline funktioniert

Seiten versuchen zuerst das Netzwerk, damit Menschen frische Inhalte sehen, greifen dann auf eine gecachte Kopie zurück und zuletzt auf offline.html. Dateien wie CSS, Skripte und Icons kommen zuerst aus dem Cache. Wenn du VERSION änderst, löscht der nächste activate-Schritt die alten Caches.

offline.html: die Fallback-Seite

Halte sie in sich geschlossen: Inline-Styles und keine externen Dateien, denn wenn sie angezeigt wird, ist vielleicht nichts anderes erreichbar.

Ein Installieren-Button

app.js: den Worker registrieren und einen Installieren-Button zeigen

Das Event beforeinstallprompt wird nur in Chromium-Browsern ausgelöst (Chrome, Edge, Samsung Internet, Opera). Safari und Firefox senden es nie, daher bleibt der Button dort verborgen, und Menschen nutzen stattdessen das Menü des Browsers.

Installationskriterien heute

Chrome besteht nicht mehr auf einem Service Worker, bevor es die Installation anbietet; geprüft werden das Manifest und die Punkte unten. Lighthouse 12 hat seine PWA-Kategorie entfernt, prüfe die Installierbarkeit also stattdessen in den Chrome DevTools: Bereich Application, dann Manifest, wo alle Probleme unter Installability aufgelistet sind.

Installationsanforderungen von Chrome

Anforderung
Detail

HTTPS
Sicher ausgeliefert. localhost gilt zum Testen als sicher.

Name im Manifest
name oder short_name

Icons im Manifest
Mindestens ein Icon mit 192 px und eines mit 512 px

Im Manifest vorhanden

fullscreen, standalone, minimal-ui oder window-controls-overlay

Fehlt oder false

Interaktion
Der Besucher hat mindestens einmal auf die Seite geklickt oder getippt und etwas Zeit darauf verbracht

Setups für Vite und Next.js

Vite: vite-plugin-pwa

Installiere mit npm i -D vite-plugin-pwa. Das Plugin schreibt das Manifest und erzeugt beim Build einen Workbox-Service-Worker, sodass du sw.js nicht von Hand schreibst. Leg die Icons in public/ ab.

Next.js App Router: app/manifest.ts

Next.js liefert diese Datei unter /manifest.webmanifest aus und fügt das Link-Tag für dich hinzu. Für Offline-Unterstützung legst du die sw.js von oben in public/ ab und registrierst sie aus einer kleinen Client-Komponente.

Next.js: public/sw.js aus einer Client-Komponente registrieren

Rendere sie einmal in app/layout.tsx. Überspringe die Registrierung in der Entwicklung, damit ein gecachter Build deine Änderungen nicht verdeckt.

App-Name

Kurzname (unter dem Icon)

Start-URL

Icon-Ordner

Designfarbe

Hintergrundfarbe

Kopieren

Manifest-Generator

Maskierbares Icon einschließen

Speichere deine Icons als icon-192.png und icon-512.png (und icon-512-maskable.png) im Icon-Ordner.

Website in eine Progressive Web App umwandeln

Website in eine PWA umwandeln (mit getestetem Code) | We.Inc