Früher war die Installation von Apps nur im Kontext von plattformspezifischen Anwendungen möglich. Moderne Webanwendungen bieten installierbare Anwendungen, die das gleiche Maß an Integration und Zuverlässigkeit bieten wie plattformspezifische Apps.
Dazu haben Sie mehrere Möglichkeiten:
- PWA über den Browser installieren
- Installieren der PWA aus dem App-Shop.
Verschiedene Vertriebskanäle sind eine wirkungsvolle Methode, eine große Anzahl von Nutzern zu erreichen. Die Auswahl der richtigen Strategie für die Installation Ihrer PWA kann jedoch eine Herausforderung sein.
In diesem Leitfaden werden Best Practices für die Kombination verschiedener Installationsoptionen erläutert, um die Installationsraten zu erhöhen und Konkurrenz und Kannibalisierung der Plattformen zu vermeiden. Zu den Installationsangeboten gehören PWAs, die sowohl aus dem Browser als auch aus dem App Store installiert wurden, sowie plattformspezifische Apps.
Warum sollten Sie Ihre Webanwendung installierbar machen?
Installierte progressive Web-Apps werden in einem eigenständigen Fenster statt auf einem Browsertab ausgeführt. Sie können über den Startbildschirm, das Dock, die Taskleiste oder die Ablage des Nutzers gestartet werden. Sie können auf einem Gerät nach ihnen suchen und über den App-Schnellzugriff zwischen ihnen wechseln. So fühlen sie sich wie Teil des Geräts, auf dem sie installiert sind.
Allerdings kann es für Nutzer verwirrend sein, sowohl eine installierbare Webanwendung als auch eine plattformspezifische App zu haben. Für einige Nutzer sind plattformspezifische Apps möglicherweise die beste Wahl, aber für andere haben sie Nachteile:
- Speicherbeschränkungen:Wenn Sie eine neue App installieren, müssen Sie möglicherweise andere Apps löschen oder Speicherplatz bereinigen, indem Sie wertvolle Inhalte entfernen. Dies ist besonders für Nutzer von Low-End-Geräten von Vorteil.
- Verfügbare Bandbreite:Das Herunterladen einer App kann kostspielig und langsam sein. Dies gilt vor allem für Nutzer mit langsamen Verbindungen und teuren Datentarifen.
- Problem:Wenn Sie eine Website verlassen und in einen App-Shop wechseln, um eine App herunterzuladen, entstehen zusätzliche Probleme und Verzögerungen bei Nutzeraktionen, die direkt im Web ausgeführt werden könnten.
- Aktualisierungszyklus:Wenn Sie Änderungen an plattformspezifischen Apps vornehmen, müssen Sie möglicherweise eine App-Überprüfung durchlaufen. Dadurch kann sich die Anzahl der Änderungen und Tests (z. B. A/B-Tests) verlangsamen.
In einigen Fällen ist der Prozentsatz der Nutzer, die Ihre plattformspezifische App nicht herunterladen, sehr groß, z. B. diejenigen, die glauben, dass sie die App nicht sehr oft verwenden werden, oder es nicht rechtfertigen, mehrere Megabyte an Speicher oder Daten auszugeben. Sie können die Größe dieses Segments auf verschiedene Arten bestimmen, z. B. indem Sie mithilfe einer Analysekonfiguration den Prozentsatz der Nutzer ermitteln, die ausschließlich das mobile Web nutzen.
Wenn dieses Segment sehr groß ist, ist das ein guter Hinweis darauf, dass Sie alternative Installationsmöglichkeiten anbieten müssen.
Installation Ihrer PWA über den Browser fördern
Wenn Sie eine hochwertige PWA haben, ist es möglicherweise besser, ihre Installation über die plattformspezifische App zu bewerben. Das kann beispielsweise der Fall sein, wenn für die plattformspezifische App die Funktionen Ihrer PWA fehlen oder sie seit einiger Zeit 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 ChromeOS optimiert wurde.
Bei einigen Apps ist die Steigerung der plattformspezifischen App-Installationen ein wichtiger Teil des Geschäftsmodells. In diesem Fall ist es aus wirtschaftlicher Sicht sinnvoll, die Installation der plattformspezifischen App zu fördern. Manche Nutzer bevorzugen es jedoch möglicherweise, im Internet zu bleiben. Wenn dieses Segment identifiziert werden kann, kann die PWA-Aufforderung nur für diesen Nutzer eingeblendet werden (sogenannte „PWA“ wird als Fallback bezeichnet).
PWA als primäre installierbare Oberfläche
Sobald eine PWA die Kriterien für die Installierbarkeit erfüllt, wird in den meisten Browsern angezeigt, dass sie installierbar ist. In der Desktopversion von Chrome wird beispielsweise ein installierbares Symbol in der Adressleiste und auf Mobilgeräten eine Miniinfoleiste angezeigt:
Das kann für einige Nutzer ausreichend sein. Wenn Sie jedoch die Zahl der Installationen Ihrer PWA steigern möchten, empfehlen wir Ihnen dringend, sich das BeforeInstallPromptEvent anzusehen und sich an die Muster für die Installation Ihrer PWA zu halten.
Verhindern, dass Ihre PWA die plattformspezifischen App-Installationsraten beeinträchtigt
In einigen Fällen haben Sie die Möglichkeit, die Installation Ihrer plattformspezifischen App anstelle Ihrer PWA zu bewerben. In diesem Fall empfehlen wir Ihnen jedoch, eine Option bereitzustellen, mit der Nutzer Ihre PWA installieren können. Diese Fallback-Option ermöglicht es Nutzern, die Ihre plattformspezifische App nicht installieren können oder möchten, damit eine ähnliche Installation möglich ist.
Der erste Schritt zur Umsetzung dieser Strategie besteht darin, eine Heuristik für den Zeitpunkt zu definieren, an dem Sie dem Nutzer eine Installationsanzeige für Ihre PWA präsentieren.
Beispiel:Ein PWA-Nutzer ist ein Nutzer, der die plattformspezifische Aufforderung zur App-Installation gesehen und die plattformspezifische App nicht installiert hat. Er ist mindestens fünfmal zur Website zurückgekehrt oder hat auf das App-Banner geklickt, aber weiterhin die Website verwendet.
Anschließend kann die Heuristik folgendermaßen implementiert werden:
- Plattformspezifisches App-Installationsbanner einblenden
- Wenn ein Nutzer das Banner schließt, setzen Sie ein Cookie mit dieser Information (z.B.
document.cookie = "app-install-banner=dismissed"). - Verwenden Sie ein anderes Cookie, um die Anzahl der Besuche der Website durch Nutzer zu erfassen (z.B.
document.cookie = "user-visits=1"). - Schreiben Sie eine Funktion wie
isPWAUser(), die mithilfe der zuvor in den Cookies gespeicherten Informationen zusammen mit dergetInstalledRelatedApps()API ermittelt, ob ein Nutzer ein „PWA-Nutzer“ ist. - Wenn der Nutzer eine aussagekräftige Aktion ausführt, sollte
isPWAUser()aufgerufen werden. Wenn die Funktion „true“ zurückgibt und die Aufforderung zur Installation der PWA bereits gespeichert wurde, können Sie die Schaltfläche zum Installieren der PWA einblenden lassen.
Installation Ihrer PWA über einen App-Shop bewerben
Apps für App-Shops können mit verschiedenen Technologien erstellt werden, einschließlich PWA-Verfahren. Im Artikel PWA in native Umgebungen einbinden finden Sie eine Zusammenfassung der Technologien, die dafür verwendet werden können.
In diesem Abschnitt unterteilen wir die Apps im Store in zwei Gruppen:
- Plattformspezifische Apps:Diese Apps werden meist mit plattformspezifischem Code erstellt. Ihre Größe hängt von der Plattform ab, beträgt jedoch in der Regel mehr als 10 MB unter Android bzw. 30 MB unter iOS. Sie können Ihre plattformspezifische App bewerben, wenn Sie keine PWA haben oder wenn die plattformspezifische App umfassendere Funktionen bietet.
- Einfache Apps: Diese Apps können ebenfalls mit plattformspezifischem Code erstellt werden, werden jedoch in der Regel mit Webtechnologie erstellt und in einem plattformspezifischen Wrapper verpackt. Vollständige PWAs können ebenfalls in die Stores hochgeladen werden. Darauf wird weiter unten in diesem Artikel eingegangen. Einige Unternehmen entscheiden sich dafür, diese als „Lite-Version“ anzubieten, während andere diesen Ansatz auch für ihre Flagship- oder Core-Apps genutzt haben.
Einfache Apps bewerben
Laut einer Google Play-Studie sinkt die Conversion-Rate für Installationen pro 6 MB erhöhter APK-Größe um 1%. Das bedeutet, dass die Downloadabschlussrate einer App mit 10 MB etwa 30% höher sein kann als bei einer App mit 100 MB!
Einige Unternehmen nutzen daher ihre PWA, um mithilfe von vertrauenswürdigen Webaktivitäten eine vereinfachte Version ihrer App im Play Store bereitzustellen. Bei TWAs wird Ihre PWA in einer WebView-ähnlichen Komponente eingebunden, sodass die resultierende App-Größe normalerweise nur wenige Megabyte beträgt.
Oyo, eines der größten Gastgewerbeunternehmen Indiens, entwickelte eine Lite-Version seiner App und stellte sie mit einer TWA im Play Store zur Verfügung. Zum Zeitpunkt der Erstellung dieses Artikels war die Oyo-App nur 850 KB groß, also nur 7% der Größe der Android-App. Nach der Installation ist sie nicht mehr von der Android-App zu unterscheiden:
Oyo hielt sowohl die Flagship- als auch die Lite-App-Version im Store bereit und bot seinen Nutzern dadurch eine Wahlmöglichkeit.
Eine unkomplizierte Weberfahrung
Nutzer von Low-End-Geräten neigen eher dazu, kleinere Versionen von Apps herunterzuladen als Nutzer von High-End-Smartphones. Wenn es also möglich ist, das Gerät eines Nutzers zu identifizieren, können Sie dem Banner für die einfache App-Installation Vorrang vor der plattformspezifischen App-Version geben.
Im Web können Sie Gerätesignale abrufen und diese ungefähr Gerätekategorien (z.B. "hoch", "mittel" oder "niedrig") zuordnen. Sie können diese Informationen auf verschiedene Weise abrufen, entweder mithilfe von JavaScript APIs oder Clienthinweisen.
JavaScript verwenden
Mithilfe von JavaScript-Eigenschaften 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';`
Clienthinweise verwenden
Gerätesignale können auch aus HTTP-Anfrageheadern mithilfe von Clienthinweisen abgeleitet werden. So kannst du den vorherigen Code für den Gerätespeicher mit Clienthinweisen implementieren:
Teilen Sie dem Browser zuerst mit, dass Sie für jede eigene Anfrage im Header der HTTP-Antwort Hinweise zum Gerätespeicher erhalten möchten:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Dann empfangen Sie Device-Memory-Informationen im Anfrageheader von HTTP-Anfragen:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Sie können diese Informationen in Ihren Back-Ends verwenden, um ein Cookie mit der Kategorie des Nutzergeräts 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 schließlich eine eigene Logik, um diese Informationen Gerätekategorien zuzuordnen, und zeigen Sie in jedem Fall die entsprechende Aufforderung zur App-Installation an:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Fazit
Die Möglichkeit, ein Symbol auf dem Startbildschirm der Nutzenden zu haben, ist eine der interessantesten Funktionen von Anwendungen. Da dies in der Vergangenheit nur für Apps möglich war, die aus App-Shops installiert wurden, könnten Unternehmen denken, dass ein Installationsbanner aus dem App-Shop ausreichen würde, um Nutzer zur Installation der App-Shops zu bewegen. Derzeit gibt es weitere Optionen, um die Installation einer App zu ermöglichen, z. B. das Angebot einfacher Apps in den Stores oder die Möglichkeit, PWAs dem Startbildschirm hinzuzufügen, indem sie sie direkt über die Website dazu auffordern.