Veröffentlicht: 12. Mai 2020
Bisher war die App-Installation nur im Kontext plattformspezifischer Anwendungen möglich. Moderne Web-Apps bieten heute installierbare Funktionen, die das gleiche Maß an Integration und Zuverlässigkeit wie plattformspezifische Apps bieten.
Dazu haben Sie verschiedene Möglichkeiten:
- Installieren der PWA über den Browser
- Installieren der PWA über den App-Shop
Mit verschiedenen Vertriebskanälen können Sie eine breite Nutzerbasis erreichen. Die Auswahl der richtigen Strategie zur Förderung der Installation Ihrer PWA kann jedoch eine Herausforderung sein.
In diesem Leitfaden werden Best Practices für die Kombination verschiedener Installationsoptionen beschrieben, um die Installationsraten zu steigern und Plattformkonkurrenz und ‑kannibalisierung zu vermeiden. Die Installationsangebote umfassen PWAs, die sowohl über den Browser als auch über den App Store installiert werden, sowie plattformspezifische Apps.
Warum sollte Ihre Web-App installierbar sein?
Installierte progressive Web-Apps werden in einem separaten Fenster statt in einem Browser-Tab ausgeführt. Sie können über den Startbildschirm, das Dock, die Taskleiste oder das Ablagefach des Nutzers gestartet werden. Sie können auf einem Gerät danach suchen und mit der App-Umschaltfunktion zwischen ihnen wechseln. So fühlen sie sich wie ein Teil des Geräts an, auf dem sie installiert sind.
Es kann jedoch verwirrend für Nutzer sein, wenn sowohl eine installierbare Web-App als auch eine plattformspezifische App vorhanden sind. Für einige Nutzer sind plattformspezifische Apps möglicherweise die beste Wahl, für andere können sie jedoch einige Nachteile mit sich bringen:
- Speicherbeschränkungen:Wenn Sie eine neue App installieren, müssen Sie möglicherweise andere Apps löschen oder Speicherplatz freigeben, indem Sie wichtige Inhalte entfernen. Das ist besonders für Nutzer mit Low-End-Geräten von Nachteil.
- Verfügbare Bandbreite:Das Herunterladen einer App kann ein kostspieliger und langsamer Prozess sein, insbesondere für Nutzer mit langsamen Verbindungen und teuren Datentarifen.
- Reibung:Wenn Nutzer eine Website verlassen und zu einem App-Shop wechseln, um eine App herunterzuladen, entsteht zusätzliche Reibung. Außerdem wird eine Nutzeraktion verzögert, die direkt im Web ausgeführt werden könnte.
- Aktualisierungszyklus:Änderungen an plattformspezifischen Apps erfordern möglicherweise einen App-Überprüfungsprozess, der Änderungen und Tests (z. B. A/B-Tests) verlangsamen kann.
In einigen Fällen ist der Prozentsatz der Nutzer, die Ihre plattformspezifische App nicht herunterladen, möglicherweise hoch. Das kann z. B. daran liegen, dass sie die App nicht sehr oft verwenden oder nicht mehrere Megabyte Speicherplatz oder Daten dafür aufwenden möchten. Sie können die Größe dieses Segments auf verschiedene Arten ermitteln, z. B. indem Sie mit einer Analytics-Konfiguration den Prozentsatz der Nutzer erfassen, die nur das mobile Web verwenden.
Wenn die Größe dieses Segments beträchtlich ist, ist das ein guter Hinweis darauf, dass Sie alternative Möglichkeiten zur Installation Ihrer Inhalte anbieten müssen.
Installation Ihrer PWA im Browser bewerben
Wenn Sie eine hochwertige PWA haben, ist es möglicherweise besser, die Installation dieser App anstelle Ihrer plattformspezifischen App zu bewerben. Das kann z. B. der Fall sein, wenn die plattformspezifische App Funktionen vermissen lässt, die Ihre PWA bietet, oder wenn sie schon länger nicht mehr aktualisiert wurde. Es kann auch hilfreich sein, die Installation Ihrer PWA zu fördern, wenn die plattformspezifische App nicht für größere Bildschirme wie auf ChromeOS optimiert ist.
Bei einigen Apps ist die Steigerung plattformspezifischer App-Installationen ein wichtiger Bestandteil des Geschäftsmodells. In diesem Fall ist es sinnvoll, die Installation Ihrer plattformspezifischen App zu bewerben. Einige Nutzer fühlen sich jedoch möglicherweise wohler, wenn sie im Web bleiben. Wenn dieses Segment identifiziert werden kann, kann der PWA-Aufforderung nur für diese Nutzer angezeigt werden. Wir nennen das PWA als Fallback.
PWA als primäre installierbare Anwendung
Sobald eine PWA die Kriterien für die Installierbarkeit erfüllt, zeigen die meisten Browser an, dass die PWA installiert werden kann. In der Desktopversion von Chrome wird beispielsweise ein installierbares Symbol in der Adressleiste angezeigt, auf Mobilgeräten eine Mini-Infoleiste:
Das mag für einige Anwendungsfälle ausreichen. Wenn Sie jedoch die Installation Ihrer PWA fördern möchten, empfehlen wir dringend, auf das BeforeInstallPromptEvent zu achten und die Muster zur Förderung der Installation Ihrer PWA zu befolgen.
Verhindern, dass Ihre PWA die Installationsrate Ihrer plattformspezifischen App kannibalisiert
In einigen Fällen kann es sinnvoll sein, die Installation Ihrer plattformspezifischen App anstelle Ihrer PWA zu bewerben. Wir empfehlen jedoch weiterhin, einen Mechanismus bereitzustellen, mit dem Nutzer Ihre PWA installieren können. Diese Fallback-Option ermöglicht es Nutzern, die Ihre plattformspezifische App nicht installieren können oder möchten, eine ähnliche, installierte App zu nutzen.
Der erste Schritt zur Umsetzung dieser Strategie besteht darin, eine Heuristik dafür zu definieren, wann Nutzern eine Installationswerbung für Ihre PWA angezeigt wird.
Ein PWA-Nutzer könnte beispielsweise ein Nutzer sein, der die Installationsaufforderung für Ihre plattformspezifische App gesehen, sie aber nicht installiert hat. Sie kehren möglicherweise fünf oder mehr Male auf Ihre Website zurück, klicken auf das App-Banner, verwenden aber weiterhin die Website.
Die Heuristik kann so implementiert werden:
- Plattformspezifisches App-Installationsbanner anzeigen
- Wenn ein Nutzer das Banner schließt, setzen Sie ein Cookie mit diesen Informationen (z. B.
document.cookie = "app-install-banner=dismissed"). - Verwenden Sie ein anderes Cookie, um die Anzahl der Nutzerbesuche auf der Website zu erfassen, z. B.
document.cookie = "user-visits=1". - Schreiben Sie eine Funktion wie
isPWAUser(), die die zuvor in den Cookies gespeicherten Informationen zusammen mit dergetInstalledRelatedApps()API verwendet, um festzustellen, ob ein Nutzer als PWA-Nutzer gilt. - Rufen Sie
isPWAUser()auf, wenn der Nutzer eine wichtige Aktion ausführt. Wenn die Funktion „true“ zurückgibt und die Aufforderung zur Installation der PWA zuvor gespeichert wurde, können Sie die Schaltfläche zur Installation der PWA anzeigen.
Installation Ihrer PWA in einem App-Shop bewerben
App-Shop-Apps können mit einer Reihe verschiedener Technologien erstellt werden, darunter PWA-Techniken. Unter Blending PWA into native environments finden Sie eine Zusammenfassung der Technologien, die dafür verwendet werden können.
Apps im Store lassen sich in zwei Gruppen einteilen:
- Plattformspezifische Apps:Diese Apps werden hauptsächlich mit plattformspezifischem Code erstellt. Die App-Größe hängt von der Plattform ab, liegt aber in der Regel bei mehr als 10 MB auf Android und 30 MB auf iOS. Sie sollten Ihre plattformspezifische App bewerben, wenn Sie keine PWA haben oder wenn die plattformspezifische App einen umfassenderen Funktionsumfang bietet.
- Leichte Apps:Diese Apps können auch mit plattformspezifischem Code erstellt werden, werden aber in der Regel mit Webtechnologie entwickelt und in einem plattformspezifischen Wrapper verpackt. Vollständige PWAs können ebenfalls in den Store hochgeladen werden. Einige Unternehmen bieten diese als „Lite“-Versionen an, andere haben diesen Ansatz auch für ihre Flaggschiff-Apps (Kern-Apps) verwendet.
Für schlanke Apps werben
Laut einer Google Play-Studie sinkt die Conversion-Rate bei Installationen um 1 % für jede Steigerung der APK-Größe um 6 MB. Das bedeutet, dass die Abschlussquote für Downloads einer App mit einer Größe von 10 MB ungefähr 30% höher als die einer App mit einer Größe von 100 MB sein kann.
Um dieses Problem zu beheben, nutzen einige Unternehmen ihre PWA, um eine schlanke Version ihrer App im Play Store über vertrauenswürdige Web-Aktivitäten (Trusted Web Activities, TWA) bereitzustellen. Bei TWAs wird Ihre PWA in eine Webview-ähnliche Komponente eingebunden. Die resultierende App ist in der Regel nur wenige Megabyte groß.
Oyo, eines der größten Gastgewerbeunternehmen Indiens, hat eine Lite-Version seiner App entwickelt und sie mithilfe einer TWA im Play Store verfügbar gemacht. Im Mai 2020 war die Oyo-App nur 850 KB groß, also nur 7% der Größe der Android-App. Nach der Installation ist sie nicht von der Android-App zu unterscheiden:
Oyo behielt sowohl die Flagship- als auch die Lite-App-Version im Store bei, um den Nutzern eine Auswahl zu bieten.
Für eine schlanke Weboberfläche sorgen
Nutzer mit Low-End-Geräten sind intuitiv eher bereit, Lite-Versionen von Apps herunterzuladen als Nutzer mit High-End-Smartphones. Wenn Sie das Gerät eines Nutzers identifizieren können, können Sie das Banner für die Installation der leichten App-Version gegenüber der schwereren plattformspezifischen App-Version priorisieren.
Im Web ist es möglich, Gerätesignale zu erfassen und sie ungefähr Geräteklassen (z. B. „hoch“, „mittel“ oder „niedrig“) zuzuordnen. Sie können diese Informationen auf verschiedene Arten abrufen, entweder über JavaScript-APIs oder Client-Hinweise.
JavaScript verwenden
Mit JavaScript-Properties wie navigator.hardwareConcurrency, navigator.deviceMemory und navigator.connection können Sie Informationen zur CPU, zum Arbeitsspeicher und zum Netzwerkstatus des Geräts abrufen. Beispiel:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Client-Hints verwenden
Gerätesignale können auch in HTTP-Anfrageheadern über Client-Hints abgeleitet werden. So können Sie den vorherigen Code für den Gerätespeicher mit Client-Hinweisen implementieren.
Teilen Sie dem Browser mit, dass Sie Hinweise zum Gerätespeicher im Header der HTTP-Antwort für jede Erstanbieteranfrage erhalten möchten:
HTTP/1.1 200 OK Content-Type: text/html Accept-CH: Device-MemorySie erhalten
Device-Memory-Informationen im Anfrageheader von HTTP-Anfragen:GET /main.js HTTP/1.1 Device-Memory: 0.5Verwenden Sie diese Informationen in Ihren Back-Ends, um ein Cookie mit der Kategorie des Geräts des Nutzers zu speichern:
app.get('/route', (req, res) => { // Determine device category const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full'; // Set cookie res.setCookie('Device-Category', deviceCategory); … });Erstellen Sie Ihre eigene Logik, um diese Informationen Geräteklassen zuzuordnen und in jedem Fall die entsprechende Aufforderung zur App-Installation anzuzeigen:
if (isDeviceMidOrLowEnd()) { // show "Lite app" install banner or PWA A2HS prompt } else { // show "Core app" install banner }
Nutzern erlauben, Ihre App unabhängig von der Plattform zu installieren
Ein Symbol auf dem Startbildschirm des Nutzers ist eine der ansprechendsten Funktionen von Apps. Da dies in der Vergangenheit nur für Apps möglich war, die über App-Shops installiert wurden, denken Unternehmen möglicherweise, dass ein Banner für die Installation aus dem App-Shop ausreicht, um Nutzer von ihren Angeboten zu überzeugen.
Es gibt mehr Möglichkeiten, Nutzern die Installation einer App zu ermöglichen. Dazu gehören die Bereitstellung von schlanken App-Erlebnissen in den Stores und die Möglichkeit, Nutzer direkt von der Website aus aufzufordern, PWAs dem Startbildschirm hinzuzufügen.