Alan Semenov

24 septembrie 2017 · 13 min de citire

Aplicațiile web progresive este una dintre cele mai tari tendințe în dezvoltarea web în acest moment, din ce în ce mai mulți oameni sunt dispuși să învețe despre concept și tehnologie. Majoritatea articolelor pe această temă sunt fie foarte scăzute și dificil de devorat pentru persoanele care nu sunt tehnice, fie, dimpotrivă, foarte scurte și superficiale. Acest articol încearcă să realizeze imposibilul - explicați conceptul din spatele PWA într-un mod care să fie atrăgător și de înțeles nu numai pentru profesioniștii IT, ci și pentru cei care sunt, în general, interesați de ceea ce este nou și fierbinte în industria web de astăzi.

aplicațiile

A fi progresist este greu. Trebuie să țineți constant pasul cu lumea în continuă schimbare din afară și să fiți conștienți de noile tendințe în artă, modă, politică, sănătate și alimentație. Ar trebui să-i poți spune lui Trump de la Obama. Să știți că Manet și Monet nu sunt același tip, chiar dacă ambii obișnuiau să picteze lucruri. Gătiți ca Jamie Oliver (sau cel puțin prefaceți-vă că gătiți în timp ce aruncați aleatoare mâncare în bucătărie). Ștergeți burgeri și kebab în favoarea frunzelor verzi de origine necunoscută pe care chiar și vacile refuză să le mănânce. Beți smoothie-uri din aceleași frunze în timp ce încercați tot posibilul să nu aruncați.

A fi progresist în domeniul IT este și mai greu. În plus față de tot ceea ce am menționat mai sus, ar trebui să puteți programa în toate cadrele JavaScript populare, să dețineți 50 de tricouri din fiecare nuanță de gri, să recunoașteți fiecare Pokemon după nume și să nu confundați IPA și APA cu SPA. Creșterea barbei îți va oferi puncte suplimentare în progresivitate (puncte duble dacă ești fată).

Dacă nu sunteți un fermier în vârstă de 90 de ani din Texas, pariez că dețineți un smartphone. Uită-te la el - aceste pătrate colorate de pe ecranul său principal sunt numite „aplicații native”. Acestea sunt numite „native” deoarece sunt dezvoltate nativ pentru sistemul de operare al smartphone-ului dvs. (fie el iOS sau Android sau - Doamne ferește - Windows Phone).

Dacă sunteți dezvoltator web, cel mai probabil creați site-uri web. Dar site-urile web sunt atât de anii '90, este vorba despre aplicații în zilele noastre. Și, fiind un dezvoltator web progresiv, evident că nu poți doar să dezvolți cauza aplicațiilor mobile, ei bine, aplicațiile mobile sunt atât de mari. Deci, a fost doar o chestiune de timp înainte de conceptul de aplicații web progresive a fost nascut.

Dezvoltarea aplicațiilor mobile a fost întotdeauna această „zonă interzisă” în care câțiva dintre noi, dezvoltatorii web, au îndrăznit să pășească. Ar trebui să fii un programator hardend cu cunoștințe despre Objective-C, Java sau C ++ sau, mai recent, cadre precum Xamarin sau Cordova care permit dezvoltatorilor să vizeze mai multe platforme mobile cu o singură bază de cod. Și apoi, desigur, există întotdeauna o dificultate în a vă face publică aplicația (dacă ați încercat vreodată să implementați aplicația dvs. în Apple AppStore, atunci știți la ce mă refer) și să păstrați site-ul web și toate versiunile mobile sincronizate între ele.

Evident, dezvoltatorii web nu au fost mulțumiți de această situație. Au mormăit neîncetat din beciurile caselor părinților lor, unii chiar au jurat să renunțe la consumul de Coca-Cola și să mănânce chipsuri până când problema a fost rezolvată. Un suflet nechibzuit a mers chiar până a promis că își va spăla tricoul de joc, dar și-a revenit în fire înainte să fie prea târziu. Între timp, multe minți strălucitoare au încercat din greu să elimine decalajul iritant dintre web și dezvoltarea mobilului, până când în cele din urmă Google a introdus următoarea lor cea mai bună idee după fila Incognito din Chrome - conceptul de aplicații web progresive.

