31
august 2018
Aplicații Web Progresive
În ultima vreme a fost o discuție binevenită despre aplicațiile Web progresive. Sunt încă un model relativ nou, însă principiile lor pot îmbunătăți aplicațiile construite cu vanilla JS, React, Polymer, Angular sau orice alt cadru. În acest articol vor fi rezumate câteva opțiuni de referință pentru a începe cu propriul PWApp.
Ce este o aplicație Web progresivă?
O aplicație progresivă Web utilizează capabilitățile web moderne pentru a oferi o experiență de utilizare asemănătoare unei aplicații. Acestea evoluează de la paginile din filele browser-ului până la aplicațiile imersive de nivel superior.
Este important să rețineți că aplicațiile web progresive funcționează peste tot, dar sunt supraîncărcate în browser-ele moderne. Îmbunătățirea progresivă este o coloană vertebrală a modelului.
Aaron Gustafson a asemănat îmbunătățirea progresivă cu arahidele M&M. Arahidele sunt conținutul dvs., stratul de ciocolată este stratul de prezentare și JavaScript-ul este bomboana tare. Acest strat poate varia în funcție de culoare, iar performanța poate varia în funcție de capacitățile browser-ului pe care îl utilizează.
Deoarece utilizatorul construiește o relație cu aceste aplicații prin folosirea repetată, face ca bomboanele să fie chiar mai dulci - încărcarea foarte rapidă pe conexiunile de rețea lentă (mulțumită Service Worker), trimiterea notificărilor Push relevante și o pictogramă de primă clasă pe ecranul de start al utilizatorului. De asemenea, pot profita de bannerele inteligente de instalare a aplicațiilor web.
Aplicațiile Web progresive sunt:
- Progresive - Lucrează pentru fiecare utilizator, indiferent de alegerea browser-ului deoarece sunt construite cu o îmbunătățire progresivă ca principiu de bază.
- Responsiv - Scalabile oricărei forme, desktop, mobil, tabletă sau orice altceva.
- Conectivitate independentă - Îmbunătățite pentru a putea fi accesate offline sau în rețele de calitate scăzută.
- Aplicații asemănătoare - Utilizează modelul app-shell pentru a oferi navigări și interacțiuni în stilul aplicației.
- Fresh - Întotdeauna actualizate grație procesului de actualizare a angajaților.
- Sigure - Servit prin TLS pentru a preveni snooping-ul și pentru a vă asigura că textul nu a fost modificat.
- Descoperite - sunt identificabile ca "aplicații" datorită manifestărilor W3C și domeniului de înregistrare al angajaților care permit motoarelor de căutare să le găsească.
- Actualizabile - Folosirea notificărilor de tip push.
- Ușor de instalat - Permite utilizatorilor să "păstreze" aplicațiile pe care le consideră cele mai utile pe ecranul lor de pornire, fără a avea probleme cu un magazin de aplicații.
- Accesare ușoară - Prin URL ce nu necesită instalare complexă.
Aplicațiile Web Progresive nu sunt, de asemenea, unice pentru Chrome pentru Android. Mai jos putem vedea aplicația Pokedex Progressive Web care funcționează în Firefox pentru Android (Beta), cu funcții de cache de la începutul paginii Add to Homescreen și Service Worker ce funcționează foarte bine.
Unul dintre aspectele frumoase ale naturii "progresive" față de acest model este acela că trăsăturile pot fi deblocate treptat, deoarece vânzătorii de browser-uri oferă un suport mai bun pentru ei. Aplicațiile Web Progresive, cum ar fi Pokedex, de asemenea funcționează excelent și în Opera pe Android, cu câteva diferențe notabile în implementare:
Principii
Manifestul aplicației Web
Manifestul pentru aplicațiile Web este un simplu fișier JSON ce oferă dezvoltatorului posibilitatea de a controla modul în care aplicația apare pe dispozitivul utilizatorului în zonele în care se așteaptă să vadă aplicații (de exemplu, pe ecranul de pornire al dispozitivului).
Manifestul permite aplicației dvs. Web să aibă o prezență mai natală pe ecranul inițial al utilizatorului. Permite lansarea aplicației în modul ecran complet (fără ca bara de adrese URL să fie prezentă), oferă control asupra orientării ecranului și în versiunile recente de Chrome pe Android, acceptă definirea unui ecran de pornire și a culorii temei pentru bara de adrese. Este, de asemenea, folosit pentru a defini un set de pictograme după mărimea și densitatea utilizate pentru ecranul de pornire mai sus menționat și pictograma ecranului de start.
Browser-ele bazate pe Chrome (Chrome, Opera etc.) acceptă manifestările Web App existente în prezent, cu sprijinul dezvoltării active a companiei Firefox. WebKit și Safari nu au publicat încă semnale publice despre intențiile lor de a pune în aplicare aceste funcții.
Banner pentru ecranul principal
Browser-ul Chrome pe Android are suport pentru adăugarea site-ul dvs. pe ecranul inițial pentru o perioadă de timp, dar versiunile recente acceptă în mod proactiv adăugarea site-urilor utilizând bannere native pentru instalarea App.
Pentru ca aplicația dvs. să fie afișată de către solicitări trebuie să:
- Aibă un manifest valid Web App.
- Fiți difuzat pe HTTPS.
- Autentificați un angajat valabil.
- Vizitați de două ori, cu cel puțin 5 minute între vizite.
Sunt disponibile numeroase exemple de banner pentru aplicația App, care acoperă bannerele de bază, până la cazuri de utilizare mai complexe, cum ar fi afișarea de aplicații asociate.
Service Worker pentru Cache-ul offline
Un service worker este un script care rulează în fundal, separat de pagina dvs. Web. Reacționează la evenimente, inclusiv solicitările de rețea din paginile pe care le servește. Un service worker are o durată de viață, intenționată, de scurtă durată.
Se activează pe baza unui eveniment și se execută numai atâta timp cât trebuie să proceseze datele. Un service worker vă permite să utilizați API-ul Cache și poate fi folosit pentru a oferi utilizatorilor o experiență offline.
Service workeri sunt puternici pentru cache-ul offline, dar oferă și câștiguri semnificative de performanță sub forma încărcării instantanee pentru vizitele repetate pe site-ul sau aplicația dvs. Web. Aveți posibilitatea să stocați în memoria Cache shell-ul de aplicație, astfel încât acesta să funcționeze offline și să populeze conținutul său utilizând JavaScript.
Două dintre cele mai importante utilități ale unui Service Worker sunt:
- sw-precache: un instrument de construire a timpului care generează un script de service worker util.
- sw-toolbox: o bibliotecă care oferă cache-ul runtime pentru resurse rar folosite.
Notificările Push
Notificările push va permite utilizatorilor înscrierea la actualizări în timp util de la site-urile pe care le îndrăgesc și va permite reangajarea în mod efectiv cu conținut personalizat.
În mod eficient, puteți crea aplicații web pe care utilizatorii să le poată angaja în afara unui tab. Browserul poate fi închis și nici măcar nu trebuie să utilizeze în mod activ aplicația web pentru a se implica în experiența dvs. Caracteristica necesită atât lucrător de serviciu, cât și un manifest de aplicație Web, care se bazează pe unele dintre caracteristicile rezumate mai devreme.
API-ul Push este implementat în Chrome, în dezvoltare în Firefox și în considerare în Edge. Nu există semnale publice de la Safari despre intenția lor de a pune în aplicare această caracteristică încă.
Caracteristici avansate
Caracteristicile suplimentare care vin pe platforma Web, cum ar fi Syncronisation de fundal (pentru sincronizarea datelor cu un server chiar și atunci când aplicația web este închisă) și Web Bluetooth (pentru a vorbi cu dispozitivele Bluetooth din aplicația Web).
One-shot Background Sync a fost activat în Chrome, iar Jake Archibald are un videoclip al aplicației sale wikipedia offline și al articolului care îl demonstrează în acțiune. Francois Beaufort are, de asemenea, un număr de eșantioane Web Bluetooth disponibile dacă este interesat să încerce acel API.
Prietenos cu Framework-urile
În realitate, nimic nu vă oprește să aplicați oricare dintre principiile de mai sus ale unei aplicații sau a unui cadru existent cu care construiți. Câteva alte principii care merită să vă păstrați în minte în timp ce construiți aplicația Web progresivă sunt modelul de performanță orientat spre utilizator RAIL și animațiile bazate pe FLIP.
Arhitectura
Există nivele diferite de modul în care modelul "all-in" intră pe modelul Progresiv Web App, dar o abordare comună este luată în arhitectură în jurul unei aplicații Shell. Aceasta nu este o cerință dificilă, dar are câteva avantaje.
Arhitectura Application Shell încurajează Cache-ul aplicației (interfața de utilizare), astfel încât să funcționeze offline și să populeze conținutul său utilizând JavaScript. La accesările repetate, acest lucru vă permite să obțineți pixeli semnificativi pe ecran într-adevăr rapid fără rețea, chiar dacă conținutul dvs. va veni în cele din urmă. Acest lucru vine cu câștiguri semnificative de performanță.
Jeremy Keith a comentat recent că, în acest tip de model, redarea de la server nu ar trebui privită ca o schimbare alternativă, dar randamentul de pe partea clientului ar trebui privit ca o îmbunătățire. Acesta este un feedback corect.
În modelul Application Shell, redarea pe partea de server ar trebui utilizată cât mai mult posibil și redarea progresivă pe partea clientului ar trebui utilizată ca un accesoriu în același mod în care vom "îmbunătăți" experiența atunci când serviciul de asistență este sprijinit. Există multe moduri în care acest lucru poate fi abordat în cele din urmă.
Sursa: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/