Installation

Sobald der Nutzer Ihre PWA installiert, geschieht Folgendes:

  • Sie haben ein Symbol im Launcher, auf dem Startbildschirm, im Startmenü oder auf der Startseite.
  • Die Suchergebnisse werden angezeigt, wenn ein Nutzer auf seinem Gerät nach der App sucht.
  • Verwenden Sie ein separates Fenster innerhalb des Betriebssystems.
  • Support für bestimmte Funktionen.

Installationskriterien

Jeder Browser hat ein Kriterium, das angibt, ob eine Website oder Web-App eine progressive Web-App ist und installiert werden kann. Die Metadaten für Ihre PWA werden durch eine JSON-basierte Datei festgelegt, die als Web App Manifest bezeichnet wird. Weitere Informationen dazu finden Sie im nächsten Modul.

Als Mindestanforderung für die Installierbarkeit verwenden die meisten Browser, die diese Funktion unterstützen, die Web-App-Manifest-Datei und bestimmte Eigenschaften wie den Namen der App und die Konfiguration der installierten App. Eine Ausnahme hiervon ist Safari für macOS, das keine Installierbarkeit unterstützt.

Die Anforderungen für die Installation unterscheiden sich je nach Browser. In diesem Artikel werden die Kriterien für Google Chrome erläutert und Links zu den Anforderungen für andere Browser aufgeführt.

Da der Test, ob eine PWA die Anforderungen an die Installierbarkeit erfüllt, einige Sekunden dauern kann, ist die Installierbarkeit selbst möglicherweise nicht verfügbar, sobald eine URL-Antwort eingeht.

Desktop-Installation

Die Desktop-PWA-Installation wird derzeit von Google Chrome und Microsoft Edge unter Linux, Windows, macOS und Chromebooks unterstützt. Bei diesen Browsern wird in der URL-Leiste ein Installationslogo (Symbol) angezeigt (siehe Abbildung unten), das darauf hinweist, dass die aktuelle Website installierbar ist.

Chrome und Edge auf Computern mit dem Installationslogo in der URL-Leiste

Wenn ein Nutzer mit einer Website interagiert, wird möglicherweise ein Pop-up wie das unten gezeigte angezeigt, mit dem Nutzer dazu aufgefordert werden, die Website als App zu installieren.

Produktinterne Google Chrome-Hilfe zum Vorschlagen der PWA-Installation.

Das Dropdown-Menü des Browsers enthält auch die Schaltfläche "Installieren ". das der Nutzer verwenden kann:

Menüelemente in Chrome und Edge für die PWA-Installation.

Auf Desktop-Betriebssystemen werden nur eigenständige und minimale Anzeigemodi unterstützt.

Auf Computern installierte PWAs:

  • Sie haben ein Symbol im Startmenü oder auf dem Startbildschirm auf Windows-PCs, im Dock oder Desktop in Linux-GUIs, im macOS-Launchpad oder im App Launcher eines Chromebooks.
  • Wenn die App aktiv ist, vor Kurzem verwendet wurde oder im Hintergrund geöffnet wird, wird im App-Schnellzugriff ein Symbol angezeigt.
  • Werden in der App-Suche angezeigt, z. B. unter Windows oder Spotlight unter macOS.
  • Sie können eine Badge-Nummer zu ihren Symbolen hinzufügen, um auf neue Benachrichtigungen hinzuweisen. Dies geschieht mit der Badging API.
  • Ein Kontextmenü für das Symbol kann über App-Verknüpfungen festgelegt werden.
  • Kann nicht zweimal mit demselben Browser installiert werden.

Nachdem sie eine App auf dem Desktop installiert haben, können Nutzer about:apps aufrufen, mit der rechten Maustaste auf eine PWA klicken und „App beim Anmelden starten“ auswählen ob deine App beim Start automatisch geöffnet werden soll.

Installation auf iOS- und iPadOS-Geräten

