Obsah
- Výstup na PWA
- PWA v akci dnes
- Instalace
- Offline a okamžité spuštění
- Prvotřídní zážitek
- Obchody s aplikacemi
- Integrace platformy
- Výzvy v oblasti designu a UX
- Rok PWA
Stejně jako před několika lety responzivní webový design překlenul propast mezi desktopovými a mobilními weby, v současné době propasti mezi webem a světem aplikací vyrovnávají progresivní techniky webových aplikací. Vzhledem k rychlému sbližování uživatelských zkušeností z desktopových a mobilních aplikací se zdá, že se vyvíjí mnohem elegantnější a efektivnější internet - i když nevyhnutelně ne bez významných změn základního genetického kódu.
- Jak vytvořit progresivní webovou aplikaci
Je zřejmé, že to řídí některé významné selektivní tlaky. Za prvé, vytváření nativních aplikací pro každý výklenek nemusí nutně znamenat efektivní využití zdrojů: uživatelé skončí se stovkami velkých aplikací plýtvajících šířkou pásma a cenným prostorem na disku a společnosti utrácejí spoustu peněz za vytváření aplikací pouze pro to, aby byly opuštěny po jejich prvních verzích. A většina z těchto aplikací je řízena pouze webovým obsahem: informace pocházející z webových služeb nebo systému pro správu obsahu.
Definice progresivní webové aplikace není konkrétní. PWA je jen webová aplikace, která používá několik nových API a schopností na webové platformě pomocí progresivního vylepšení, aby nabídla zážitek podobný aplikaci na každé platformě se stejnou základnou kódu. Jedná se spíše o sadu osvědčených postupů a použití rozhraní API, které vašim uživatelům vytváří vynikající prostředí podobné aplikaci, takže se vám nepodobá na to, že máte nebo nemáte PWA; je to spíše tak, že váš web je víceméně PWA.
Chystáte se začít stavět nový web? Zkuste použít nástroj pro tvorbu webových stránek. A ujistěte se, že získáte podporu, kterou potřebujete, také od slušné webhostingové služby. Nebo něco trochu jiného, přečtěte si našeho průvodce nejlepším cloudovým úložištěm.
Výstup na PWA
Zatímco název PWA byl vytvořen v roce 2015 v článku Escaping Tabs without Losing our Soul od Alexa Russella pracujícího ve společnosti Google pro tým Chrome, jejich cesta tam vlastně nezačala. Mívali jsme HTML aplikace (HTA), které byly vytvořeny společností Microsoft v roce 1999, spolu s mnoha dalšími platformami webových aplikací od společností Nokia, BlackBerry a dalších společností. V roce 2007 pak Steve Jobs představil v té době jediný způsob, jak vytvořit aplikace pro původní iPhone: PWA, i když s jiným názvem. Chrome začal odtud, vylepšil API o několik let později a vynalezl název PWA.
Proč si myslíme, že to teď bude fungovat, když se tolik předchozích neúspěšných zkušeností snaží přenést webový obsah do světa aplikací? Primárně je to na společnostech, které nyní pracují a propagují technologie, které stojí za PWA, jako jsou Microsoft, Google, Apple a Mozilla, abychom jmenovali jen několik. Také výkon webové platformy dosáhl bodu, kdy při srovnání dobře navrženého PWA s nativní aplikací není žádný vnímaný rozdíl. Tyto podmínky nikdy předtím neexistovaly a to je jeden z důvodů, proč se webová komunita rozhodla, že nastal čas pro PWA.
PWA v akci dnes
Dnes jsou PWA plně funkční a instalovatelné na:
- Android s většinou prohlížečů, Chrome nabízí nejlepší prostředí
- iOS se Safari
- Chromebooky
- Windows 10 z obchodu Microsoft Store
- Speciální telefony s KaiOS - vidlice z Firefox OS - v současné době k dispozici milionům uživatelů hlavně v Indii
Později v tomto roce přichází podpora pro MacOS, Windows a Linux prostřednictvím prohlížeče Chrome. Dnes je k dispozici jako experimentální příznak „Desktop PWA“, pokud si jej chcete hned vyzkoušet. Instalace v systému Windows na Edge bez použití obchodu přichází také později, ačkoli není definován žádný konkrétní časový rámec.
Pokud si přečtete seznam, uvidíte, že každá platforma má nebo má mít podporu pro plně instalovatelné PWA v následujících měsících. A protože PWA je pouze web s funkcemi nahoře, které se budou aktivovat pouze v kompatibilních prohlížečích, můžeme dokonce říci, že je kompatibilní se všemi prohlížeči od jeho základních funkcí.
PWA se také aktuálně generují z většiny CLI pro různé rámce, včetně Angular 6+ CLI, React Create App, PWA Starter Kit od Polymer a Preact CLI. Nakonec tým Ionic Framework přišel s myšlenkou Capacitor, což je open-source náhrada Cordova, která umožňuje nativní PWA v každém obchodě s aplikacemi.
Instalace
Jedním z kritických aspektů PWA je instalace aplikace. Tento proces se provádí ve dvou volitelných krocích: stahování a offline ukládání souborů aplikace a instalace ikony v operačním systému. Protože oba kroky jsou volitelné, můžete nabídnout offline prostředí v prohlížeči nebo můžete nabídnout ikonu bez offline instalace. Skutečný PWA by ale měl zahrnovat obojí: musí být obsluhováno TLS pod HTTPS a uživatel se rozhodne, zda jej použije v prohlížeči nebo v rámci vlastní nainstalované ikony.
Offline a okamžité spuštění
Mozkem PWA je servisní pracovník, soubor JavaScriptu nainstalovaný na zařízení uživatele, který je zodpovědný za stahování souborů aplikace, jejich ukládání do mezipaměti a v případě potřeby je později obsluhuje. Jakmile je servisní pracovník nainstalován, chová se jako síťový proxy pro každý prostředek, který webová aplikace potřebuje: může se rozhodnout ji načíst ze sítě nebo doručit z místní mezipaměti, díky čemuž je aplikace dostupná offline a také dostupná jen v pár milisekund, i když má uživatel připojení, emulující spuštění nativní aplikace.
Aby bylo možné nainstalovat servisního pracovníka, bude váš dokument HTML muset obsahovat něco jako:
if ('serviceWorker' in navigator) navigator.serviceWorker.register ("sw.js");
Tím se nainstaluje soubor „sw.js“ na zařízení uživatelů pro aktuální složku v aktuální doméně - koncept známý jako obor. Po instalaci bude tento servisní pracovník spravovat další návštěvy jakékoli adresy URL v jejím oboru.
Řekněme, že máme PWA se čtyřmi soubory: index.html, app.js, app.css a logo.png. První věcí je nainstalovat tyto soubory do mezipaměti v souboru sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; já. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Potom, aby se PWA vždy obsluhovalo z mezipaměti, musíme naslouchat události načtení v rámci pracovníka služby a rozhodnout se pro zásady mezipaměti, které se mají použít, například nejprve mezipaměť s následujícím úryvkem.
self.addEventListener ("načíst", e => e.respondWith (caches.match (e.request). then (res => res);
V tomto případě pokaždé, když uživatel přistupuje k PWA (buď z prohlížeče, nebo z nainstalované ikony), stroj získá soubory z mezipaměti. Výhodou PWA oproti nativním aplikacím je, že zařízení nemusí při změně znovu stahovat všechny soubory, pouze soubor, který se změnil transparentním procesem. Stále si také můžeme na vyžádání stáhnout části aplikace.
Výzvou však je, jak víte, které soubory byly na serveru aktualizovány, abyste je mohli v mezipaměti nahradit? Pokud nechcete psát pracovníka na nižší úrovni, který by to spravoval, můžete použít knihovnu open-source Workbox, která vám pomůže s generováním pracovníka služby a manifestem prostředků k aktualizaci nainstalovaného balíčku.
Uvědomte si, že soubory vašeho PWA budou odstraněny, pokud je v zařízení tlak na úložiště, pokud nepožádáte o trvalé úložiště, pokud je k dispozici:
if ('storage' in navigator && 'persist' in navigator.storage) navigator.storage.persist ();
V prohlížeči Chrome a většině prohlížečů Android vaše aplikace nedokáže využít více než pět procent dostupného prostoru; v systému iOS je to pouze 50 MB (téměř 50 MB) na hostitele; v Edge je proměnná podle celkové velikosti paměti a ve Windows Store je neomezená.
Prvotřídní zážitek
Máme mozek a nyní je čas na srdce: manifest webové aplikace. Účelem přeměny webové stránky na PWA není jen zajistit, aby byla k dispozici rychle nebo offline, ale také umožnit jí mít v OS vlastní ikonu a nabídnout zcela samostatný zážitek jako každá jiná nainstalovaná aplikace.
Manifest je soubor JSON, který definuje metadata pro PWA používaný prohlížečem nebo obchodem s aplikacemi za účelem definování chování instalace.
Soubor definuje několik vlastností jako metadata pro váš PWA. Každý OS bude číst tyto vlastnosti a bude se snažit, aby odpovídaly vašim preferencím. Například Android přečte „display: standalone“ a vytvoří normální prostředí aplikace. Díky „display: minimal-ui“ vytvoří prostředí s viditelnou adresou URL a certifikátem TLS - užitečné pro aplikace citlivé na zabezpečení. Díky funkci „display: fullscreen“ vytváří zcela pohlcující aplikace bez stavového řádku nebo viditelného tlačítka zpět. Sada ikon a barev definuje, jak budou úvodní obrazovky nebo záhlaví vypadat pro okno vaší aplikace.
Existují některé generátory manifestů, například Web App Manifest Generator nebo PWA Builder, které také změní velikost ikony pro vás v různých rozlišeních, pokud poskytnete jedno s vysokým rozlišením (minimálně 512 pixelů).
Pokud máte soubor manifestu propojený ve svém dokumentu HTML, uživatelé si budou moci aplikaci nainstalovat pomocí různých technik v závislosti na prohlížeči, obvykle se nazývá Přidat na domovskou obrazovku, Instalovat nebo jen Přidat. Pokud je váš PWA prohledávatelný Bingem, Microsoft jej automaticky přidá do obchodu Microsoft Store, aby si jej uživatelé systému Windows 10 mohli odtud nainstalovat.
V některých operačních systémech bude mít vaše PWA schopnost získávat odkazy. To znamená, že poté, co uživatel aplikaci nainstaluje, bude libovolná adresa URL v rozsahu vašeho manifestu otevřena v rámci hranic vaší aplikace a nikoli v prohlížeči, bez ohledu na to, zda se zobrazí v prohlížeči nebo v jiných aplikacích, jako je WhatsApp, Facebook nebo e-mail.
Pokud splníte požadavky PWA, které zde definujeme, některé platformy nabídnou ambientní odznak (malá ikona obvykle na liště URL, která specifikuje, že je web instalovatelný) nebo banner webové aplikace. Pokud chcete, můžete také přidat své vlastní vlastní tlačítko Instalovat pomocí následujícího úryvku:
window.addEventListener ("beforeinstallpr ompt", funkce (e) {e.prompt (); // zobrazí nativní výzvu instalace})
Pokud je PWA nainstalován, událost ‚appinstalled 'bude spuštěna na objekt okna, takže můžete sledovat statistiky, které ji poslouchají.
Obchody s aplikacemi
Jednou z hlavních výhod instalace z prohlížeče je schopnost vyhnout se procesu schvalování obchodu s aplikacemi nebo platba za vydavatele. To přináší zjevné výhody, jako je okamžité publikování, vytváření soukromých aplikací pro společnosti nebo aplikace, které by v obchodech neměly být přijímány.
Ale některé společnosti chtějí být v obchodě. Od dnešního dne jsou jedinými obchody, které oficiálně přijímají PWA, Windows Store a kaiOS Store. Naštěstí s nástroji jako Capacitor (aktuálně ve verzi Alpha) nebo PWA Builder můžeme vytvářet a podepisovat nativní balíčky i pro jiné platformy.
V obchodě Google Play jsou již publikovány některé PWA, například Twitter Lite a Google Maps Go, které jsou v současné době pod vlastní implementací. Chrome nabídne řešení od Chrome 68 prostřednictvím důvěryhodných webových aktivit. Od tohoto okamžiku budeme moci vytvořit balíček Android (APK) se spouštěčem do našeho PWA a nahrát jej do obchodu. Pro Microsoft Store v systému Windows 10 web PWA Builder aktuálně pomáhá s generováním balíčku APPX Windows 10. Pomocí webového zobrazení možná budete moci ručně vytvořit aplikaci pro iOS pro App Store, ale buďte velmi opatrní ohledně pravidel obchodu.
Integrace platformy
Implementací technik postupného vylepšení budete moci používat mnoho funkcí, včetně oznámení push, přístupu ke kameře a mikrofonu, geolokace, senzorů, plateb, dialogů sdílení a offline úložiště. Všechny tyto funkce běží přímo v rámci modelu zabezpečení prohlížeče, včetně dialogových oken oprávnění.
Můžeme také komunikovat s jinými aplikacemi prostřednictvím schémat URI, jako je otevření Twitteru, YouTube nebo WhatsApp prostřednictvím jejich adres URL nebo vlastních identifikátorů URI, například whatsapp: //.
A konečně, při vytváření nativních PWA, které jsou publikovány v obchodě pomocí Capacitoru nebo v Microsoft Storu, budeme moci přemosťovat nativní API, která nám umožní provádět prakticky jakýkoli nativní kód. Tato integrace s Windows 10 zahrnuje přístup k hardwaru, ale také integraci s operačním systémem, který nabízí možnosti, jako je Pin to Start. Například Twitter PWA umožňuje připnout libovolného uživatele na úvodní obrazovku.
Výzvy v oblasti designu a UX
Navrhování PWA má jedinečné výzvy, takže je důležité věnovat nějaký čas zkoumání, co největšímu testování a zvážení následujících věcí:
- Uživatelé budou očekávat zážitky podobné aplikacím.
- Proces instalace je stále nový, takže je třeba vynaložit další úsilí, abychom vysvětlili, jak aplikaci nainstalovat.
- Aktualizace aplikace na pozadí bez interakce s uživatelem je skvělá, ale přidává také některé výzvy pro UX.
- Na ploše má responzivní webový design novou hranici, protože okna PWA mohou být malá, mnohem menší než mobilní výřez. To znamená, že pro tento formát musíme vytvořit konkrétní zobrazení nebo malé widgety, jak je to dnes vidět v systému Chrome OS.
- Push oznámení by měla přidávat hodnotu pouze pro uživatele, takže se naučte zeptat se ve správný okamžik a neztrácejte příležitost zasíláním zpráv, které nejsou užitečné nebo zajímavé.
- Musíme navrhnout výkon webu a přístup offline.
Rok PWA
S letošním přidáním iOS a desktopu jsou PWA dnes všude. Musíme si ale pamatovat, že jejich cesta teprve začíná, takže očekávejte časté změny a ujistěte se, že budete neustále informováni o nejnovějších technikách a nápadech, které vám během vývoje platformy poskytnou vynikající uživatelský zážitek.
Tento článek byl původně publikován v čísle 308 ze dne síť, světově nejprodávanější časopis pro webové designéry a vývojáře. Koupit číslo 308 zde nebo přihlásit se k odběru zde.
