Installation

Sobald der Nutzer Ihre PWA installiert, geschieht Folgendes:

  • ein Symbol im Launcher, auf dem Startbildschirm, im Startmenü oder auf dem Launchpad haben.
  • Diese Anzeigen erscheinen, wenn ein Nutzer auf seinem Gerät nach der App sucht.
  • Sie haben ein separates Fenster innerhalb des Betriebssystems.
  • Sie bieten 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 für eine eigenständige Version installiert werden kann. Die Metadaten für Ihre PWA werden durch eine JSON-basierte Datei namens „Web App Manifest“ festgelegt, die wir im nächsten Modul ausführlich behandeln werden.

Als Mindestvoraussetzung für die Installierbarkeit verwenden die meisten Browser, die diese Funktion unterstützen, die Web-App-Manifestdatei und bestimmte Eigenschaften wie den Namen der App und die Konfiguration der installierten Umgebung. Eine Ausnahme ist Safari für macOS, das die Installierbarkeit nicht unterstützt.

Die Anforderungen für die Installation unterscheiden sich je nach Browser. Dieser Artikel beschreibt die Kriterien für Google Chrome und enthält Links zu den Anforderungen für andere Browser.

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

Desktop installation

Die Installation von PWAs auf Computern wird derzeit von Google Chrome und Microsoft Edge unter Linux, Windows, macOS und Chromebooks unterstützt. Diese Browser zeigen ein Installationslogo (Symbol) in der URL-Leiste (siehe Abbildung unten) an, 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, kann ihm ein Pop-up wie das unten gezeigte angezeigt werden, mit dem er dazu aufgefordert wird, die Website als App zu installieren.

Produktinterne Hilfe in Google Chrome, die Vorschläge zur Installation der PWA vorschlägt.

Das Drop-down-Menü des Browsers enthält auch das Element "Installieren" , das der Nutzer verwenden kann:

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

Auf Desktop-Betriebssystemen werden nur eigenständige Anzeigemodi mit minimaler Benutzeroberfläche unterstützt.

Auf Computern installierte PWAs:

  • 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.
  • In App-Wechslern und Docks wird ein Symbol angezeigt, wenn die App aktiv ist, vor Kurzem verwendet wurde oder im Hintergrund geöffnet wird.
  • Sie erscheinen in der App-Suche, z. B. unter Windows oder Spotlight unter macOS.
  • Sie können auf ihren Symbolen eine Badgenummer hinzufügen, um auf neue Benachrichtigungen hinzuweisen. Dazu verwenden Sie die Badging API.
  • Mit App-Verknüpfungen kann ein Kontextmenü für das Symbol festgelegt werden.
  • Können nicht zweimal über denselben Browser installiert werden.

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

Installation auf iOS- und iPadOS-Geräten

Unter iOS und iPadOS gibt es keine Browseraufforderung zur Installation Ihrer PWA. Auf diesen Plattformen werden PWAs auch als Web-Apps für den Startbildschirm bezeichnet. Diese Apps müssen dem Startbildschirm manuell über ein Menü hinzugefügt werden, das nur in Safari verfügbar ist. 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 zu deinem HTML-Abschnitt <head> hinzufü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, ist das Symbol auf dem Startbildschirm ein Screenshot Ihrer PWA, als der Nutzer sie installiert hat.

Die Installation von PWAs ist nur verfügbar, wenn der Nutzer Ihre Website über Safari aufruft. Mit anderen im App Store verfügbaren Browsern wie Google Chrome, Firefox, Opera oder Microsoft Edge kann eine PWA keine PWA auf dem Startbildschirm installieren.

So fügen Sie dem Startbildschirm Apps hinzu:

  1. Öffnen Sie das Menü Freigeben, das unten oder oben im Browser verfügbar ist.
  2. Klicken Sie auf Zum Startbildschirm hinzufügen.
  3. Bestätigen Sie den Namen der App. Er kann vom Nutzer bearbeitet werden.
  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 Browserverknüpfung verwendet. Im Vollbildmodus wird stattdessen der Standalone-Modus aktiviert.

PWAs, die unter iOS und iPadOS installiert sind:

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

