Progressive Web-App (PWA)

Eine Progressive Web-App (PWA) ist eine Webanwendung, die deinen Besuchern auf dem Mobilgerät ein Erlebnis wie in einer nativen App bietet: Deine Website wirkt schnell, flüssig und ansprechend.

PWAs öffnen sich sofort, reagieren schnell auf Eingaben und fühlen sich wie eine echte App an. Besucher installieren sie ohne App Store und können die Website sogar dann sofort wieder öffnen, wenn das Gerät offline ist.

Hinweis:

• PWAs können nur auf HTTPS-Websites aktiviert werden. Weitere Informationen findest du unter SSL-Zertifikat.
• PWAs werden in Chrome für Android unterstützt. Ist die PWA aktiviert, fragt der Browser den Besucher automatisch, ob er die Website zum Startbildschirm hinzufügen möchte.
• Du kannst eine PWA auch auf iOS-Geräten mit Version 11.3 hinzufügen. Da die automatische Meldung „Zum Startbildschirm hinzufügen" des Browsers dort aber noch nicht verfügbar ist, müssen Besucher die PWA manuell hinzufügen. Weitere Informationen dazu findest du beim Apple Support.

PWA-Funktion aktivieren

So aktivierst du die PWA-Funktion:

1. Klicke im Seitenpanel auf Mehr und dann auf Einstellungen.
2. Klicke auf Progressive Web-App (PWA).
3. Klicke auf den Schalter Activate Progressive Web App.
4. (Optional) Klicke auf den Schalter Seiten-Markup zunächst aus dem Cache bereitstellen. Diese Einstellung ändert die Caching-Strategie unseres Service Workers (bei Runtime-Websites): Statt zuerst im Netzwerk zu prüfen, wird die Seite zuerst aus dem Cache geladen (solange sie nicht erneut veröffentlicht wurde). „Cache first" (Schalter an) ist ideal, wenn du weißt, dass sich die Website und ihre Inhalte kaum ändern, denn die zwischengespeicherten Informationen sind schnell geladen und stehen offline leichter zur Verfügung. „Network first" (Schalter aus) ist am besten, wenn die Daten so aktuell wie möglich sein müssen.
5. (Optional) Klicke auf den Schalter Mobilbrowser so einstellen, dass sie den Nutzer auffordern, die Website als App zu installieren. Wenn er aktiviert ist, kannst du die folgenden Einstellungen konfigurieren:
   • Name. Dieser Name wird auf dem Splash-Screen und in der Meldung „Zum Startbildschirm hinzufügen" angezeigt. Er darf bis zu 60 Zeichen lang sein.
   • Kurzer Name. Dieser Name wird verwendet, wenn nicht genug Platz für den vollständigen Namen ist, zum Beispiel auf dem mobilen Startbildschirm. Er darf bis zu 60 Zeichen lang sein, wir empfehlen aber, ihn so kurz wie möglich zu halten.
   • Symbol. Dieses Symbol erscheint auf dem mobilen Startbildschirm und auf dem Splash-Screen, während die App geladen wird. Es muss mindestens 192 Pixel breit sein und im Format .png vorliegen.
   • Hintergrundfarbe des Startbildschirms. Dies ist die Farbe, die angezeigt wird, während die Website geladen wird.

Ruft ein Besucher eine Website mit aktivierter PWA auf seinem Mobilgerät auf, sieht er unterhalb der Website die Schaltfläche Zum Startbildschirm hinzufügen. Nach dem Hinzufügen erscheint das Symbol auf dem Startbildschirm seines Geräts, und die Website ist darüber so schnell erreichbar wie eine App.

Über dieses Symbol öffnet der Besucher die Website jederzeit wieder, auch wenn das Gerät offline ist.