Conceptul este strălucit prin simplitatea sa curajoasă. Dezvolți un site web care arată și se comportă exact ca o aplicație mobilă nativă, ceea ce înseamnă că poate fi adăugat pe ecranul de start de pe un smartphone, trimite notificări push, accesează hardware-ul dispozitivului și - cel mai important - funcționează offline. Da, ați auzit-o bine - Progresiva aplicație web funcționează la fel de lină pe o rețea tremurată sau fără o rețea, precum ar avea acces complet la internet.

Dar ... dar ... cum poate un browser să deschidă un site web fără să îl poată accesa pe web? Ei bine, credeți sau nu, dar browserul dvs. este acum capabil de multe funcții interesante la care nu v-ați aștepta niciodată să fie acum doar câțiva ani, cu excepția cazului în care, desigur, sunteți un utilizator mândru și dedicat al Netscape sau Internet Explorer 6.

Site-uri precum whatwebcando.today sunt capabile să analizeze API-urile browserului dvs. și să arate care dintre funcțiile disponibile nativ pe dispozitivele mobile sunt, de asemenea, acceptate de browserul dvs. Încercați - pariez că veți fi surprinși. Versiunea mea actuală de Chrome (56) acceptă 33 din 36 de funcții, iar restul se lucrează. Da, asta era pe laptopul meu, dar browserele mobile nu sunt atât de în urmă (în special pe platforma Android).

„Ok”, credeți, „deci browserul meu acceptă toate aceste funcții - bine. Dar am atât de multe aplicații pe smartphone-ul meu pe care le folosesc în fiecare zi, încât nu pot să renunț la toate acestea și să trec la aplicații web ”. Dar probabil că vă înșelați și aici.

O cercetare efectuată în 2015 de marketingland.com arată statistici uimitoare:

Utilizatorii de telefonie mobilă petrec 80% din timp pe dispozitivul lor folosind doar primele trei aplicații

Arată că există șanse foarte mari ca o aplicație amuzantă pe care ați descărcat-o acum 5 ani pentru a desena o mustață pe o fotografie a soacrei dvs. nu a fost folosită de atunci. Majoritatea dintre noi folosim doar o mână de aplicații, cum ar fi Facebook, Instagram, Pinterest, Twitter, un cititor de e-mail, o aplicație meteo și cam atât. Și - surpriză! - cele mai multe dintre acestea pot funcționa și ca aplicații web, având în același timp o dimensiune mult mai ușoară.

Aplicația Facebook din AppStore cântărește până la 300 Megabytes (și asta fără conținut!). Dar când mi-am deschis feedul Facebook în browser, am descărcat doar 3Mb de conținut. Da, de 100 de ori diferență.

Un alt dezavantaj imens al aplicațiilor mobile este descoperirea lor. Pentru a descărca o aplicație dintr-un magazin, trebuie mai întâi de toate să o găsiți acolo (ceea ce înseamnă că trebuie să știți exact ce căutați, altfel va trebui să vă târâți prin tone de porcării prezentate), faceți clic pe „Descărcați”, confirmați, sunteți de acord cu termenii, introduceți parola, așteptați descărcarea aplicației, așteptați instalarea bla-bla-bla ... Până când s-a terminat, s-ar putea să uitați cu ușurință ce ați căutat pentru început.

Potrivit lui Gabor Csele, un manager de produs în Google, într-o aplicație mobilă, fiecare pas pe care îl faceți să efectueze un utilizator înainte de a obține valoare din aplicația dvs. vă va costa 20% din utilizatori.

Graficul de mai sus compară cât durează un utilizator din momentul în care a descoperit o aplicație până în momentul în care a deschis-o efectiv, pe web și pe un telefon mobil. Diferența este de 40 de secunde și este o perioadă lungă de timp pe scala internetului. Frumusețea unei aplicații web este că este extrem de ușor de descoperit, la fel ca un site obișnuit - pe Google, faceți clic pe link pentru a o deschide și gata, aveți aplicația pe dispozitiv, gata de rulare.

