Cum să integrezi Add to Home Screen în PWA
Publicat: 2021-05-13Cuprins
Adăugarea la ecranul de pornire (A2HS pe scurt) este fundamentală pentru experiența Progressive Web Apps, deoarece permite o experiență completă de aplicație nativă, care include lansarea de aplicații de pe ecranul de pornire al utilizatorului.
Lectură recomandată: PWA vs Native: Care ți se potrivește mai bine?
Fiind o caracteristică atât de vitală pentru PWA dvs., cu siguranță nu o puteți să nu o aveți integrată, motiv pentru care astăzi, în tutorialul SimiCart PWA, vom trece peste motivele pentru care A2HS este necesar, cum este utilizat și cum se face un PWA. Pregătit pentru A2HS, atât pe mobil, cât și pe desktop.
Suport pentru browsere
A2HS este foarte aproape de a fi o caracteristică universală între browsere. În prezent, este acceptat în prezent de Mobile Chrome/Android Webview (de la versiunea 31 încolo), Opera pentru Android (de la versiunea 32 în sus) și Firefox pentru Android (de la versiunea 58 în sus). Pentru o vizualizare mai detaliată, consultați site-ul web CanIUse.
PWA Adaugă la ecranul de pornire în acțiune
Când întâlniți un site care este activat PWA Add to Home (activat A2HS), un banner care anunță că site-ul poate fi adăugat la ecranul dvs. de pornire poate fi văzut în partea de jos a interfeței cu utilizatorul:
Aceasta este promoția de instalare prestabilită furnizată de browser , care are loc atunci când sunt îndeplinite anumite criterii de instalare. Notificarea în sine va fi afișată prima dată când un utilizator vă vizitează site-ul web și apoi din nou după aproximativ 90 de zile.
Cum să vă faceți aplicația web activată pentru A2HS pe mobil
Criterii instalabile
Pentru ca aplicația dvs. web să fie instalabilă, trebuie să:
- nu este deja instalat
- îndeplinește o euristică de implicare a utilizatorului (utilizatorul trebuie să interacționeze cu pagina timp de cel puțin 30 de secunde)
- să fie servit dintr-o conexiune securizată (HTTPS).
- să aibă un lucrător de servicii înregistrat
- au un fișier manifest configurat corespunzător
- Și cel mai important, browserul în uz trebuie să accepte evenimentul
beforeinstallprompt. Pentru o listă completă a browserelor care acceptă evenimentulbeforeinstallprompt, consultați CanIUse.
Noțiuni de bază
În scopuri demonstrative, în acest articol vom folosi proiectul create-react-app ca bază pentru a crea un PWA instalabil. create-react-app este o comandă simplă React pentru a crea o aplicație cu o singură pagină.
Notă : create-react-app necesită cel puțin un nod >= 10,16 și npm >= 5,6
Deschideți linia de comandă Node.js, executați următoarele comenzi:
npx create-react-app pwa-a2hs cd pwa-a2hs începutul firului
Creați un fișier manifest
De obicei, situat în dosarul rădăcină al unei aplicații web, manifestul dvs. web este un fișier care conține toate informațiile necesare site-ului dvs. - cum ar fi titlul aplicației dvs., căile către diferite pictograme, culoarea de fundal etc. - într-un format JSON. Un fișier manifest web este crucial pentru o aplicație web funcțională, deoarece permite prezentarea corectă a aplicației dvs. web în diferite etape ale experienței utilizatorului.
Vă recomandăm să utilizați un Generator de manifeste pentru a genera automat fișierul, împreună cu pictograme optimizate pentru dimensiunea aplicației dvs.
Folosind generatorul de manifeste, puteți avea un fișier manifest.zip cu conținutul astfel:
Și manifest.webmanifest ar trebui să arate cam așa:
{
"theme_color": "#f69435",
"background_color": "#f69435",
"display": "autonom",
"domeniu": "/",
"start_url": ".",
"nume": "PWA-A2HS",
"short_name": "PWA",
"description": "Demo PWA pentru caracteristica A2HS",
„icoane”: [
{
"src": "/icon-192x192.png",
"dimensiuni": "192x192",
"type": "imagine/png"
},
{
"src": "/icon-256x256.png",
"dimensiuni": "256x256",
"type": "imagine/png"
},
{
"src": "/icon-384x384.png",
"dimensiuni": "384x384",
"type": "imagine/png"
},
{
"src": "/icon-512x512.png",
"dimensiuni": "512x512",
"type": "imagine/png"
}
]
} Acum copiați conținutul fișierelor manifest generate de dvs. în folderul /public/ , ștergeți fișierul implicit manifest.json din acest folder și treceți la pasul următor.
Conectați codul HTML la manifest
Când ați terminat de configurat fișierul manifest, salvați-l în directorul rădăcină al site-ului dvs. web, astfel încât să poată fi apelat mai târziu cu o cale relativă, de exemplu /manifest.webmanifest . Pentru a finaliza configurarea fișierului manifest, faceți referire la el în antetul HTML ( \pwa-a2hs\public\index.html ), astfel:
<cap>
<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
nume="descriere"
content="Site web creată folosind aplicația create-react"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
<title>PWA A2HS</title>
</cap>Configurați fluxul de instalare
Un manifest de aplicație web nu este tot ceea ce este necesar pentru a face aplicația dvs. web instalabilă. Există o configurație suplimentară pe care va trebui să o faceți pentru a face aplicația dvs. web instalabilă și, astfel, o faceți cu un pas mai aproape de un PWA.
Creați un lucrător de service
Lucrătorul de servicii vă interceptează solicitările de rețea și activează diverse funcții asemănătoare aplicației pentru care PWA este renumit. Creați un fișier service-worker.js în pwa-a2hs\public și completați-l cu următorul conținut:
self.addEventListener('preluare', function(eveniment) {
event.respondWith(
caches.match(event.request).then(funcție(răspuns) {
returnează răspuns || fetch(event.request);
})
);
}); Aici va trebui să ascultăm evenimentul de fetch , deoarece este crucial pentru experiența dvs. de adăugare la ecranul de pornire, fără el, aplicația dvs. React nu va putea îndeplini cerințele de instalare.
Înregistrați-vă lucrătorii de servicii
Și pentru ca service-worker.js să funcționeze, va trebui să-l înregistrăm inserând acest cod la sfârșitul <body> al index.html -ului nostru :
//index.html
<script>
if ('serviceWorker' în navigator) {
// Înregistrați un service worker găzduit la rădăcina fișierului
// site folosind domeniul implicit.
navigator.serviceWorker.register('/service-worker.js').then(funcție(înregistrare) {
console.log('Înregistrarea lucrătorului serviciului a reușit:', înregistrare);
}, /*catch*/ function(eroare) {
console.log('Înregistrarea lucrătorului serviciului a eșuat:', eroare);
});
} altfel {
console.log('Serviciul lucrătorilor nu este acceptat.');
}
</script>E timpul să-l testezi!
PWA ar trebui să fie acum instalabil. Actualizează-ți interfața și ar trebui să vezi un buton de instalare pe bara de activități (desktop) sau un mic banner de notificare (mobil).
Făcând clic pe Instalare , va avea ca rezultat o comandă rapidă PWA, astfel pe desktop/ecranul de pornire:
Există mai multe în experiența A2HS
Cele de mai sus sunt doar o adăugare de bază la experiența ecranului de pornire folosind promovarea de instalare furnizată de browser. Pentru a trece la un nivel superior, puteți, de asemenea, să salvați evenimentul beforeinstallprompt pentru a declanșa manual fluxul de instalare cu diferite modele pentru promovarea instalării PWA.
Cu un buton de instalare personalizat, puteți evita întreruperea călătoriei utilizatorului prin direcționarea anumitor utilizatori care vor beneficia de pe urma instalării unei aplicații. Și fiind atent unde și unde să plasați interfața de utilizare pentru promovare, PWA-ul dvs. este probabil să se descurce mai bine decât concurenții dvs. și ca rezultat va câștiga rate de conversie a aplicațiilor mult mai bune.