O introducere în aplicațiile web progresive

Majoritatea dezvoltatorilor au auzit cel puțin niște noutăți în jur Programe Web Progresive. Acestea sunt susținute pe scară largă de companii de tehnologie precum Google și devin rapid normă pentru aplicațiile web cu mai multe dispozitive.

Dar, ce anume este diferența dintre un tipic și a progresiv aplicație web?

Pentru dezvoltatori, este o întreagă lume a diferenței. Aplicațiile web progresive utilizează API-uri Web moderne creați experiențe de aplicații native în browser. Aceasta înseamnă că dezvoltatorii pot construi aplicații dinamice de încărcare rapidă fără a utiliza cadre hibride.

În acest ghid, voi acoperi elementele de bază ale Aplicațiilor Web Progresive, unele caracteristici principale și cum puteți începe să vă construiți propriul.

Ce sunt Aplicațiile Web Progresive?

Aplicații Web Progresive (sau PWA) profitați de API-urile browserului web pentru a crea experiențe de aplicații native chiar în browserul de pe orice dispozitiv.

În cele din urmă, Aplicațiile Web Progresive includ a de tehnologii pe care dezvoltatorii o pot folosi pentru a crea aplicații puternice de tip nativ. Mulți vin Aplicații web API la fel ca API pentru angajații serviciului sau Apăsați API.

Sunt câteva cerințe pentru a chema ceva PWA, dar acestea sunt cele mai importante:

Este pe deplin răspuns mobil.
Aderă la îmbunătățire progresivă.
Capabil să instalați local pe smartphone-uri și tablete.
Rulează offline fără Internet, prin folosirea serviciilor de asistență.
Separă conținutul de funcționalitate utilizând shell-ul aplicației.
Built-up pe HTTPS pentru o mai mare securitate.
Detectabil în căutarea Google.
are pagini dinamice ale aplicațiilor dar fiecare în continuare are URL-ul propriu.

Daca esti gândind să construiască o mică aplicație web este posibil să încercați să creați o aplicație Web progresivă. Acest lucru vine cu un pic de curba de învățare, dar aveți atât de mult mai mult control asupra experienței utilizatorului ca rezultat.

Să ne aruncăm în fundamentele Aplicațiilor Web Progresive și să învățăm ce înseamnă să le bifăm.

Lucrătorii din domeniul serviciilor

Fiecare aplicație web progresivă are nevoie de lucrători de serviciu. Acestea sunt ca ofițerii de trafic care coordonează unde se desfășoară traficul, de unde provin datele și cum toate sunt organizate și stocate în cache.

În termeni simpli, lucrătorul de serviciu funcționează ca fișier JavaScript și rulează în fundalul aplicației dvs. web. Ori de câte ori utilizatorul efectuează un eveniment, aceasta numește script de lucrător de serviciu fie pentru a trage date, pentru a salva date, fie pentru ambele!

Utilizarea funcției Service API Worker este esenţial la rularea unui PWA acceptat offline. Așa ești tu să transmită date între vizualizări și cum poți solicitați date dintr-o bază de date locală. Dar, aceasta este cea mai mare parte chestii avansate pe care le înveți lucrand la un proiect PWA.

Luați o privire la Service Cookbooks pentru fragmente de bază și demonstrații live. Acesta este un mod fantastic de învățat prin studierea a ceea ce au făcut și alții clonarea în aplicațiile proprii.

Dacă speră să construiți o aplicație Web progresivă începeți cu API-ul Service Worker. Gândește-te cu ea și pregătește un demo simplu la nivel local. Acest lucru va crea baza pentru mai târziu crearea de caracteristici și pagini personalizate ale aplicațiilor că toți alerg prin lucrători de serviciu.

Pentru începători și fragmente detaliate de cod, Recomand specific aceste resurse:

Noțiuni de bază cu lucrătorii din domeniul serviciilor
Noțiuni de bază cu lucrătorii de service
Exemplu de lucrător de serviciu: exemplar de pagină personalizat offline

Coperta aplicației

Cele mai multe aplicații native urmați o arhitectură a aplicației pentru aplicații unde sunt datele și codul aplicației complet separate de interfața de utilizare. Capacul aplicației poate fi cache local astfel că fiecare pagină se încarcă incredibil de repede.

Acest lucru se păstrează cu același lucru “aplicație nativă” sentimentul în cazul în care interfața rămâne mereu vizibilă cu exceptia conținutul / funcționalitatea încarcă diferit de fiecare data. Consultați această pagină pe site-ul Google Developers pentru a afla mai multe despre model de coajă de aplicații.

Cele mai multe aplicații au aplicație foarte simplă și ar trebui să vă proiectați arhitectura cu simplitate în minte.

În mod obișnuit, shell-ul aplicației le are pe acestea elemente principale:

Top link-uri de bara de navigare.
Butonul de actualizare (opțional).
Conținutul fundalului pentru pagină.

Puteți găsi aici un studiu de caz frumos Google arhitectura de shell I / O Progressive Web App. Acestea oferă, de asemenea, câteva sfaturi pentru a vă construi arhitectura proprie, cache-ul și trăgând-o automat pentru fiecare pagină.

Gândiți-vă la arhitectura shell-ului toate elementele UI statice veți folosi pe fiecare pagină. Acestea ar trebui să fie separate de restul codului și cache pentru reutilizare ușoară. De asemenea, verificați Intro Google la subiect cu o multime de cod pentru a vă ajuta să începeți.