Unter iOS und iPadOS gibt es keine Browseraufforderung zur Installation der PWA. Auf diesen Plattformen werden PWAs auch als Web-Apps für den Startbildschirm bezeichnet. Diese Apps müssen manuell über ein Menü, das nur in Safari verfügbar ist, zum Startbildschirm hinzugefügt werden. Wir empfehlen, das apple-touch-icon-Tag in den HTML-Code einzufügen. Um das Symbol zu definieren, musst du den Pfad zu deinem Symbol in den HTML-Abschnitt <head> einfügen:

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari verwendet diese Informationen, um die Verknüpfung zu erstellen. Wenn Sie kein bestimmtes Symbol für Apple-Geräte angeben, wird als Symbol auf dem Startbildschirm ein Screenshot Ihrer PWA angezeigt, wenn der Nutzer sie installiert hat.

Beachten Sie, dass die PWA-Installation nur verfügbar ist, wenn der Nutzer Ihre Website über Safari aufruft. Andere im App Store verfügbare Browser wie Google Chrome, Firefox, Opera oder Microsoft Edge können keine PWA auf dem Startbildschirm installieren.

So fügen Sie dem Startbildschirm Apps hinzu:

  1. Öffnen Sie das Menü Freigeben (unten oder oben im Browser).
  2. Klicken Sie auf Zum Startbildschirm hinzufügen.
  3. Überprüfen Sie den Namen der App. der Name vom Nutzer bearbeitet werden kann.
  4. Klicken Sie auf Hinzufügen. Unter iOS und iPadOS sehen Lesezeichen für Websites und PWAs auf dem Startbildschirm gleich aus.

Unter iOS und iPadOS wird nur der eigenständige Anzeigemodus unterstützt. Wenn Sie also den minimalen UI-Modus verwenden, wird eine Browser-Verknüpfung verwendet: Wenn Sie den Vollbildmodus verwenden, wird die eigenständige Version verwendet.

Unter iOS und iPadOS sind PWAs installiert:

  • Werden auf dem Startbildschirm, in der Suche von Spotlight, in den Siri-Vorschlägen und in der Suche in der App-Bibliothek angezeigt.
  • Werden nicht in den Kategorienordnern der App Gallery angezeigt.
  • Funktionen wie Kennzeichen und App-Verknüpfungen werden nicht unterstützt.

Safari verwendet übrigens eine native Technologie namens Web-Clips, um die PWA-Symbole im Betriebssystem zu erstellen. Dabei handelt es sich lediglich um XML-Dateien im Eigenschaftenlistenformat von Apple, die im Dateisystem gespeichert sind.

Android-Installation

Unter Android unterscheiden sich die Aufforderungen zur Installation von PWAs je nach Gerät und Browser. Nutzer sehen möglicherweise Folgendes:

  • Abweichende Wortlaut des zu installierenden Menüpunkts, z. B. Installieren oder Zum Startbildschirm hinzufügen.
  • Detaillierte Installationsdialogfelder.

In der folgenden Abbildung sehen Sie zwei verschiedene Versionen eines Installationsdialogfelds, eine einfache Miniinfoleiste (links) und ein detailliertes Installationsdialogfeld (rechts).

Miniinfoleiste und Installationsdialogfelder unter Android

Je nach Gerät und Browser wird Ihre PWA entweder als WebAPK, als Verknüpfung oder als QuickApp installiert.

WebAPKs

Ein WebAPK ist ein Android-Paket (APK), das von einem vertrauenswürdigen Anbieter des Geräts des Nutzers erstellt wird, in der Regel in der Cloud auf einem WebAPK-Minting-Server. Diese Methode wird von Google Chrome auf Geräten mit installierter Google Mobile-Dienste (GMD) und vom Samsung-Internetbrowser verwendet, jedoch nur auf von Samsung hergestellten Geräten wie Galaxy-Telefonen oder -Tablets. Das macht die Mehrheit der Android-Nutzer aus.

