Progressive Web-App (PWA)

Eine Progressive Web App (PWA) ist eine Webanwendung, die es Ihnen ermöglicht, Benutzern auf Mobilgeräten ein natives, App-ähnliches Erlebnis zu bieten, sodass sie schnell, reibungslos und auf ansprechende Weise auf Ihre Website zugreifen können.

PWAs werden sofort geladen, reagieren schnell auf Benutzerinteraktionen und fühlen sich wie eine gewöhnliche App an. Sie benötigen keinen App Store für die Installation und ermöglichen es den Benutzern, die Website sofort wieder zu betreten, selbst wenn ein Gerät offline ist.

Hinweis:

  • PWAs können nur auf der HTTPS-Website aktiviert werden.Weitere Informationen finden Sie unter SSLs (HTTPS)HTTPs).

  • PWAs werden auf Chrome für Android unterstützt. Wenn PWA aktiviert ist, fragt der Browser den Benutzer automatisch, ob er die Website zum Startbildschirm hinzufügen möchte.

  • Sie können PWA auch auf IOS-Geräten mit Version 11.3 hinzufügen. Da die automatische Meldung „Zum Bildschirm hinzufügen“ des Browsers jedoch noch nicht verfügbar ist, müssen Benutzer PWA manuell hinzufügen. Weitere Informationen dazu finden Sie beim Apple-Support.

So aktivieren sie die PWA-Funktion:

  1. Klicken Sie im linken Bereich auf SEO & Einstellungen und dann auf Progressive Web App (PWA).

  2. Klicken Sie auf den Schalter Progressive Web App aktivieren .

  3. (Fakultativ) Klicken Sie auf den Schalter Seitenmarkup aus Cache zuerst bereitstellen . Diese Einstellungen ändern unsere Service Worker Caching-Strategie (für die Runtime Website); Anstatt zuerst das Netzwerk einzuchecken, wird die Seite zuerst aus dem Cache abgerufen (solange sie nicht erneut veröffentlicht wird). Cache zuerst (einschalten) kann am besten sein, wenn Sie wissen, dass sich die Website und ihre Assets nicht wesentlich ändern werden, da sie die zwischengespeicherten Informationen schnell laden und den Kunden leichter offline zur Verfügung stehen. Die Verwendung von network first (wenn dieser Schalter deaktiviert ist) ist am besten, wenn die Daten so aktuell wie möglich sein müssen.

  4. (Fakultativ) Klicken Sie auf die Aufforderung "Mobile Browser aktivieren", um die Website als App zu installieren. Wenn diese Option aktiviert ist, können Sie die folgenden Einstellungen konfigurieren:

    • Name. Dies ist der Name, der auf dem Begrüßungsbildschirm und der Meldung "Zum Startbildschirm hinzufügen" angezeigt wird. Es kann bis zu 60 Zeichen lang sein.

    • Kurzname. Dies ist der Name, der verwendet wird, wenn nicht genügend Platz vorhanden ist, um den vollständigen Namen anzuzeigen. Zum Beispiel auf dem mobilen Homescreen. Dieser Name kann bis zu 60 Zeichen lang sein, aber wir empfehlen Ihnen, ihn so kurz wie möglich zu halten.

    • Symbol. Dies ist das Symbol, das auf dem mobilen Startbildschirm und dem Begrüßungsbildschirm angezeigt wird, wenn die App geladen wird. Er muss mindestens 192 Pixel breit sein und in .png Format.

    • Hintergrundfarbe des Begrüßungsbildschirms. Dies ist die Farbe, die angezeigt wird, während die Website geladen wird.

Wenn ein Benutzer von seinem Mobilgerät aus auf eine mit PWA aktivierte Website zugreift, wird unterhalb der Website ein „Zum Startbildschirm hinzufügen“-Button angezeigt. Nach dem Hinzufügen zum Startbildschirm wird das Icon auf ihrem Gerät angezeigt, um einen schnellen Zugriff auf die Website zu ermöglichen (ähnlich wie bei einer App).

Der Benutzer kann nun über dieses Icon erneut auf die Website zugreifen, auch wenn das Gerät offline ist.

24517246525719-pwa_4screens.gif