Este greu de crezut, dar în doar un an din mai ’15 până în mai ’16 descărcările de aplicații mobile din SUA au scăzut cu peste 20%.

Dacă ne uităm la statisticile per utilizator, este și mai amuzant. Potrivit unui raport al comScore, în Marea Britanie mai mult de jumătate dintre utilizatorii de smartphone-uri descarcă aplicații ZERO în fiecare lună. În SUA este mai rău - aproape 66%.

Ok, să presupunem că v-am convins că aplicațiile mobile au fost condamnate și acum sunteți nerăbdători să aflați aceste lucruri noi progresive pentru a fi în top atunci când aplicațiile web cuceresc complet lumea mobilă. Principalul lucru de înțeles este că „Progresive aplicații web”Nu este o tehnologie, un cadru sau un limbaj de programare. Este mai mult ca un set de cerințe pe care aplicația dvs. web trebuie să le îndeplinească pentru a funcționa corect ca progresiv. Există câteva lucruri noi de stăpânit în proces, dar nimic complicat.

Să aruncăm o privire la modul exact în care un PWA reușește să funcționeze ca o aplicație mobilă nativă.

App Shell este, bine, un shell al aplicației dvs. Este setul minim de HTML, CSS și Javascript necesar pentru a reda pagina principală a aplicației dvs. Când accesați online și deschideți un site web, așteptați descărcarea întregii pagini principale, care include nu numai conținutul dinamic al paginii, ci și toate imaginile, fonturile, foile de stil, JavaScript utilizate pe pagină - și majoritatea acestea rămân aceleași indiferent de câte ori deschideți site-ul. Deci, de ce să nu ascunzi totul în cache?

Atunci când un PWA este lansat pentru prima dată, el pune imediat toate resursele statice, shell-ul aplicației sale este încorporat în cache. Data viitoare când este lansată aplicația, va servi toate activele statice direct din cache, îmbunătățind dramatic timpul necesar până când utilizatorul vede pixelii prețioși pe ecran. Dacă ați încercat vreodată să deschideți un site web pe o conexiune 3G, veți ști la ce mă refer.

Acesta este, fără îndoială, cel mai puternic lucru pe care îl pot face PWA-urile. Ele pot memora în cache nu numai componentele statice ale App Shell, ci și răspunsuri întregi de la solicitările GET.

Să presupunem că ați vizitat ieri o aplicație web de știri pentru a naviga și a citi câteva știri. Dacă îl deschideți astăzi, veți primi instantaneu fluxul de știri de ieri pe ecran, în timp ce aplicația preia conținut nou în fundal, încorporându-l dinamic în feedul pe care îl priviți deja. Dacă conținutul proaspăt nu poate fi preluat, de exemplu pentru că sunteți offline, atunci veți rămâne cu feed-ul de ieri, dar cel puțin nu veți primi erori sau filaturi nesfârșite care vor face ca întreaga aplicație să fie inutilă.

Există mai mulți algoritmi de cache pe care îi puteți implementa și depinde de dvs. pe care să îl alegeți, în funcție de scopul aplicației dvs. Acestea sunt principalele:

  • Utilizați „Cache cu rezervă în rețea”Dacă construiți o primă aplicație offline. Dacă răspunsul este deja în memoria cache, acesta va fi transmis utilizatorului și solicitarea online nu va fi făcută niciodată. Dacă răspunsul nu este încă stocat în cache, aplicația va încerca să îl aducă online și apoi să îl introducă în cache. Această abordare ar trebui utilizată pentru conținut care se schimbă foarte rar sau nu se schimbă deloc.
  • „Rețea cu rezervă la cache”Este o abordare în care utilizatorii online primesc întotdeauna versiunea online actualizată, în timp ce utilizatorii offline primesc versiunea cache. Folosiți-l pentru resurse care sunt actualizate frecvent.
  • „Cursa de cache și rețea”Este atunci când căutați simultan răspuns în cache în timp ce solicitați conținut online în același timp. Mai întâi afișați răspunsul în cache al utilizatorului și apoi îl înlocuiți cu conținut proaspăt odată ce a sosit sau adăugați conținut nou deasupra cache-ului, cum ar fi Facebook și Twitter.