Wenn ein Nutzer eine PWA über Google Chrome installiert und ein WebAPK verwendet wird, wird der Minting-Server „mints“ (Pakete) und signiert ein APK für die PWA. Dieser Vorgang dauert einige Zeit. Sobald das APK bereit ist, installiert der Browser die App jedoch automatisch auf dem Gerät des Nutzers. Da das APK von vertrauenswürdigen Anbietern (Play-Dienste oder Samsung) signiert wurde, wird es vom Smartphone installiert, ohne die Sicherheit zu deaktivieren, wie jede andere App aus dem Store. Die App muss nicht per Sideload übertragen werden.

Über WebAPK installierte PWAs:

Tastenkombinationen

WebAPKs bieten zwar die beste Nutzererfahrung für Android-Nutzer, können jedoch nicht immer erstellt werden. Wenn dies nicht möglich ist, greifen Browser darauf zurück, eine Websiteverknüpfung zu erstellen. Da Firefox, Microsoft Edge, Opera, Brave und Samsung Internet (auf Nicht-Samsung-Geräten) keine Minting-Server haben, denen sie vertrauen, erstellen sie Verknüpfungen. Dies gilt auch für Google Chrome, wenn der Prägungsdienst nicht verfügbar ist oder Ihre PWA die Installationsanforderungen nicht erfüllt.

Über Verknüpfungen installierte PWAs:

  • Sie müssen ein Browsersymbol auf dem Startbildschirm haben (siehe folgende Beispiele).
  • Sie haben kein Symbol im Launcher oder unter Einstellungen > Apps.
  • Funktionen, die eine Installation erfordern, können nicht verwendet werden.
  • Die Symbole und App-Metadaten können nicht aktualisiert werden.
  • Kann mehrfach installiert werden, sogar bei Verwendung desselben Browsers verweisen alle auf dieselbe Instanz und verwenden denselben Speicher.

Eine PWA, die mit verschiedenen Browsern auf demselben Gerät installiert ist.

QuickApps

Einige Hersteller, darunter Huawei und ZTE, bieten die Plattform QuickApps an, mit der einfache Web-Apps erstellt werden können, die PWAs ähneln, aber einen anderen Technologie-Stack verwenden. Einige Browser auf diesen Geräten, z. B. der Huawei-Browser, können PWAs installieren, die als QuickApp gepackt werden, auch wenn Sie nicht den QuickApp-Stack verwenden.

Wenn Ihre PWA als QuickApp installiert wird, erhalten Nutzer eine ähnliche Funktion wie Verknüpfungen, allerdings mit dem QuickApps-Symbol (ein Blitzbild). Die App kann auch über das QuickApp Center gestartet werden.

QuickApps auf einem Huawei- oder ZTE-Startbildschirm.

Aufforderung zur Installation

In Chromium-basierten Browsern auf Computern und Android-Geräten ist es möglich, das Installationsdialogfeld des Browsers über Ihre PWA auszulösen. Im Kapitel zur Installationsaufforderung werden die entsprechenden Muster und deren Implementierung behandelt.

App-Kataloge und ‐Shops

Ihre PWA kann auch in App-Katalogen und ‐Shops aufgeführt werden, um ihre Reichweite zu erhöhen und Nutzern die Möglichkeit zu geben, sie dort zu finden, wo sie andere Apps finden. Die meisten App-Kataloge und App-Shops unterstützen Technologien, mit denen Sie ein Paket veröffentlichen können, das nicht die gesamte Webanwendung enthält, z. B. Ihren HTML-Code und Ihre Assets. Mit diesen Technologien können Sie lediglich einen Launcher in einer eigenständigen Web-Rendering-Engine erstellen, die die App lädt und dem Service Worker die erforderlichen Assets im Cache überlässt.

Folgende App-Kataloge und App-Shops unterstützen die Veröffentlichung einer PWA:

Weitere Informationen zum Veröffentlichen einer PWA in App-Katalogen und ‐Stores finden Sie unter BubbleWrap-Befehlszeile und PWA Builder.

Ressourcen