Progresívne webové aplikácie 101: Čo, prečo a ako

Čo je progresívna webová aplikácia? Prečo taký potrebujeme? Ako ho môžeme postaviť?

Už ste niekedy videli pri prehliadaní webových stránok banner „Pridať na domovskú obrazovku“, ako je uvedené vyššie? Po kliknutí na tlačidlo sa „aplikácia“ nainštaluje na pozadí. Po otvorení tejto aplikácie, ktorá sa teraz nachádza v priečinku s aplikáciami, môžete prechádzať rovnako ako vo svojom prehliadači, ale teraz priamo v mobilnom telefóne.

Teraz máte mobilnú aplikáciu, ktorá bola stiahnutá z webovej aplikácie. To všetko bez toho, aby ste museli vidieť tvár obchodu s aplikáciami.

Získanie aplikácie bolo také ľahké! Ale to nie je ani to najlepšie. Po otvorení tejto aplikácie budete môcť prehľadávať obsah, aj keď nemáte internet. K aplikácii máte offline prístup! Aké je to super?

Na čo ste narazili, je progresívna webová aplikácia (PWA). PWA umožňuje inštaláciu aplikácie zo samotného okna prehliadača, je k dispozícii v telefóne ako natívna aplikácia a funguje offline, rovnako ako natívna aplikácia.

Čo však v skutočnosti znamená, že je webová aplikácia progresívna? Poďme sa hlbšie ponoriť do toho, čo sú progresívne webové aplikácie, prečo si myslím, že sú lepšie ako natívne aplikácie a v čom sa líšia od tradičných webových aplikácií.

Čo je progresívna webová aplikácia (PWA)?

Pojem Progresívna webová aplikácia vytvorili Alex Russell a Frances Berriman. Alexovými slovami:

Progresívne webové aplikácie sú iba webové stránky, ktoré užívajú všetky správne vitamíny.

Nie je to nový rámec alebo technológia. Jedná sa o súbor osvedčených postupov na vytvorenie funkcie webovej aplikácie podobnej aplikácii pre stolné alebo mobilné zariadenia. Snom je mať skúsenosť tak jednotnú a bezproblémovú, že používateľ nedokáže rozlíšiť medzi progresívnou webovou aplikáciou a natívnou mobilnou aplikáciou.

Progresívne webové aplikácie poskytujú používateľom zážitky prostredníctvom postupného vylepšovania. V podstate to znamená, že PWA bude na novom iPhone 8 vykonávať rovnaké funkcie ako na staršej generácii iPhone. Iste, niektoré funkcie nemusia byť k dispozícii, ale aplikácia naďalej funguje a funguje tak, ako by mala.

Prečo potrebujeme progresívnu webovú aplikáciu?

Skôr ako pochopíme, prečo potrebujeme progresívnu webovú aplikáciu, poďme sa porozprávať o niektorých výzvach, ktorým dnes pri natívnych a webových aplikáciách čelíme.

Rýchlosť internetu : možno si to neuvedomujete v závislosti od toho, kde žijete, ale 60% svetovej populácie stále používa 2G internet. Dokonca aj v USA musia niektorí ľudia na prístup na internet používať telefonické pripojenie.

Pomalé načítanie webových stránok: Viete, ako dlho používateľ čaká na tlačidlo „Zavrieť X“, ak je web príliš pomalý? Tri sekundy! 53% používateľov opustí webovú stránku, ak je príliš pomalá.

Vysoké trenie: Ľudia nechcú inštalovať natívne aplikácie. Priemerný používateľ si nainštaluje 0 aplikácií za mesiac.

Zapojenie používateľov: Používatelia trávia väčšinu času v natívnych aplikáciách, dosah mobilného webu je však takmer trojnásobný v porovnaní s natívnymi aplikáciami. Väčšina používateľov preto nie je aktívne zapojená. Používatelia však trávia 80% času iba svojimi tromi najlepšími natívnymi aplikáciami.