Indiferent de tiparul pe care îl utilizați, ar trebui să vă ocupați întotdeauna de cazul când răspunsul nu este nici memorat în cache și nici nu poate fi preluat online. În acest caz, ar trebui să difuzați o pagină HTML statică (care ar trebui, de asemenea, să fie stocată în cache ca parte a aplicației Shell), care să spună ceva grațios pentru a liniști utilizatorul, cum ar fi „Ne pare rău, omule, cache-ul tău este gol și internetul este oprit - du-te să iei o viață normală ”. Acesta este un mod frumos de a informa utilizatorul că ceva nu a funcționat bine și că nu există nicio modalitate de a difuza acest conținut specific în acest moment. Acest lucru va face ca aplicația dvs. să fie 100% rezistentă la eșecuri și să o facă să funcționeze chiar și în timpul apocalipsei.

Asistența offline este extrem de importantă, dar pentru a înlocui cu succes o aplicație nativă, PWA trebuie să arate și să se comporte ca una. Acest lucru se realizează cu un fișier numit manifest.json care conține proprietăți formatate în JSON ale aplicației dvs., cum ar fi numele, adresa URL a paginii principale, pictogramele pentru diferite rezoluții ale dispozitivului, culorile ecranului de pornire, orientarea dispozitivului, indiferent dacă sunt vizibile comenzile browserului sau nu etc.

Dacă deschideți aplicația de două ori pe dispozitivul dvs. mobil (doar Android pentru moment) cu cel puțin 5 minute între vizite, vi se va solicita să o instalați pe dispozitiv (presupunând că manifestul dvs. este în poziție și îndeplinește criteriile cerute, desigur) . Dacă sunteți de acord cu acest lucru, veți vedea pictograma aplicației pe ecranul de pornire al dispozitivului dvs., locuind liniștit cot la cot cu aplicațiile native. Acum puteți lansa PWA la fel cum ați face o aplicație mobilă - cu un splash screen frumos, recunoaștere a orientării, acces la hardware-ul mobil etc. Bineînțeles, ar trebui să vă asigurați că PWA utilizează designul nativ al aplicației și, în special, navigarea, vă recomand să utilizați una dintre bibliotecile de componente UI Design material.

Am ajuns până aici într-un articol dedicat aplicațiilor web progresive, fără a menționa măcar un lucrător de service - Wow! Toate cache-urile despre care tocmai am vorbit sunt realizate de un mic ajutor al browserului, numit „Service Worker”, care nu este practic altceva decât un fișier JavaScript care se află în aplicația dvs., dar care rulează într-un proces separat, ceea ce înseamnă că nu va fi terminat când închideți aplicația din browser (sau chiar browserul însuși). Odată înregistrat de pe pagina principală a aplicației, Service Worker ar trebui să cache imediat activele statice ale aplicației Shell și să înceapă să asculte cererile trimise de aplicație, să cache și să difuzeze răspunsuri pe baza logicii pe care ați programat-o în ea.

Lucrătorul de servicii nu are acces la DOM - așa că nici măcar nu încercați asta - dar are acces la toate API-urile web și acolo stă puterea sa. În plus față de stocarea în cache, poate trimite notificări, trimite mesaje, poate sincroniza memoria cache locală cu stocarea de date la distanță în fundal, poate chiar să batjocorească răspunsuri cu conținut creat dinamic dacă îl programați în.

Service Worker va continua să locuiască în browserul dvs. până când îl terminați în mod explicit din Consola pentru dezvoltatori a browserului sau faceți modificări la acesta, caz în care se va actualiza la noua versiune. Acest lucru este foarte util atunci când vă mențineți aplicația mereu actualizată și este un avantaj major în comparație cu aplicațiile mobile pe care trebuie să le amintiți să le actualizați.

