So integrieren Sie „Zum Startbildschirm hinzufügen“ in Ihre PWA
Veröffentlicht: 2021-05-13Inhaltsverzeichnis
„Zum Startbildschirm hinzufügen“ (kurz A2HS) ist für das Progressive-Web-Apps-Erlebnis von grundlegender Bedeutung, da es ein vollständiges natives App-Erlebnis ermöglicht, das das Starten von Apps vom Startbildschirm des Benutzers umfasst.
Empfohlene Lektüre: PWA vs. Native: Was passt besser zu Ihnen?
Da es sich um ein so wichtiges Feature für Ihre PWA handelt, können Sie es sicherlich nicht integrieren, weshalb wir heute im SimiCart PWA-Tutorial die Gründe erläutern, warum A2HS erforderlich ist, wie es verwendet wird und wie eine PWA erstellt wird A2HS-fähig, sowohl auf dem Handy als auch auf dem Desktop.
Browser unterstützen
A2HS ist sehr nahe daran, ein universelles Feature zwischen Browsern zu sein. Derzeit wird es derzeit von Mobile Chrome/Android Webview (ab Version 31), Opera für Android (ab Version 32) und Firefox für Android (ab Version 58) unterstützt. Eine detailliertere Ansicht finden Sie auf der CanIUse-Website.
PWA Zum Startbildschirm hinzufügen in Aktion
Wenn Sie auf eine Website stoßen, auf der PWA Zum Startbildschirm hinzufügen aktiviert ist (A2HS-aktiviert), wird unten auf der Benutzeroberfläche ein Banner angezeigt, das Sie darüber informiert, dass die Website zu Ihrem Startbildschirm hinzugefügt werden kann:
Dies ist die standardmäßige vom Browser bereitgestellte Installationsförderung , die auftritt, wenn bestimmte Installationskriterien erfüllt sind. Die Benachrichtigung selbst wird angezeigt, wenn ein Benutzer Ihre Website zum ersten Mal besucht, und dann erneut nach etwa 90 Tagen.
So machen Sie Ihre Web-App auf Mobilgeräten A2HS-fähig
Installierbare Kriterien
Damit Ihre Web-App installierbar ist, muss sie:
- noch nicht installiert sein
- erfüllt eine Heuristik zur Benutzerinteraktion (der Benutzer muss mindestens 30 Sekunden lang mit der Seite interagieren)
- über eine sichere (HTTPS) Verbindung bedient werden
- Lassen Sie einen Servicemitarbeiter registrieren
- über eine ordnungsgemäß konfigurierte Manifestdatei verfügen
- Und vor allem muss der verwendete Browser das
beforeinstallpromptEreignis unterstützen. Eine vollständige Liste der Browser, die dasbeforeinstallpromptEreignis unterstützen, finden Sie unter CanIUse.
Einstieg
Zu Demonstrationszwecken verwenden wir in diesem Artikel das Projekt create-react-app als Grundlage zum Erstellen einer installierbaren PWA. create-react-app ist ein einfacher React-Befehl zum Erstellen einer Single-Page-Anwendung.
Hinweis : create-react-app erfordert mindestens node >= 10.16 und npm >= 5.6
Öffnen Sie Ihre Node.js-Eingabeaufforderung und führen Sie die folgenden Befehle aus:
npx create-react-app pwa-a2hs cd pwa-a2hs Garn beginnen
Erstellen Sie eine Manifestdatei
Ihr Webmanifest befindet sich normalerweise tief im Stammordner einer Web-App und ist eine Datei, die alle erforderlichen Informationen Ihrer Website – wie den Titel Ihrer App, Pfade zu verschiedenen Symbolen, Hintergrundfarbe usw. – in einem JSON-Format enthält. Eine Web-Manifest-Datei ist für eine funktionierende Web-App von entscheidender Bedeutung, da sie eine ordnungsgemäße Präsentation Ihrer Web-App in verschiedenen Phasen der Benutzererfahrung ermöglicht.
Wir empfehlen die Verwendung eines Manifest-Generators, um die Datei zusammen mit größenoptimierten Symbolen für Ihre App automatisch zu generieren.
Mit dem Manifest-Generator können Sie eine manifest.zip -Datei mit folgendem Inhalt haben:
Und Ihr manifest.webmanifest sollte in etwa so aussehen:
{
"theme_color": "#f69435",
"background_color": "#f69435",
"Anzeige": "eigenständig",
"Umfang": "/",
"start_url": ".",
"name": "PWA-A2HS",
"short_name": "PWA",
"description": "Demo-PWA für A2HS-Funktion",
"Symbole": [
{
"src": "/icon-192x192.png",
"Größen": "192x192",
"Typ": "Bild/PNG"
},
{
"src": "/icon-256x256.png",
"Größen": "256x256",
"Typ": "Bild/PNG"
},
{
"src": "/icon-384x384.png",
"Größen": "384x384",
"Typ": "Bild/PNG"
},
{
"src": "/icon-512x512.png",
"Größen": "512x512",
"Typ": "Bild/PNG"
}
]
} Kopieren Sie nun den Inhalt Ihrer generierten Manifestdateien in den Ordner /public/ , löschen Sie die Standarddatei manifest.json in diesem Ordner und fahren Sie mit dem nächsten Schritt fort.
Verknüpfen Sie den HTML-Code mit dem Manifest
Wenn Sie mit der Konfiguration Ihrer Manifestdatei fertig sind, speichern Sie sie im Stammverzeichnis Ihrer Website, damit sie später mit einem relativen Pfad aufgerufen werden kann, dh /manifest.webmanifest . Um die Einrichtung Ihrer Manifestdatei abzuschließen, referenzieren Sie sie in Ihrem HTML-Header ( \pwa-a2hs\public\index.html ), etwa so:
<Kopf>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<Meta
name="beschreibung"
content="Website erstellt mit create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
<title>PWA A2HS</title>
</head>Richten Sie den Installationsablauf ein
Ein Web-App-Manifest ist nicht alles, was erforderlich ist, um Ihre Web-App installierbar zu machen. Es gibt einige zusätzliche Konfigurationen, die Sie vornehmen müssen, um Ihre Web-App installierbar zu machen und sie so einer PWA einen Schritt näher zu bringen.
Erstellen Sie einen Servicemitarbeiter
Der Service Worker fängt Ihre Netzwerkanfragen ab und aktiviert verschiedene App-ähnliche Funktionen, für die PWA berühmt ist. Erstellen Sie eine service-worker.js Datei in pwa-a2hs\public und füllen Sie sie mit folgendem Inhalt:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(Funktion(Antwort) {
Rückantwort || holen (event.request);
})
);
}); Hier müssen wir uns das fetch anhören, da es für Ihre Erfahrung beim Hinzufügen zum Startbildschirm von entscheidender Bedeutung ist. Ohne es kann Ihre React-App die Installierbarkeitsanforderungen nicht erfüllen.
Registrieren Sie Ihre Servicemitarbeiter
Und damit unsere service-worker.js funktioniert, müssen wir sie registrieren, indem wir diesen Code am Ende des <body> unserer index.html einfügen:
//index.html
<Skript>
if ('serviceWorker' im Navigator) {
// Registrieren Sie einen Service-Worker, der im Stammverzeichnis von gehostet wird
// Website mit dem Standardbereich.
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('Dienstmitarbeiter-Registrierung erfolgreich:', Registrierung);
}, /*catch*/ function(error) {
console.log('Service-Worker-Registrierung fehlgeschlagen:', Fehler);
});
} anders {
console.log('Dienstmitarbeiter werden nicht unterstützt.');
}
</script>Zeit es zu testen!
Ihre PWA sollte jetzt installierbar sein. Aktualisieren Sie Ihr Frontend und Sie sollten eine Installationsschaltfläche in Ihrer Taskleiste (Desktop) oder ein kleines Benachrichtigungsbanner (Mobilgerät) sehen.
Wenn Sie auf Installieren klicken, wird auf Ihrem Desktop/Startbildschirm eine PWA-Verknüpfung wie folgt angezeigt:
Das A2HS-Erlebnis hat noch mehr zu bieten
Das oben Gesagte ist nur ein einfaches Hinzufügen zum Startbildschirm mit der vom Browser bereitgestellten Installationsförderung. Um es noch besser zu machen, können Sie auch das Beforeinstallprompt-Ereignis speichern , um den Installationsfluss mit verschiedenen Mustern zur Förderung der PWA-Installation manuell auszulösen.
Mit einer benutzerdefinierten Installationsschaltfläche können Sie vermeiden, die Reise des Benutzers zu unterbrechen, indem Sie die spezifischen Benutzer ansprechen, die von einer App-Installation profitieren. Und wenn Sie sorgfältig überlegen, wo und wo Sie die Promotion-Benutzeroberfläche platzieren, wird Ihre PWA wahrscheinlich besser abschneiden als Ihre Konkurrenten und dadurch viel bessere App-Conversion-Raten erzielen.