Früher war die Installation von Apps 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 wird über den Browser installiert.
- Die PWA wird über den App-Shop installiert.
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 über den 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:
- Speicherbeschränkungen:Die Installation einer neuen App kann bedeuten, dass andere Apps gelöscht werden oder Speicherplatz freigegeben werden, indem wertvolle Inhalte entfernt werden. Dies ist besonders von Nachteil für Nutzer von Low-End-Geräten.
- Verfügbare Bandbreite:Das Herunterladen einer App kann kostspielig und langsam sein. Dies gilt 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 eines Analysetools, um den Prozentsatz der Nutzer zu ermitteln, die nur das mobile Web nutzen.
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, die Installation über Ihrer plattformspezifischen App zu bewerben, z. B. wenn in der plattformspezifischen 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 bewerben, wenn die plattformspezifische App nicht für größere Bildschirme optimiert wurde, z. B. unter ChromeOS.
Bei einigen Apps ist die Steigerung der plattformspezifischen App-Installationen ein wichtiger Bestandteil des Geschäftsmodells. In diesem Fall ist es aus geschäftlicher Sicht sinnvoll, die Installation Ihrer plattformspezifischen App zu fördern. Manche Nutzer bleiben jedoch lieber im Web. 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. Bei Chrome auf einem Desktop-Computer wird beispielsweise ein installierbares Symbol in der Adressleiste und auf Mobilgeräten eine Miniinfoleiste angezeigt:
Das ist für einige Anwendungen zwar ausreichend, wenn Sie jedoch die Installationen Ihrer PWA steigern 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 plattformspezifische App nicht installieren können oder installieren möchten, eine ähnliche Version der App installieren.
Der erste Schritt zur Implementierung dieser Strategie besteht darin, eine Heuristik dafür zu definieren, wann Sie dem Nutzer eine Werbeaktion zur Installation Ihrer PWA anzeigen.
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:
- Blenden Sie das plattformspezifische App-Installationsbanner ein.
- Wenn ein Nutzer das Banner schließt, setzen Sie ein Cookie mit diesen Informationen (z.B.
document.cookie = "app-install-banner=dismissed"). - Ein anderes Cookie verwenden, um die Anzahl der Websitebesuche durch Nutzer zu erfassen (z.B.
document.cookie = "user-visits=1"). - Schreiben Sie eine Funktion wie
isPWAUser(), die zusammen mit dergetInstalledRelatedApps()API die zuvor in den Cookies gespeicherten Informationen verwendet, um festzustellen, ob ein Nutzer als „PWA-Nutzer“ gilt. - Wenn der Nutzer eine aussagekräftige Aktion ausführt, rufe
isPWAUser()auf. Wenn die Funktion „true“ zurückgibt und die Aufforderung zur Installation der PWA zuvor gespeichert wurde, können Sie die PWA-Installationsschaltfläche 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 hauptsächlich 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. Wenn Sie keine PWA haben oder die plattformspezifische App einen umfassenderen Funktionsumfang bietet, können Sie für Ihre plattformspezifische App werben.
- 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. Es können auch vollständige PWAs in die Stores 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.
Einfache Apps bewerben
Laut einer Google Play-Studie verringert sich die Conversion-Rate für Installationen um jeweils 1 % pro Größe von 6 MB. Das bedeutet, dass die Abschlussrate einer App mit 10 MB etwa 30% höher sein kann als bei einer App mit 100 MB.
Um dieses Problem zu beheben, verwenden einige Unternehmen ihre PWA, um im Play Store mithilfe von vertrauenswürdigen Webaktivitäten eine vereinfachte Version ihrer App bereitzustellen. TWAs schließen Ihre PWA in eine WebView-ähnliche Komponente ein. Die resultierende App-Größe beträgt in der Regel nur wenige Megabyte.
Oyo, eines der größten Hotelunternehmen in Indien, entwickelte eine Lite-Version seiner App und stellte sie mithilfe eines 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 von der Android-App zu unterscheiden:
Oyo behielt sowohl die Flagship- als auch die Lite-Version im Store und bot seinen Nutzern eine Auswahlmöglichkeit.
Für eine nutzerfreundliche Website sorgen
Nutzer von Low-End-Geräten sind möglicherweise eher dazu geneigt, einfache Versionen von Apps herunterzuladen als Nutzer von High-End-Geräten. Wenn es also möglich ist, das Gerät eines Nutzers zu identifizieren, könnten Sie das schlanke App-Installationsbanner gegenüber der umfangreicheren plattformspezifischen App-Version priorisieren.
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
Mithilfe von JavaScript-Eigenschaften wie navigator.hardwareConcurrency, navigator.deviceMemory und navigator.connection können Sie Informationen zum CPU-, Speicher- bzw. Netzwerkstatus des Geräts abrufen. Beispiel:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Clienthinweise verwenden
Gerätesignale können auch in HTTP-Anfrageheadern über Clienthinweise abgeleitet werden. So implementieren Sie den vorherigen Code für den Gerätespeicher mit Clienthinweisen:
Teilen Sie dem Browser zuerst mit, dass Sie im Header der HTTP-Antwort auf eine eigene Anfrage Hinweise zum Gerätespeicher erhalten möchten:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Danach erhältst du 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 Gerätekategorie 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 Ihre eigene Logik, um diese Informationen Gerätekategorien zuzuordnen, und zeigen Sie in jedem Fall die entsprechende Aufforderung zur Installation der App an:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Fazit
Die Möglichkeit, auf dem Startbildschirm des Nutzers ein Symbol zu haben, ist eine der interessantesten 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.