Deci, este totul atât de clar și pașnic în cerul PWA? Nu chiar.

În primul rând, conceptul este relativ nou, astfel încât lucrătorii de servicii și manifestul web nu sunt încă acceptate de toate browserele majore. Cel mai mare blocaj aici este lipsa de sprijin din partea Apple, care se pare că consideră creșterea aplicațiilor web progresive ca o amenințare iminentă pentru AppStore. Deși atât Service Worker, cât și Manifestul de aplicații web au fost acceptate de Chrome și Firefox de mult timp, Safari a schimbat starea implementării Service Worker de la „În curs de analiză” la „În curs de dezvoltare” doar la jumătatea anului 2017 și „Manifest de aplicație web ”Este încă„ În considerare ”. Wow.

În al doilea rând, chiar și acele browsere care au îmbrățișat deja SW au diferite niveluri de asistență atunci când vine vorba de API-urile web (așa cum este prezentat de whatwebcando.today), așa că ar trebui să fii foarte atent atunci când dezvolți un PWA super-ultra-cool care accesează bluetooth sau microfon, dacă aveți nevoie de suport cross-browser, desigur.

Mai mult decât atât, dezvoltarea unui lucrător de service nu este foarte simplă (și depanarea este un adevărat coșmar). Ar trebui să fiți un dezvoltator destul de experimentat pentru a crea o aplicație web progresivă relativ complicată. Ciclul de viață al lucrătorilor de servicii este puțin greoi, iar scriptul în sine este bazat pe promisiuni, deci asigurați-vă că utilizați API-uri asincrone pentru a nu bloca execuția paginii.

Există multe exemple minunate și utile pe Web, care a fost unul dintre motivele pentru care am încercat să mă feresc de fragmentele de cod din acest articol. Iată doar câteva pentru a vă ajuta să începeți călătoria dvs. uimitoare către viitorul web:

  • Articol fantastic de Jake Archibald care explică în detaliu toate aspectele legate de stocarea în cache a lucrătorilor de servicii, cu fragmente de cod și exemple.
  • Un articol DIY din mai multe secțiuni pentru a construi primul dvs. PWA.
  • Exemplu de surse deschise de PWA de la Google.
  • O selecție amuzantă de aplicații web progresive din viața reală, variind de la convertoare de monede simple la magazine complexe de comerț electronic și agenții de ziare.
  • Seria de articole tematice PWA despre WebAgility
  • Seturi de instrumente de pornire care vă ajută să creați o aplicație de la zero. Unele dintre ele includ un constructor de pachete, un server web sau o bibliotecă de componente UI. Unele dintre ele pot genera chiar cod pentru lucrătorul de service pentru dvs.

  • Nu în ultimul rând, o extensie Chrome super utilă, numită Lighthouse, care efectuează auditul aplicației dvs. pentru a verifica cât de bine îndeplinește cerințele unei aplicații web progresive și vă oferă un scor total, precum și sfaturi despre cum să remediați lucrurile pe care aplicația dvs. web le scade. la.

Zorile Planetei de Aplicații Web sunt peste noi și suntem locuitori norocoși pe această planetă, asistând la îmbinarea celor două lumi uriașe - Web și Mobile. Rezultatul nu va fi cu siguranță nimic spectaculos: dezvoltatorii web vor putea în cele din urmă să creeze și să implementeze rapid aplicații care arată și funcționează la fel de bine pe toate platformele, în timp ce utilizatorii de aplicații vor avea acces instantaneu la resursele lor web preferate sub formă de aplicații mobile., dar mai performant, de dimensiuni mai mici, instantaneu de descoperit și mereu actualizat.

Felicitări! Acum sunteți pe deplin capabil să purtați un chat dedicat PWA, care vă va face cu siguranță o stea a oricărei petreceri de cocktail și un magnet de pui suprem, așa că mergeți să le luați!