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 wie plattformspezifische Apps bieten.
Dazu gibt es verschiedene Möglichkeiten:
- Die PWA wird über den Browser installiert.
- Die PWA wird über den App-Shop installiert.
Verschiedene Vertriebskanäle sind eine wirkungsvolle Methode, um eine große Anzahl von Nutzern zu erreichen. Es kann jedoch schwierig sein, die richtige Strategie für die Installation Ihrer PWA auszuwählen.
In diesem Leitfaden werden Best Practices erläutert, mit denen du verschiedene Installationsoptionen kombinieren kannst, um die Installationsraten zu steigern und Plattformwettbewerbe und Kannibalisierungen zu vermeiden. Zu den Installationsangeboten gehören PWAs, die sowohl über den Browser als auch über den App Store installiert werden, sowie plattformspezifische Apps.
Warum sollten Sie Ihre Web-App installierbar machen?
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 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 ein Teil des Geräts, auf dem sie installiert sind.
Allerdings können sowohl eine installierbare Webanwendung als auch eine plattformspezifische App für die Nutzer verwirrend sein. Für einige Nutzer sind plattformspezifische Apps möglicherweise die beste Wahl, aber für andere können sie auch 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:Der Download einer App kann kostspielig und langsam sein. Dies gilt insbesondere für Nutzer mit langsamen Verbindungen und teuren Datentarifen.
- Reibung:Wenn Sie eine Website verlassen und in ein Geschäft wechseln, um eine App herunterzuladen, entstehen zusätzliche Hürden und es kommt zu Verzögerungen bei Nutzeraktionen, die direkt im Web ausgeführt werden können.
- Updatezyklus:Wenn Sie Änderungen an plattformspezifischen Apps vornehmen, ist möglicherweise eine App-Überprüfung erforderlich, die Änderungen und Tests (z. B. A/B-Tests) verlangsamen kann.
In einigen Fällen kann es sein, dass der Prozentsatz der Nutzer, die Ihre plattformspezifische App nicht herunterladen, sehr groß ist. Das können beispielsweise Nutzer sein, die glauben, die App nicht oft zu verwenden, oder die Ausgaben von mehreren Megabyte an Speicher oder Daten nicht rechtfertigen können. Sie können die Größe dieses Segments auf verschiedene Arten ermitteln, z. B. mithilfe einer Analyseeinrichtung, um den Prozentsatz der Spalte "Nur mobiles Web" zu erfassen. Nutzenden.
Wenn dieses Segment sehr groß ist, ist das ein Hinweis darauf, dass du Alternativen anbieten musst, um deine Erfahrungen zu installieren.
Installation der PWA über den Browser bewerben
Wenn Sie eine hochwertige PWA haben, ist es möglicherweise besser, ihre Installation anstelle Ihrer plattformspezifischen App zu bewerben. Das ist beispielsweise der Fall, wenn in der plattformspezifischen App 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 ist, 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 möchten lieber im Web bleiben. Wenn dieses Segment identifiziert werden kann, kann die PWA-Aufforderung nur ihnen angezeigt werden. Dies nennen wir „PWA als Fallback“.
PWA als primäre installierbare Version
Sobald eine PWA die Kriterien für die Installierbarkeit erfüllt, wird in den meisten Browsern angezeigt, dass sie installierbar ist. Bei Chrome auf einem Desktop-Computer wird beispielsweise ein installierbares Symbol in der Adressleiste und auf Mobilgeräten eine Miniinfoleiste angezeigt:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Das mag für einige Nutzererfahrungen ausreichen. Wenn Sie jedoch die Zahl der Installationen Ihrer PWA erhöhen möchten, empfehlen wir Ihnen dringend, auf das BeforeInstallPromptEvent zu achten und die Muster zum Bewerben der Installation Ihrer PWA zu befolgen.
Verhindern, dass Ihre PWA die plattformspezifische App-Installationsrate beeinträchtigt
In einigen Fällen haben Sie die Möglichkeit, die Installation Ihrer plattformspezifischen App statt Ihrer PWA zu bewerben. In diesem Fall empfehlen wir jedoch, 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 plattformspezifische App-Installationsaufforderung gesehen und die plattformspezifische App nicht installiert hat. Sie sind mindestens fünfmal auf die Website zurückgekehrt oder haben auf das App-Banner geklickt, aber stattdessen die Website weiterhin verwendet.
Dann kann die Heuristik 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.
Installation der PWA über einen App-Shop bewerben
Apps für App-Shops können mit verschiedenen Technologien erstellt werden, einschließlich PWA-Techniken. Unter PWA in native Umgebungen einbinden finden Sie eine Zusammenfassung der dafür verfügbaren Technologien.
In diesem Abschnitt werden die Apps im Store in zwei Gruppen eingeteilt:
- Plattformspezifische Apps:Diese Apps werden meist mit plattformspezifischem Code erstellt. Ihre Größe hängt von der Plattform ab, liegt jedoch 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 plattformspezifischem Code erstellt werden, werden jedoch häufig mit Webtechnologie erstellt und in einen plattformspezifischen Wrapper verpackt. Es können auch vollständige PWAs in die Stores hochgeladen werden. Dies wird später in diesem Artikel noch erläutert. Einige Unternehmen stellen diese als „Lite-Version“ bereit. und 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 könnte 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 ihrer Android-App. Nach der Installation ist sie nicht mehr von der Android-App zu unterscheiden:
<ph type="x-smartling-placeholder">Oyo behielt sowohl das Flagship- als auch die Lite-Version. App-Versionen im Store erhältlich sind und Nutzern eine Auswahl bieten.
Eine einfache Weberfahrung bieten
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 ist es möglich, Gerätesignale abzurufen und sie ungefähr Gerätekategorien zuzuordnen (z.B. „hoch“, „mittel“ oder „niedrig“). Sie können diese Informationen auf unterschiedliche Weise abrufen, indem Sie entweder JavaScript APIs oder Clienthinweise verwenden.
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. Früher war dies nur bei Apps möglich, die über App-Shops installiert wurden. Daher könnten Unternehmen denken, dass ein Banner zur Installation eines App-Shops ausreichen würde, um Nutzer von der Installation ihrer Apps zu überzeugen. Derzeit gibt es mehr Optionen, um Nutzern die Installation einer App zu ermöglichen. Sie können beispielsweise einfache App-Funktionen in den Geschäften anbieten oder dem Startbildschirm PWAs hinzufügen, indem sie sie direkt über die Website auffordern.