PWA pomáhajú pri riešení týchto problémov. Existuje niekoľko dôvodov na použitie progresívnej webovej aplikácie, ale tu sú niektoré z hlavných funkcií, ktoré poskytuje:

  1. F ast: PWA poskytujú zážitky, ktoré sú neustále rýchle. Od chvíle, keď si používateľ stiahne aplikáciu, až do okamihu, keď s ňou začne interagovať, všetko sa deje skutočne rýchlo. Pretože môžete údaje ukladať do medzipamäte, je veľmi rýchle spustiť aplikáciu znova aj bez zásahu do siete.
  2. Aj začlenenom užívateľské prostredie: PWAs cíti a správajú sa ako natívne aplikácie. Sedia na domovskej obrazovke používateľa, odosielajú push notifikácie ako natívne aplikácie a majú prístup k funkciám zariadenia, ako sú natívne aplikácie. Zážitok je bezproblémový a integrovaný.
  3. R eliable skúsenosti: S pomocou servisných pracovníkov, môžeme spoľahlivo namaľovať obraz na obrazovke užívateľa, aj keď sieť zlyhala.
  4. E ngaging: Pretože môžeme posielať upozornenia používateľovi, môžeme skutočne zvýšiť interakciu tým, že používateľa upozorníme a zapojíme sa do aplikácie.

Je to skrátka POŽIAR.

Ako zostaviť progresívnu webovú aplikáciu

Google zverejnil kontrolný zoznam položiek pre progresívne webové aplikácie. Prejdem viac ako štyri minimálne požiadavky na to, aby bola aplikácia PWA:

1. Manifest webovej aplikácie

Toto je iba jsonsúbor, ktorý poskytuje meta informácie o webovej aplikácii. Obsahuje informácie ako ikona aplikácie (ktorá sa používateľovi zobrazí po inštalácii do zásuvky aplikácie), farba pozadia aplikácie, názov aplikácie, krátky názov atď. Tento súbor manifestu si môžeme napísať sami, alebo ho môžeme pomocou nástrojov vygenerovať.

2. Pracovníci v službách

Servisní pracovníci sú pracovníci riadení udalosťami, ktorí bežia na pozadí aplikácie a fungujú ako proxy medzi sieťou a aplikáciou. Sú schopní zachytiť sieťové požiadavky a uložiť informácie do pamäte cache pre nás na pozadí. To možno použiť na načítanie údajov na použitie v režime offline. Sú to javascriptskript, ktorý počúva udalosti ako načítanie a inštalácia a plní úlohy.

Tu je ukážka serviceworker.js

self.addEventListener('fetch', event => { //caching for offline viewing const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) 

3. Ikona

Používa sa na poskytnutie ikony aplikácie, keď si používateľ nainštaluje PWA do svojej zásuvky aplikácií. Obrázok JPEG bude jednoducho v poriadku. Nástroj manifestu, ktorý som zvýraznil vyššie, pomáha pri generovaní ikon pre rôzne formáty a považoval som ho za veľmi užitočný.

4. Poskytované cez HTTPS

Aby ste mohli byť PWA, musí byť webová aplikácia poskytovaná cez zabezpečenú sieť. So službami ako Cloudfare a LetsEncrypt je skutočne jednoduché získať certifikát SSL. Byť zabezpečeným webom nie je len osvedčeným postupom, ale tiež vytvára vašu webovú aplikáciu ako dôveryhodný web pre používateľov, ktorí preukazujú dôveru a spoľahlivosť a vyhýbajú sa útokom stredných mužov.

Poznámka: Toto je časť 1 z 2 dielnych sérií. V ďalšej časti vytvoríme od nuly progresívnu webovú aplikáciu s kostrou index.html. Tu si pozrite časť 2.

Naučili ste sa niečo nové? Máte pripomienky? Poznáte DevJoke? Napíš mi @ shrutikapoor08

Prečo sa programátori pletú medzi Halloweenom a Vianocami?

Pretože OCT 31 = DEC 25 #DevJokes #WorkChat

- Shruti Kapoor (@ shrutikapoor08) 22. júna 2018