Suport online și offline

Cele mai multe aplicații native executați bine fără Internet. Aplicațiile Web Progresive sunt menite să urmeze același comportament.

Prin intermediul lucrătorilor de serviciu, puteți construi cache-uri locale cu codul JSON pentru fiecare pagină. Astfel, utilizatorii pot răsfoiți aplicația dvs. web la nivel local. S-ar putea, de asemenea include un fișier manifest pentru a defini icoanele, ecranul de pornire și alte setări de lansare.

Dacă utilizați API-ul Service Worker, aruncați o privire la API-ul Cache care este parte a aceluiași cadru. În general, este cel mai bun mod de a face stocați datele la nivel local și accesați-l de la lucrătorii de serviciu mai tarziu.

Poti de asemenea testați orice aplicație web utilizând Far, un instrument gratuit pentru verificarea respectării caracteristicilor și a suportului pentru tehnologiile PWA.

PWA mereu necesită suport offline prin API Service Worker, astfel încât să poată lucrează în state cu conectivitate redusă. Farul este cea mai bună metodă de a testa suportul offline împreună cu o serie de alte caracteristici.

Exemple live

Studiind PWA-urile live și văzând cum funcționează sunt o modalitate excelentă de a învăța. Cu toate acestea, piața aplicațiilor web progresive este încă în curs de dezvoltare, atât de multe dintre cele mai bune sunt împrăștiate în diferite colțuri ale Internetului.

Dar, datorită Galeria PWA de pietre, Am pregătit câteva exemple uimitoare pentru a arăta ce pot face cu adevărat PWA-urile.

1. Convertor valutar

Acest lucru destul de simplu convertor valutar ia cursuri de schimb și calculează curenții diferențele dintre o tona de valute la nivel mondial.

Veți observa că această aplicație web este pe deplin receptiv, sprijină atingerea, și actualizările automate fără nici o reîmprospătare a paginii.

Acestea sunt doar câteva dintre caracteristicile pe care le așteptați în orice aplicație web progresivă tipică. Acest Aplicația poate fi, de asemenea, salvată local la telefon pentru a lucra offline, deși se conectează la un fișier JSON pentru a verifica cursurile de schimb actuale.

2. Accentul în limba engleză

Pur și simplu adoră această aplicație web pentru că este atât unică, cât și incredibil de bine concepută. Harta de accente în engleză curata videoclipuri online unde oamenii au accente din anumite regiuni din SUA și Marea Britanie.

Făcând clic oriunde pe hartă, puteți asculta modul în care oamenii pronunță anumite cuvinte în diferite părți ale lumii. Aplicația este fulgeră și este provenite din GitHub pentru oricine să se uite.

Intervalele funcționează React / Redux cu Firebase si un API pentru Google Maps. Cu siguranta un exemplu foarte bun de ceva destul de simplu pentru incepatori sa invete si sa invete.

3. Pokedex.org

Un alt PWA destul de simplu este acest lucru Aplicația Pokedex create de Nolan Lawson. De asemenea, a publicat acest cod în mod liber pe GitHub, așa că e încă un alt proiect care este merită să te uiți și să studiezi.

Deoarece aceste date pot rămâne statice, sunt manipulate printr-un motor local denumit PouchDB. Toate datele provin de la PokeAPI și apoi salvează JavaScript simplu. Asta înseamnă că poți salvați-l local pe telefon ca o adevărată aplicație nativă și va rula cu sau fără acces la Internet. Destul de cool, corect?

Totul e powered by JavaScript, deci este o dovadă a cât de mult puteți face cu codul frontend. Folosește o mulțime de caching cu API-ul Service Worker, deci este nebun rapid și foarte ușor de utilizat.

4. Flipkart

În cele din urmă și cel mai surprinzător, să vedem Site-ul Flipkart. Acest lucru complet magazinul de e-commerce este, de fapt, o aplicație web progresivă.

este pe deplin receptiv și încarcă dinamic paginile. Adresele URL ale paginii sunt atașate browserului, astfel încât să le puteți copia / lipi și să le distribuiți ca un site tipic.

Acest lucru este ușor cel mai complex PWA pe care l-am văzut vreodată. Sunt uimit că dezvoltatorii au reușit să creeze o astfel de experiență fără probleme pe web pentru toți utilizatorii, să nu mai vorbim suport pentru stocarea locală offline, de asemenea.

Și, deși nu am reușit să găsesc un repo pentru întregul cod sursă Flipkart, există a Flipkart pagina pe GitHub cu fragmente de coduri mai mici de la echipa de dezvoltatori.

Aflați mai multe

Aplicațiile Web Progresive sunt incredibil de popular și cu siguranță va câștiga abur deoarece mai mulți dezvoltatori trec de la aplicații native / hibride.

Există un summit anual numit Summit-ul progresiv al aplicației web și publică videoclipuri pe YouTube, puteți viziona gratuit. Aceasta este o modalitate foarte bună de a ridica câteva cunoștințe pro fără să plătească pentru un bilet.

Dar, dacă căutați mai multe detalii Ghiduri de codificare PWA verificați cu siguranță aceste tutoriale:

Ghidul unui începător pentru aplicațiile web progresive
Creați prima aplicație web progresivă cu React
Construirea unei aplicații web progresive cu polimer