Bisher war die App-Installation nur im Kontext von plattformspezifischen Anwendungen möglich. Heutzutage bieten moderne Web-Apps installierbare Funktionen, die die gleiche Integration und Zuverlässigkeit wie plattformspezifische Apps bieten.
Das geht auf verschiedene Arten:
- Die PWA über den Browser installieren
- Installieren der PWA über den App-Shop
Unterschiedliche Vertriebskanäle sind eine gute Möglichkeit, eine große Anzahl von Nutzern zu erreichen. Die richtige Strategie zur Bewerbung der Installation Ihrer PWA zu wählen, 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 Plattformwettbewerb und Kannibalisierung zu vermeiden. Zu den abgedeckten Installationsangeboten gehören PWAs, die sowohl über den Browser als auch über den App Store installiert werden, sowie plattformspezifische Apps.
Warum sollte Ihre Webanwendung installierbar sein?
Installierte progressive Web-Apps werden in einem eigenständigen Fenster statt in einem Browsertab ausgeführt. Sie können über den Startbildschirm, das Dock, die Taskleiste oder das Steuerfeld des Nutzers gestartet werden. Sie können auf einem Gerät danach suchen und mit dem App-Schnellzugriff zwischen ihnen wechseln. So wirken sie wie ein Teil des Geräts, auf dem sie installiert sind.
Aber sowohl eine installierbare Webanwendung als auch eine plattformspezifische App können für Nutzer verwirrend sein. Für einige Nutzer sind plattformspezifische Apps die beste Wahl, für andere können sie jedoch einige Nachteile haben:
- Speicherplatzbeschränkungen:Wenn Sie eine neue App installieren, müssen Sie möglicherweise andere Apps löschen oder Speicherplatz freigeben, indem Sie wertvolle Inhalte entfernen. Das ist besonders für Nutzer auf Low-End-Geräten von Nachteil.
- Verfügbare Bandbreite:Das Herunterladen einer App kann teuer und langsam sein, insbesondere für Nutzer mit langsamen Verbindungen und teuren Datentarifen.
- Reibung: Wenn Nutzer eine Website verlassen und einen Store aufrufen, um eine App herunterzuladen, entsteht zusätzliche Reibung und die Nutzeraktion wird verzögert, die direkt im Web ausgeführt werden könnte.
- Aktualisierungszyklus:Für Änderungen an plattformspezifischen Apps ist möglicherweise ein App-Überprüfungsprozess erforderlich, was Ä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 ist beispielsweise der Fall, wenn Nutzer der Meinung sind, dass sie die App nicht sehr oft verwenden werden, oder wenn sie mehrere Megabyte Speicherplatz oder Daten nicht rechtfertigen können. Sie können die Größe dieses Segments auf verschiedene Arten ermitteln, z. B. mithilfe einer Analysekonfiguration, um den Prozentsatz der Nutzer zu erfassen, die nur das mobile Web verwenden.
Wenn dieses Segment beträchtlich ist, ist das ein guter Hinweis darauf, dass Sie alternative Installationsmethoden für Ihre Inhalte anbieten müssen.
Installation Ihrer PWA über den Browser fördern
Wenn Sie eine hochwertige PWA haben, ist es möglicherweise besser, für die Installation der PWA zu werben, anstatt für die der plattformspezifischen App. Das ist beispielsweise der Fall, wenn der plattformspezifischen App Funktionen fehlen, die von Ihrer PWA angeboten werden, oder wenn sie schon länger nicht mehr aktualisiert wurde. Es kann auch hilfreich sein, die Installation Ihrer PWA zu bewerben, wenn die plattformspezifische App nicht für größere Bildschirme optimiert wurde, z. B. auf ChromeOS.
Bei einigen Apps ist die Steigerung der platformspezifischen App-Installationen ein wichtiger Bestandteil des Geschäftsmodells. In diesem Fall ist es geschäftlich sinnvoll, für die Installation Ihrer platformspezifischen App zu werben. Einigen Nutzern ist es jedoch lieber, im Web zu bleiben. Wenn dieses Segment identifiziert werden kann, kann die PWA-Aufforderung nur für dieses Segment angezeigt werden (dies wird als „PWA als Fallback“ bezeichnet).
PWA als primäre installierbare Version
Sobald eine PWA die Kriterien für die Installierbarkeit erfüllt, wird in den meisten Browsern angezeigt, 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 ist für einige Anwendungen zwar ausreichend, wenn Sie jedoch mehr Installationen Ihrer PWA erzielen möchten, sollten Sie auf die BeforeInstallPromptEvent achten und die Muster für die Bewerbung der Installation Ihrer PWA befolgen.
Verhindern, dass Ihre PWA die plattformspezifische App-Installationsrate beeinträchtigt
In einigen Fällen möchten Sie möglicherweise die Installation Ihrer plattformspezifischen App über Ihre PWA fördern. Wir empfehlen Ihnen aber trotzdem, einen Mechanismus bereitzustellen, mit dem Nutzer Ihre PWA installieren können. Mit dieser Fallback-Option können Nutzer, die Ihre platformspezifische App nicht installieren können oder möchten, eine ähnliche Funktionsweise nutzen.
Der erste Schritt bei der Implementierung dieser Strategie besteht darin, eine Heuristik zu definieren, wann Sie dem Nutzer ein Installationsangebot für Ihre PWA präsentieren.
Beispiel:Ein PWA-Nutzer ist ein Nutzer, der die platformspezifische Aufforderung zur App-Installation gesehen, die platformspezifische App aber nicht installiert hat. Er ist mindestens fünfmal zur Website zurückgekehrt oder hat auf das App-Banner geklickt, die Website aber stattdessen weiter verwendet.
Die Heuristik kann dann so implementiert werden:
- Das plattformspezifische Banner für die App-Installation anzeigen.
- Wenn ein Nutzer das Banner schließt, legen Sie ein Cookie mit diesen Informationen fest (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 zu ermitteln, ob ein Nutzer als „PWA-Nutzer“ gilt. - Rufen Sie
isPWAUser()auf, wenn der Nutzer eine sinnvolle Aktion ausführt. Wenn die Funktion „wahr“ zurückgibt und die Aufforderung zur Installation der PWA zuvor gespeichert wurde, können Sie die Schaltfläche „PWA installieren“ anzeigen.
Für die Installation Ihrer PWA über einen App-Shop werben
Apps für App-Shops können mit verschiedenen Technologien erstellt werden, einschließlich PWA-Technologien. Im Artikel PWA in native Umgebungen einbinden finden Sie eine Zusammenfassung der Technologien, die sich dafür eignen.
In diesem Abschnitt werden Apps im Store in zwei Gruppen unterteilt:
- Plattformspezifische Apps:Diese Apps werden meist mit platformspezifischem Code erstellt. Die Größe hängt von der Plattform ab, liegt aber bei Android in der Regel über 10 MB und bei iOS über 30 MB. Sie können Ihre plattformspezifische App bewerben, wenn Sie keine PWA haben oder wenn die plattformspezifische App mehr Funktionen bietet.
- Leichte Apps: Diese Apps können auch mit platformspezifischem Code erstellt werden, werden aber in der Regel mit Webtechnologie erstellt und in einem platformspezifischen Wrapper verpackt. Vollständige PWAs können ebenfalls in die Shops hochgeladen werden. (Das wird später in diesem Artikel erläutert.) Einige Unternehmen bieten diese als „Lite“-Versionen an, andere haben diesen Ansatz auch für ihre Haupt-Apps verwendet.
Für schlanke Apps werben
Laut einer Google Play-Studie sinkt die Conversion-Rate bei Installationen um 1 %, wenn die Größe einer APK um 6 MB zunimmt. Das bedeutet, dass die Abschlussquote für Downloads einer App mit einer Größe von 10 MB ungefähr 30% höher sein könnte als die einer App mit einer Größe von 100 MB.
Um dieses Problem zu lösen, nutzen einige Unternehmen ihre PWA, um mithilfe von Trusted Web Activities (TWA) eine schlanke Version ihrer App im Play Store anzubieten. TWAs verpacken Ihre PWA in eine WebView-ähnliche Komponente. Die resultierende App-Größe beträgt in der Regel nur wenige Megabyte.
Oyo, eines der größten Hotelunternehmen in Indien, hat eine Lite-Version seiner App entwickelt und mithilfe einer TWA im Play Store verfügbar gemacht. 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 von der Android-App zu unterscheiden:
Oyo behielt sowohl die Haupt- als auch die Lite-Version der App im Store, um Nutzern eine Auswahl zu bieten.
Für eine nutzerfreundliche Website sorgen
Nutzer mit Low-End-Geräten sind instinktiv eher bereit, schlanke Versionen von Apps herunterzuladen als Nutzer mit High-End-Smartphones. Wenn es also möglich ist, das Gerät eines Nutzers zu identifizieren, können Sie das Banner für die Installation der App mit geringem Datenvolumen der schwereren plattformspezifischen App-Version vorziehen.
Im Web können Gerätesignale erfasst und ungefähr Gerätekategorien zugeordnet werden (z.B. „hoch“, „mittel“ oder „niedrig“). Sie können diese Informationen auf unterschiedliche Weise abrufen, entweder mit JavaScript APIs oder Clienthinweisen.
JavaScript verwenden
Mit 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';`
Client-Hinweise verwenden
Gerätesignale können auch in HTTP-Anfrageheadern über Clienthinweise abgeleitet werden. So implementierst du den vorherigen Code für den Gerätespeicher mit Clienthinweisen:
Teilen Sie dem Browser zuerst mit, dass Sie für jede selbst gehostete Anfrage Hinweise zum Gerätespeicher im Header der HTTP-Antwort erhalten möchten:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Anschließend erhalten 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 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 abschließend eine eigene Logik, um diese Informationen Gerätekategorien 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
}
Fazit
Die Möglichkeit, ein Symbol auf dem Startbildschirm des Nutzers zu haben, ist eine der ansprechendsten Funktionen von Apps. Da dies bisher nur für Apps möglich war, die über App-Shops installiert wurden, denken Unternehmen möglicherweise, dass ein App-Shop-Installationsbanner ausreicht, um Nutzer zur Installation ihrer Apps zu bewegen. Derzeit gibt es mehr Möglichkeiten, Nutzern die Installation einer App zu ermöglichen. Dazu gehören die Bereitstellung von schlanken Apps in den App-Shops und die Möglichkeit, Nutzern zu ermöglichen, PWAs direkt über die Website auf dem Startbildschirm hinzuzufügen.