Obsah
- Výstup na PWA
- PWA sú dnes v akcii
- Inštalácia
- Offline a okamžité spustenie
- Prvotriedny zážitok
- Obchody s aplikáciami
- Integrácia platformy
- Dizajn a výzvy UX
- Rok PWA
Rovnako ako pred niekoľkými rokmi reagoval responzívny webový dizajn na prekonanie rozdielu medzi webmi pre počítače a mobily, progresívne techniky webových aplikácií v súčasnosti prekonávajú rozdiel medzi webom a svetom aplikácií. S rýchlym zbližovaním používateľských skúseností z desktopových a mobilných aplikácií sa zdá, že sa vyvíja oveľa uhladenejší a efektívnejší internet - aj keď nevyhnutne nie bez významných zmien základného genetického kódu.
- Ako zostaviť progresívnu webovú aplikáciu
Toto vedie evidentne niekoľko významných selektívnych tlakov. Po prvé, vytváranie natívnych aplikácií pre každú oblasť nie je nevyhnutne efektívne využitie zdrojov: používatelia skončia so stovkami veľkých aplikácií, ktoré strácajú šírku pásma a cenné miesto na disku, a spoločnosti utrácajú veľké množstvo peňazí na vytváranie aplikácií, len aby boli opustené. po ich prvých verziách. A väčšina z týchto aplikácií je poháňaná iba webovým obsahom: informáciami pochádzajúcimi z webových služieb alebo systému na správu obsahu.
Definícia progresívnej webovej aplikácie nie je konkrétna. PWA je iba webová aplikácia, ktorá využíva niekoľko nových rozhraní API a schopností na webovej platforme pomocou progresívneho vylepšenia a ponúka tak zážitok ako z aplikácie na každej platforme s rovnakou kódovou základňou. Ide skôr o súbor osvedčených postupov a použitia rozhrania API, ktorý vašim používateľom vytvára vynikajúce prostredie podobné aplikácii, takže sa nepodobá na to, že máte alebo nemáte PWA; je to skôr tak, že váš web je viac-menej PWA.
Chystáte sa začať stavať nový web? Skúste použiť nástroj na tvorbu webových stránok. Nezabudnite tiež na to, že získate potrebnú podporu od slušnej webhostingovej služby. Alebo niečo trochu iné, pozrite si nášho sprievodcu najlepším cloudovým úložiskom.
Výstup na PWA
Zatiaľ čo meno PWA vzniklo v roku 2015 v článku Escaping Tabs without Losing our Soul od Alexa Russella pracujúceho v spoločnosti Google pre tím Chrome, ich cesta sa tam vlastne nezačala. Používali sme HTML aplikácie (HTA), ktoré spoločnosť Microsoft vytvorila v roku 1999, spolu s mnohými ďalšími platformami webových aplikácií od spoločností Nokia, BlackBerry a ďalších spoločností. Potom v roku 2007 Steve Jobs predstavil v tom čase jediný spôsob vytvárania aplikácií pre pôvodný iPhone: PWA, aj keď s iným názvom. Od tejto chvíle začal Chrome, ktorý o pár rokov vylepšil API a vymyslel názov PWA.
Prečo si myslíme, že to bude teraz fungovať, keď sa toľko minulých neúspešných skúseností snaží preniesť webový obsah do sveta aplikácií? V prvom rade je na spoločností, ktoré teraz pracujú a propagujú technológie, ktoré stoja za PWA, ako sú Microsoft, Google, Apple a Mozilla. Výkon webovej platformy tiež dosiahol bod, v ktorom nie je viditeľný rozdiel pri porovnaní dobre navrhnutej PWA s natívnou aplikáciou. Tieto podmienky nikdy predtým neexistovali a to je jeden z dôvodov, prečo sa webová komunita rozhodla, že nadišiel čas pre PWA.
PWA sú dnes v akcii
Dnes sú PWA plne funkčné a inštalovateľné na:
- Android s väčšinou prehliadačov, s Chrome ponúka ten najlepší zážitok
- iOS so Safari
- Chromebooky
- Windows 10 z obchodu Microsoft Store
- Špeciálne telefóny s KaiOS - vidlica z Firefox OS - v súčasnosti dostupná pre milióny používateľov hlavne v Indii
Neskôr v tomto roku prichádza podpora aj pre macOS, Windows a Linux prostredníctvom prehliadača Chrome. Dnes je k dispozícii ako experimentálny príznak „Desktop PWA“, ak si ho chcete vyskúšať. Inštalácia v systéme Windows na Edge bez použitia obchodu prichádza tiež neskôr, aj keď nie je definovaný žiadny konkrétny časový rámec.
Ak si prečítate zoznam znova, uvidíte, že každá platforma má alebo bude mať v najbližších mesiacoch podporu pre plne inštalovateľné PWA. A pretože PWA je iba web s funkciami navrchu, ktorý sa bude aktivovať iba v kompatibilných prehľadávačoch, môžeme dokonca povedať, že je kompatibilný so všetkými prehľadávačmi od základných funkcií.
V súčasnosti sa tiež generujú PWA z väčšiny CLI pre rôzne rámce, vrátane Angular 6+ CLI, React Create App, PWA Starter Kit od Polymer a Preact CLI. Tím Ionic Framework nakoniec prišiel s myšlienkou Capacitora, open-source náhrady Cordova, ktorá umožňuje natívne PWA v každom obchode s aplikáciami.
Inštalácia
Jedným z kritických aspektov PWA je inštalácia aplikácie. Tento proces sa vykonáva v dvoch voliteľných krokoch: stiahnutie a offline uloženie súborov aplikácie a inštalácia ikony v operačnom systéme. Pretože obidva kroky sú voliteľné, môžete v prehliadači ponúknuť prácu v režime offline alebo môžete ponúknuť ikonu bez inštalácie v režime offline. Skutočná PWA by však mala obsahovať oboje: musí sa poskytovať s TLS v rámci HTTPS a používateľ sa rozhodne, či ju použije v prehliadači alebo v rámci vlastnej nainštalovanej ikony.
Offline a okamžité spustenie
Mozgom PWA je servisní pracovník, súbor JavaScriptu nainštalovaný na zariadení používateľa, ktorý je zodpovedný za sťahovanie súborov aplikácie, ich ukladanie do medzipamäte a ich neskoršie poskytovanie v prípade potreby. Po nainštalovaní servisného pracovníka funguje ako sieťový proxy server pre každý zdroj, ktorý webová aplikácia potrebuje: môže sa rozhodnúť načítať ju zo siete alebo ju doručiť z miestnej medzipamäte, vďaka čomu je aplikácia dostupná offline a tiež dostupná iba v pár milisekúnd, aj keď má používateľ pripojenie, emulujúce spustenie natívnej aplikácie.
Na inštaláciu servisného pracovníka bude musieť váš dokument HTML obsahovať niečo ako:
if („serviceWorker“ v navigátore) navigator.serviceWorker.register („sw.js“);
Týmto sa do zariadení používateľov nainštaluje súbor „sw.js“, ktorý obsahuje aktuálny priečinok v aktuálnej doméne - koncept známy ako rozsah. Po nainštalovaní bude daný pracovník služby spravovať ďalšie návštevy ľubovoľnej adresy URL v jej rozsahu.
Povedzme, že máme PWA so štyrmi súbormi: index.html, app.js, app.css a logo.png. Prvá vec je nainštalovať tieto súbory do medzipamäte v súbore sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; ja. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Potom, aby sa PWA vždy obsluhovala z medzipamäte, musíme si vypočuť udalosť načítania v rámci servisného pracovníka a rozhodnúť sa pre politiku vyrovnávacej pamäte, ktorá sa má použiť, napríklad najskôr pomocou nasledujúceho úryvku.
self.addEventListener ("načítanie", e => e.respondWith (caches.match (e.request). then (res => res);
V takom prípade zakaždým, keď používateľ získa prístup k PWA (z prehľadávača alebo z nainštalovanej ikony), modul získa súbory z vyrovnávacej pamäte. Výhodou PWA v porovnaní s natívnymi aplikáciami je, že zariadenia nemusia pri zmene znova sťahovať všetky súbory, iba súbor, ktorý sa zmenil transparentným procesom. Stále si však môžeme na požiadanie stiahnuť časti aplikácie.
Výzvou však je, ako viete, ktoré súbory boli na serveri aktualizované, aby ste ich mohli nahradiť v pamäti cache? Ak nechcete písať pracovníka na nízkej úrovni, ktorý by to spravoval, môžete použiť knižnicu Workbox s otvoreným zdrojovým kódom, ktorá vám pomôže s generovaním pracovníka služby a manifestom prostriedkov na aktualizáciu nainštalovaného balíka.
Pamätajte, že súbory vášho PWA sa odstránia, ak je na zariadenie vyvíjaný tlak na úložisko, pokiaľ nepožiadate o trvalé úložisko, ak je k dispozícii:
if ('storage' in navigator && 'persist' in navigator.storage) navigator.storage.persist ();
V prehliadači Chrome a vo väčšine prehliadačov pre Android nedokáže vaša aplikácia využiť viac ako päť percent dostupného priestoru; v systéme iOS je to 50 MB (takmer 50 MB) iba na hostiteľa; v Edge je variabilný podľa celkovej veľkosti pamäte a vo Windows Store je neobmedzený.
Prvotriedny zážitok
Máme mozog a teraz je čas na srdce: manifest webovej aplikácie. Účelom premeny webovej stránky na PWA nie je iba zaistiť jej dostupnosť rýchlo alebo offline, ale tiež umožniť jej, aby mala v OS svoju vlastnú ikonu a ponúkala úplne samostatný zážitok ako každá iná nainštalovaná aplikácia.
Manifest je súbor JSON, ktorý definuje metadáta pre PWA používané prehliadačom alebo obchodom s aplikáciami na definovanie priebehu inštalácie.
Súbor definuje niekoľko vlastností ako metadáta pre váš PWA. Každý OS bude čítať tieto vlastnosti a bude sa snažiť čo najlepšie zodpovedať vašim preferenciám. Android bude napríklad čítať „display: standalone“ a bude vytvárať bežné prostredie aplikácie. Vďaka funkcii ‘display: minimal-ui’ vytvorí prostredie s viditeľnou adresou URL a certifikátom TLS - užitočné pre aplikácie citlivé na zabezpečenie. Vďaka funkcii „display: fullscreen“ vytvára úplne pohlcujúce aplikácie bez stavového riadku alebo viditeľného tlačidla späť. Sada ikon a farieb definuje, ako budú úvodné obrazovky alebo záhlavia hľadať okno vašej aplikácie.
Existujú niektoré generátory manifestov, napríklad Generátor manifestov webových aplikácií alebo PWA Builder, ktoré tiež zmenia veľkosť ikony v rôznych rozlíšeniach, ak poskytnete rozlíšenie s vysokým rozlíšením (minimálne 512 pixelov).
Ak máte vo svojom dokumente HTML prepojený súbor manifestu, používatelia si budú môcť aplikáciu nainštalovať rôznymi technikami v závislosti od prehľadávača, ktoré sa zvyčajne nazývajú Pridať na domovskú obrazovku, Inštalovať alebo len Pridať. Ak váš PWA dokáže prehľadať Bing, spoločnosť Microsoft ho automaticky pridá do obchodu Microsoft Store, aby si ho odtiaľ mohli nainštalovať používatelia systému Windows 10.
V niektorých operačných systémoch bude mať vaša PWA schopnosť zaznamenávať odkazy. To znamená, že keď si používateľ nainštaluje aplikáciu, akákoľvek adresa URL v rozsahu vášho manifestu sa otvorí v medziach vašej aplikácie a nie v prehliadači, bez ohľadu na to, či sa zobrazuje v prehliadači alebo iných aplikáciách, ako je WhatsApp, Facebook alebo e-mail.
Ak splníte požiadavky PWA, ktoré tu definujeme, niektoré platformy ponúknu ambientné značenie (malá ikona zvyčajne v paneli s adresou URL, ktorá špecifikuje, že web je možné nainštalovať), alebo banner webovej aplikácie. Ak chcete, môžete tiež pridať svoje vlastné vlastné tlačidlo Inštalovať pomocou nasledujúceho úryvku:
window.addEventListener ("beforeinstallpr ompt", funkcia (e) {e.prompt (); // zobrazí natívnu výzvu na inštaláciu})
Ak je nainštalovaný PWA, udalosť „nainštalovaná“ bude spustená na objekt okna, aby ste mohli sledovať štatistiky, ktoré ju počúvajú.
Obchody s aplikáciami
Jednou z hlavných výhod inštalácie z prehliadača je schopnosť vyhnúť sa procesu schvaľovania obchodu s aplikáciami alebo platiť za vydavateľa. To má zjavné výhody, ako napríklad okamžité publikovanie, vytváranie súkromných aplikácií pre spoločnosti alebo aplikácie, ktoré by v obchodoch nemali byť akceptované.
Niektoré spoločnosti však v obchode chcú byť. Od dnešného dňa sú jedinými obchodmi, ktoré oficiálne akceptujú PWA, Windows Store a kaiOS Store. Našťastie s nástrojmi ako Capacitor (momentálne vo verzii Alpha) alebo PWA Builder môžeme vytvárať a podpisovať natívne balíčky aj pre ďalšie platformy.
V obchode Google Play už sú zverejnené niektoré PWA, napríklad Twitter Lite a Google Maps Go, ktoré sú v súčasnosti pod vlastnou implementáciou. Prehliadač Chrome ponúkne riešenie z prehliadača Chrome 68 prostredníctvom dôveryhodných webových aktivít. Od tohto okamihu budeme môcť vytvoriť balíček Android (APK) so spúšťačom do nášho PWA a nahrať ho do obchodu. Pre Microsoft Store v systéme Windows 10 pomáha web PWA Builder s generovaním balíka APPX Windows 10. Pomocou webového zobrazenia možno budete môcť manuálne vytvoriť aplikáciu pre iOS pre App Store, s pravidlami obchodu však buďte mimoriadne opatrní.
Integrácia platformy
Implementáciou techník progresívneho vylepšenia budete môcť využívať mnoho funkcií, vrátane push notifikácií, prístupu ku kamere a mikrofónu, geolokácie, senzorov, platieb, dialógov zdieľania a offline úložiska. Všetky tieto funkcie bežia priamo v rámci modelu zabezpečenia prehliadača vrátane dialógových okien povolení.
Môžeme tiež komunikovať s inými aplikáciami prostredníctvom schém URI, napríklad otvorením Twitteru, YouTube alebo WhatsApp prostredníctvom ich adries URL alebo vlastných identifikátorov URI, napríklad whatsapp: //.
Nakoniec, pri vytváraní natívnych PWA, ktoré sú publikované v obchode pomocou Capacitoru alebo v Microsoft Store, budeme schopní premosťovať natívne API, ktoré nám umožnia spustiť prakticky akýkoľvek natívny kód. Táto integrácia s Windows 10 zahŕňa prístup k hardvéru, ale aj integráciu s OS, ktorá ponúka možnosti ako Pin to Start. Napríklad Twitter PWA umožňuje pripnúť ľubovoľného používateľa na úvodnú obrazovku.
Dizajn a výzvy UX
Navrhovanie PWA má jedinečné výzvy, takže je dôležité venovať nejaký čas výskumu, testovaniu v maximálnej možnej miere a zváženiu nasledujúceho:
- Používatelia budú očakávať zážitky podobné aplikáciám.
- Proces inštalácie je stále nový, takže je potrebné vynaložiť ďalšie úsilie na vysvetlenie spôsobu inštalácie aplikácie.
- Aktualizácia aplikácie na pozadí bez interakcie používateľa je skvelá, ale pre UX prináša aj určité výzvy.
- Na pracovnej ploche má responzívny webový dizajn novú hranicu, pretože okná PWA môžu byť malé, oveľa menšie ako výrez pre mobilné zariadenia. To znamená, že pre tento formát musíme vytvoriť konkrétne zobrazenia alebo malé widgety, ako je to dnes viditeľné v systéme Chrome OS.
- Push notifikácie by mali byť pre používateľa iba pridanou hodnotou, takže sa naučte pýtať sa v pravý okamih a nepremárnite príležitosť zasielaním správ, ktoré nie sú užitočné alebo zaujímavé.
- Musíme navrhnúť výkon webu a prístup offline.
Rok PWA
Po tohtoročnom pridaní iOS a desktopu sú dnes PWA všade. Musíme si však uvedomiť, že ich cesta ešte len začína, takže počítajte s častými zmenami a zabezpečte si prehľad o najnovších technikách a nápadoch, vďaka ktorým získate vynikajúci používateľský zážitok pri vývoji platformy.
Tento článok bol pôvodne publikovaný v čísle 308 sieť, najpredávanejší časopis pre webdizajnérov a vývojárov na svete. Kúpte si číslo 308 tu alebo prihlásiť sa na odber tu.
