Conţinut
- Ascensiunea PWA-urilor
- PWA-urile în acțiune astăzi
- Instalare
- Lansare offline și imediată
- Experiență de primă clasă
- Magazinele de aplicații
- Integrarea platformei
- Provocări de proiectare și UX
- Anul PWA-urilor
Așa cum designul web receptiv a închis decalajul dintre site-urile desktop și mobile acum câțiva ani, tehnicile progresive ale aplicațiilor web reduc în prezent decalajul dintre web și lumea aplicațiilor. Cu experiențele utilizatorilor de la desktop la aplicațiile mobile care converg rapid, se pare că se dezvoltă un internet mult mai elegant și mai eficient - deși inevitabil nu fără unele modificări semnificative ale codului său genetic subiacent.
- Cum să construiți o aplicație web progresivă
Evident, există unele presiuni selective semnificative care determină acest lucru. În primul rând, crearea de aplicații native pentru fiecare nișă nu este neapărat o utilizare eficientă a resurselor: utilizatorii ajung cu sute de aplicații mari care pierd riscul lățimii de bandă și spațiu pe disc valoros, iar companiile cheltuiesc o mulțime de bani creând aplicații doar pentru a fi abandonate. după primele lor versiuni. Și majoritatea acestor aplicații sunt doar conduse de conținutul web: informații provenind de la servicii web sau un sistem de gestionare a conținutului.
Definiția unei aplicații web progresive nu este concretă. O PWA este doar o aplicație web care folosește mai multe API-uri și abilități noi în platforma web, utilizând îmbunătățiri progresive pentru a oferi o experiență asemănătoare aplicației pe fiecare platformă cu aceeași bază de cod. Este mai mult un set de bune practici și utilizare API care creează o experiență excelentă de tip aplicație pentru utilizatorii dvs., deci nu este ca și cum ați avea sau nu aveți un PWA; este mai mult ca și cum site-ul dvs. este mai mult sau mai puțin PWA.
Ești pe cale să începi să construiești un nou site? Încercați să utilizați un constructor de site-uri web. Și asigurați-vă că beneficiați de sprijinul necesar de la un serviciu decent de găzduire web. Sau pentru ceva ușor diferit, consultați ghidul nostru pentru cel mai bun spațiu de stocare în cloud.
Ascensiunea PWA-urilor
În timp ce numele PWA a fost inventat în 2015 în articolul Scaping Tabs Without Losing our Soul de Alex Russell care lucra la Google pentru echipa Chrome, călătoria lor nu a început de fapt acolo. Obișnuiam să avem aplicații HTML (HTA), care au fost create de Microsoft în 1999, împreună cu multe alte platforme de aplicații web de la Nokia, BlackBerry și alte companii. Apoi, în 2007, Steve Jobs a prezentat ceea ce era la acea vreme singura modalitate de a crea aplicații pentru iPhone-ul original: PWA-uri, deși cu un nume diferit. Chrome a început de acolo, a îmbunătățit API-urile câțiva ani mai târziu și a inventat numele PWA.
Având atâtea experiențe anterioare nereușite care încearcă să aducă conținut web în lumea aplicațiilor, de ce credem că va funcționa acum? Ei bine, în primul rând, revine companiilor care lucrează și promovează acum tehnologiile din spatele PWA, precum Microsoft, Google, Apple și Mozilla, pentru a numi doar câteva. De asemenea, performanța platformei web a atins un punct în care nu se percepe nicio diferență atunci când comparați un PWA bine conceput cu o aplicație nativă. Aceste condiții nu au mai existat până acum și acesta este un motiv pentru care comunitatea web a decis că a sosit timpul pentru PWA-uri.
PWA-urile în acțiune astăzi
Astăzi, PWA-urile sunt complet funcționale și pot fi instalate pe:
- Android cu majoritatea browserelor, Chrome oferind cea mai bună experiență
- iOS cu Safari
- Chromebookuri
- Windows 10 din Microsoft Store
- Prezentați telefoane cu KaiOS - o furcă de la Firefox OS - disponibilă în prezent pentru milioane de utilizatori, în principal în India
Asistența vine, de asemenea, pe macOS, Windows și Linux prin Chrome la sfârșitul acestui an. Este disponibil astăzi ca steag experimental „Desktop PWA” dacă doriți să îl încercați acum. Instalarea pe Windows on Edge fără utilizarea magazinului vine și mai târziu, deși nu este definit un interval de timp specific.
Dacă recitiți lista, puteți vedea că fiecare platformă are sau urmează să aibă suport pentru PWA-uri complet instalabile în următoarele luni. Și pentru că un PWA este doar un site web cu funcții în partea de sus care vor fi activate numai pe browsere compatibile, putem spune chiar că este compatibil cu toate browserele din funcționalitatea sa de bază.
De asemenea, PWA-urile sunt generate în prezent din majoritatea CLI-urilor pentru diferite cadre, inclusiv Angular 6+ CLI, React Create App, PWA Starter Kit de la Polymer și Preact CLI. În cele din urmă, echipa Ionic Framework a venit cu ideea de condensator, un înlocuitor open-source Cordova care face posibilă PWA-urile native pe fiecare magazin de aplicații.
Instalare
Unul dintre aspectele critice ale unui PWA este instalarea aplicației. Acest proces se face în doi pași opționali: descărcarea și stocarea offline a fișierelor aplicației și instalarea pictogramei în sistemul de operare. Deoarece ambii pași sunt opționali, puteți oferi o experiență offline în browser sau puteți oferi o pictogramă fără instalare offline. Dar un PWA adevărat ar trebui să includă ambele: trebuie să fie furnizat cu TLS sub HTTPS și utilizatorul va decide dacă îl va folosi în browser sau în propria pictogramă instalată.
Lansare offline și imediată
Creierul unui PWA este lucrătorul de service, un fișier JavaScript instalat pe dispozitivul utilizatorului, care este responsabil pentru descărcarea fișierelor aplicației, stocarea acestora într-o memorie cache și servirea ulterioară a acestora atunci când este necesar. Odată ce lucrătorul de service este instalat, acesta acționează ca un proxy de rețea pentru fiecare resursă de care are nevoie aplicația web: poate decide să o aducă din rețea sau să o livreze din memoria cache locală, ceea ce face ca aplicația să fie disponibilă offline și disponibilă doar în doar câteva milisecunde, chiar dacă utilizatorul are conexiune, emulând o lansare nativă a aplicației.
Pentru a instala un lucrător de service, documentul dvs. HTML va trebui să includă ceva de genul:
if (‘serviceWorker’ în navigator) navigator.serviceWorker.register ("sw.js");
Aceasta va instala fișierul „sw.js” pe dispozitivele utilizatorilor pentru folderul curent din domeniul curent - un concept cunoscut sub numele de domeniul de aplicare. După ce este instalat, următoarele vizite la orice adresă URL din domeniul său de aplicare vor fi gestionate de către lucrătorul de servicii.
Să presupunem că avem un PWA cu patru fișiere: index.html, app.js, app.css și logo.png. Primul lucru este să instalați acele fișiere în memoria cache din fișierul sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; de sine. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). then (cache => cache.addAll (resources)));});
Apoi, pentru ca PWA să fie întotdeauna difuzat din cache, trebuie să ascultăm evenimentul de preluare în cadrul lucrătorului de serviciu și să decidem politica cache care să fie utilizată, cum ar fi cache mai întâi cu următorul fragment.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
În acest caz, de fiecare dată când utilizatorul accesează PWA (atât de la un browser, fie de la o pictogramă instalată), motorul va prelua fișierele din cache. Un avantaj al PWA-urilor față de aplicațiile native este că dispozitivele nu trebuie să descarce din nou toate fișierele atunci când există o modificare, ci doar fișierul care s-a schimbat cu un proces transparent. De asemenea, putem descărca în continuare părți ale aplicației la cerere.
Dar provocarea este de unde știi ce fișiere au fost actualizate pe server, astfel încât să le poți înlocui în cache? Dacă nu doriți să scrieți un lucrător de service de nivel scăzut pentru a gestiona acest lucru, puteți utiliza biblioteca open-source Workbox, care vă va ajuta cu generarea lucrătorului de servicii și cu manifestul de resurse pentru a actualiza pachetul instalat.
Rețineți că fișierele PWA-ului dvs. vor fi șterse dacă există presiune de stocare pe dispozitiv, cu excepția cazului în care solicitați stocare persistentă, dacă este disponibil:
if ('stocare' în navigator && 'persistă' în navigator.storage) navigator.storage.persist ();
În Chrome și în majoritatea browserelor Android, aplicația dvs. nu poate utiliza mai mult de cinci la sută din spațiul disponibil; pe iOS este de 50 MB (aproape 50 MB) per gazdă; în Edge este variabil în funcție de dimensiunea totală a memoriei, iar în Windows Store este nelimitat.
Experiență de primă clasă
Avem creierul și acum este timpul pentru inimă: manifestul aplicației web. Scopul transformării unui site web într-un PWA nu este doar de a vă asigura că este disponibil rapid sau offline, ci și de a-i permite să aibă propria pictogramă în sistemul de operare și să ofere o experiență complet independentă ca orice altă aplicație instalată.
Manifestul este un fișier JSON care definește metadatele pentru PWA utilizate de un browser sau un magazin de aplicații pentru a defini comportamentul de instalare.
Fișierul definește mai multe proprietăți ca metadate pentru PWA. Fiecare sistem de operare va citi aceste proprietăți și va încerca tot posibilul pentru a se potrivi cu experiența pe care o preferați. De exemplu, Android va citi „display: standalone” și va crea o experiență normală a aplicației. Cu „display: minimal-ui” se va crea o experiență cu un URL vizibil și un certificat TLS - util pentru aplicațiile sensibile la securitate. Cu „display: fullscreen” se creează aplicații complet captivante fără bara de stare sau buton vizibil înapoi. Un set de pictograme și culori definește modul în care vor arăta ferestrele de afișare sau bare de titlu pentru fereastra aplicației.
Există unele generatoare de manifeste, cum ar fi Web App Manifest Generator sau PWA Builder, care vor redimensiona pictograma pentru dvs. în diferite rezoluții, dacă furnizați o rezoluție înaltă (minim 512 pixeli).
Când aveți fișierul manifest legat în documentul dvs. HTML, utilizatorii vor putea instala aplicația folosind diferite tehnici, în funcție de browser, numite de obicei Adăugați la ecranul de pornire, Instalați sau doar Adăugați. Dacă PING-ul dvs. poate fi accesat cu crawlere de către Bing, Microsoft îl va adăuga automat în Magazinul Microsoft, astfel încât utilizatorii Windows 10 îl vor putea instala de acolo.
Pe unele sisteme de operare, PWA-ul dvs. va avea capacitatea de a captura legături. Aceasta înseamnă că, după ce utilizatorul a instalat aplicația, orice adresă URL din sfera manifestului dvs. va fi deschisă în limitele aplicației dvs. și nu în browser, indiferent dacă apare în browser sau în alte aplicații, cum ar fi WhatsApp, Facebook sau un e-mail.
Dacă treceți cerințele PWA pe care le definim aici, unele platforme vor oferi badging ambiental (o pictogramă mică, de obicei în bara URL care specifică faptul că web-ul este instalabil) sau un banner de aplicație web. Dacă preferați, puteți adăuga și propriul buton de instalare personalizat utilizând următorul fragment:
window.addEventListener ("beforeinstallpr ompt", funcția (e) {e.prompt (); // va afișa promptul de instalare nativ})
Dacă PWA este instalat, evenimentul „instalat” va fi declanșat pe obiectul ferestrei, astfel încât să puteți urmări statisticile care îl ascultă.
Magazinele de aplicații
Unul dintre avantajele majore ale instalării dintr-un browser este acela de a evita procesul de aprobare a magazinului de aplicații sau de a plăti pentru a fi editor. Aceasta are avantaje evidente, cum ar fi publicarea instantanee, crearea de aplicații private pentru companii sau aplicații care nu ar trebui acceptate în magazine.
Dar unele companii doresc să fie în magazin. Începând de astăzi, singurele magazine care acceptă oficial PWA sunt Magazinul Windows și Magazinul kaiOS. Din fericire, cu instrumente precum Capacitor (în prezent în Alpha) sau PWA Builder, putem crea și semna pachete native și pentru alte platforme.
Există unele PWA-uri publicate deja în Google Play Store, cum ar fi Twitter Lite și Google Maps Go, în prezent în cadrul unor implementări personalizate. Chrome va oferi o soluție din Chrome 68 prin activități web de încredere. Din acel moment, vom putea crea un pachet Android (APK) cu un lansator în PWA și îl vom încărca în magazin. Pentru Microsoft Store pe Windows 10, site-ul PWA Builder ajută în prezent la generarea unui pachet APPX Windows 10. Folosind o vizualizare web, este posibil să puteți crea manual o aplicație iOS pentru App Store, dar fiți extrem de atenți la regulile magazinului.
Integrarea platformei
Prin implementarea tehnicilor de îmbunătățire progresivă, veți putea utiliza multe funcții, inclusiv notificări push, acces la cameră și microfon, geolocalizare, senzori, plăți, dialoguri de partajare și stocare offline. Toate aceste funcții rulează direct în cadrul modelului de securitate al browserului, inclusiv dialogurile de permisiuni.
De asemenea, putem comunica cu alte aplicații prin scheme URI, cum ar fi deschiderea Twitter, YouTube sau WhatsApp prin adresele URL ale acestora sau URI-uri personalizate, cum ar fi whatsapp: //.
În cele din urmă, atunci când creăm PWA-uri native care sunt publicate în magazin folosind condensatorul sau în magazinul Microsoft, vom putea face legătura cu API-urile native care ne vor permite să executăm practic orice cod nativ. Această integrare cu Windows 10 include acces hardware, dar și integrare cu sistemul de operare, oferind opțiuni precum Pin to Start. De exemplu, Twitter PWA vă permite să fixați orice utilizator pe ecranul de pornire.
Provocări de proiectare și UX
Proiectarea PWA-urilor are provocări unice, deci este important să petreceți ceva timp cercetând, testând cât mai mult posibil și luând în considerare următoarele:
- Utilizatorii se vor aștepta la experiențe asemănătoare aplicațiilor.
- Procesul de instalare este încă nou, deci trebuie să depunem eforturi suplimentare pentru a explica modul de instalare a aplicației.
- Actualizarea aplicației în fundal fără interacțiunea cu utilizatorul este excelentă, dar adaugă și câteva provocări pentru UX.
- Pe desktop, design-ul web receptiv are o nouă frontieră, deoarece ferestrele PWA pot fi mici, mult mai mici decât o fereastră mobilă. Aceasta înseamnă că trebuie să creăm vizualizări specifice sau widgeturi mici pentru acest format, așa cum se vede astăzi în sistemul de operare Chrome.
- Notificările push ar trebui să adauge valoare doar utilizatorului, așa că învățați să întrebați la momentul potrivit și nu pierdeți oportunitatea de a trimite mesaje care nu sunt utile sau interesante.
- Trebuie să proiectăm pentru performanță web și pentru acces offline.
Anul PWA-urilor
Odată cu adăugarea iOS și desktop anul acesta, PWA-urile sunt peste tot astăzi. Dar trebuie să ne amintim că călătoria lor abia începe, așa că așteptați schimbări frecvente și asigurați-vă că vă țineți la curent cu cele mai noi tehnici și idei pentru a oferi o experiență excelentă de utilizare în timp ce platforma evoluează.
Acest articol a fost publicat inițial în numărul 308 din net, cea mai bine vândută revistă din lume pentru designeri și dezvoltatori de web. Cumpărați numărul 308 aici sau abonați-vă aici.