Übrigens verwendet Safari eine native Technologie namens Web-Clips, um die PWA-Symbole im Betriebssystem zu erstellen. Es sind nur XML-Dateien im Property List-Format von Apple, die im Dateisystem gespeichert sind.

Android-Installation

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

  • Textvarianten des Menüpunkts für die Installation, z. B. Installieren oder Zum Startbildschirm hinzufügen
  • Detaillierte Installationsdialoge.

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

Miniinfoleiste und Installationsdialoge unter Android

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

WebAPKs

Ein WebAPK ist ein Android-Paket (APK), das von einem vertrauenswürdigen Anbieter des Nutzergeräts – normalerweise in der Cloud – auf einem WebAPK-Minting-Server erstellt wird. Diese Methode wird von Google Chrome auf Geräten, auf denen Google Mobile Services (GMD) installiert ist, und vom Samsung-Internetbrowser verwendet, jedoch nur auf Geräten von Samsung, z. B. auf einem Galaxy-Smartphone oder -Tablet. Zusammen macht dies die Mehrheit der Android-Nutzer aus.

Wenn ein Nutzer eine PWA über Google Chrome installiert und ein WebAPK verwendet, werden vom Server „Mints“ (Pakete) erstellt und ein APK für die PWA signiert. Dieser Vorgang dauert einige Zeit, aber wenn das APK fertig ist, wird die App vom Browser im Hintergrund auf dem Gerät des Nutzers installiert. Da vertrauenswürdige Anbieter (Play-Dienste oder Samsung) das APK signiert haben, wird es auf dem Smartphone installiert, ohne die Sicherheit zu beeinträchtigen, wie bei jeder App aus dem Store. Es ist kein Sideloading der App erforderlich.

PWAs, die über WebAPK installiert wurden:

Tastenkombinationen

WebAPKs sind zwar für Android-Nutzer optimal, können aber nicht immer erstellt werden. Ist das nicht möglich, erstellen Browser eine Websiteverknüpfung. Da Firefox, Microsoft Edge, Opera, Brave und Samsung Internet (auf Nicht-Samsung-Geräten) keine vertrauenswürdigen Server haben, erstellen sie Shortcuts. Wenn der Prägedienst nicht verfügbar ist oder Ihre PWA die Installationsanforderungen nicht erfüllt, wird dies auch in Google Chrome übernommen.

PWAs, die über Verknüpfungen installiert wurden:

  • Ein Browsersymbol auf dem Startbildschirm anzeigen (siehe folgende Beispiele)
  • Sie haben kein Symbol im Launcher oder unter Einstellungen > Apps.
  • Es können keine Funktionen verwendet werden, für die eine Installation erforderlich ist.
  • Die zugehörigen Symbole und App-Metadaten können nicht aktualisiert werden.
  • Kann mehrfach installiert werden, sogar über denselben Browser. In diesem Fall verweisen alle auf dieselbe Instanz und verwenden denselben Speicher.

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

QuickApps

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

Wenn Ihre PWA als QuickApp installiert ist, sehen Nutzer eine ähnliche Funktion wie Verknüpfungen mit Verknüpfungen, allerdings mit einem Symbol mit dem QuickApps-Symbol (einem 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, den Installationsdialog des Browsers über Ihre PWA aufzurufen. Im Kapitel Aufforderung zur Installation werden Muster dazu und die Implementierung beschrieben.

App-Kataloge und -Stores

Sie können Ihre PWA auch in App-Katalogen und -App-Shops auflisten, um ihre Reichweite zu erhöhen und Nutzern zu ermöglichen, sie dort zu finden, wo sie andere Apps finden. Die meisten App-Kataloge und -Stores unterstützen Technologien, mit denen Sie ein Paket veröffentlichen können, das nicht die gesamte Web-App (z. B. HTML-Code und Assets) enthält. Mit diesen Technologien können Sie lediglich einen Launcher für ein eigenständiges Web-Rendering-Modul erstellen, das die App lädt und dem Service Worker die erforderlichen Assets im Cache speichert.

Die Kataloge und App-Shops, die die Veröffentlichung einer PWA unterstützen, sind:

Weitere Informationen zur Veröffentlichung einer PWA in App-Katalogen und -Stores finden Sie unter BubbleWrap-Befehlszeile und PWA Builder.

Ressourcen