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.