Cesko.wiki Progresivní webové aplikace
Author
Albert FloresProgresivní webové aplikace (anglicky Progressive Web Apps, PWA) jsou webové aplikace, které vypadají a načítají se jako běžné webové stránky. Navíc ale nabízí funkce běžně dostupné pouze nativním aplikacím, např. práci offline, push notifikace nebo přístup k hardwaru zařízení. PWA tak kombinují flexibilitu webu s možnostmi aplikací.
Historie
Kolem roku 2005 se vývojové technologie přesunuly ze statických na dynamické webové stránky řízené servery (PHP, ASP. +moreNET) nebo systémy ze strany klienta (AJAX). Došlo také k přechodu na responzivní webový design.
V roce 2007 proběhly první pokusy o vytvoření progresivní webové aplikace, avšak nepříliš úspěšně. PWA selhávaly zejména na některých zařízeních (např. +more iPhone), v porovnání s nativními aplikacemi byly pomalejší a poskytovaly horší uživatelskou zkušenost.
Změna přišla v polovině roku 2010 díky vylepšením v jazycích HTML5, CSS3 a JavaScript, která výrazně zvýšila kompatibilitu webových prohlížečů s výkonnými procesory (např. Apple A10 či Snapdragon 820). +more PWA se staly životaschopnou alternativou k nativním aplikacím.
S názvem „progresivní webové aplikace“ přišli v roce 2015 designérka Frances Berriman a inženýr Google Chrome Alex Russell. Popsali jím aplikace využívající nové funkce podporované moderními prohlížeči, dále service workers a web app manifests, které uživatelům umožňují inovovat webové na progresivní webové aplikace v jejich nativním operačním systému.
Charakteristika
Podle vývojářů mají PWA tyto charakteristiky:
# Progresivní - pracují pro každého uživatele bez ohledu na volbu prohlížeče nebo operačního systému. # Responzivní - přizpůsobí se jakémukoli zařízení, kde se mají objevit, tedy PC, mobilnímu telefonu i tabletu. +more # Nezávislé na připojení - Service workers umožňují práci offline nebo v sítích s nízkou kvalitou připojení. # App-Like - uživatel má při interakci pocit, jako by používal nativní aplikaci. # Aktuální - díky procesu aktualizace Service workers. # Bezpečné - obsluha pouze pomocí HTTPS. # Dohledatelné - jsou identifikovatelné jako "aplikace" díky manifestu W3C a rozsahu registrace poskytovatelů služeb, díky kterým je vyhledávače mohou nalézt. # Instalovatelné - bez stahování z App Store nebo Google Play. # Dostupné - snadno se sdílejí prostřednictvím adresy URL. PWA nevyžadují komplexní instalaci.
Progresivní webové aplikace jsou vylepšením stávající webové technologie. PWA pracují v každém prohlížeči, ale některé funkce typu „app-like“ (např. +more nezávislost na připojení, instalace na domovskou obrazovku a push zprávy) závisí na podpoře prohlížeče. Od dubna 2018 tyto funkce podporují v různém rozsahu Microsoft Edge, Google Chrome, Mozilla Firefox a Safari. Dá se očekávat, že je i další prohlížeče budou postupně následovat.
Základní technická kritéria pro to, aby web považoval prohlížeč za progresivní webovou aplikaci, popsal Russell v následujících bodech:
* Mají bezpečný původ. Obsluhují se přes TLS a „zelené ochranné zámky“ (bez aktivního smíšeného obsahu). +more * Načítají se offline. * Obsahují Manifest soubor, který definuje základní informace o aplikaci: jméno, short_name, start_url a zobrazení (s hodnotou standalone nebo fullscreen) * Mají ikonu ve formátu PNG a velikosti nejméně 144 × 144 px. Např. : "ikony": [{"src": "/images/icon-144. png", "velikosti": "144x144", "typ": "image / png.
Technologie
Běžně používané technologie slouží k vytváření progresivních webových aplikací. PWA stojí na těchto pilířích:
Manifest
Manifest pro webové aplikace se nazývá JSON. Vývojářům poskytuje centralizované místo pro zadávání metadat spojených s webovou aplikací, včetně:
* Jména webové aplikace * Odkazu na ikonu či obrázek webové aplikace * Preferované URL sloužící k otevření webové aplikace * Dat konfigurace webové aplikace * Prohlášení o výchozí orientaci webové aplikace * Nastavení režimu zobrazení, např. celá obrazovka
Tato metadata mají zásadní význam pro přidání aplikace na domovskou obrazovku nebo jiné uvedení vedle nativních aplikací.
AppCache (zastaralé)
AppCache je starší technologie na podporu offline používání webu. Optimálně pracuje jen u jednostránkových aplikací, ale selhává u wiki nebo vícestránkových aplikací. +more Na začátku roku 2019 přední prohlížeče AppCache podporují, protože je některé stránky dlouhodobě používají. V budoucnu se však očekává jejich nahrazení.
Service Workers
Nativní mobilní aplikace poskytují bohaté zkušenosti a vysoký výkon na úkor úložného prostoru, nedostatku aktualizací v reálném čase a nízké viditelnosti ve vyhledávání. Nevýhody tradičních webových aplikací tkví v chybějících nativních, kompilovaných a spustitelných souborech v kombinaci se závislostí na nespolehlivém a potenciálně pomalém připojení k webu.
Service workers poskytují skriptovatelnou síťovou proxy ve webovém prohlížeči, která umožňuje programové vyžádání webových/HTTP požadavků. Efektivně tak využívají mechanismy vyrovnávací paměti a umožňují bezchybné fungování v offline módu.
Service workers se u progresivních webových aplikací používají ke zkombinování největších výhod nativních a webových aplikací.
Výhody Service workers:
* Dokáží jednoduše zpracovat push oznámení. * Synchronizují data na pozadí. +more * Jsou schopné reagovat na požadavky zdrojů pocházejících odjinud. * Získávají centralizované aktualizace.
Web Workers
Umožňují webové aplikaci spouštět současně více podprocesů JavaScriptového kódu. Díky tomu se dlouhé aktivity odstraňují z podprocesu uživatelského rozhraní a redukují tak blokování UI.
IndexedDB, IDB
IndexedDB je API rozhraní zabudované do moderních prohlížečů pro ovládání NoSQL databáze. Umožňuje ukládání dat do paměti klientského zařízení, což pro PWA znamená možnost lokálního vyhledávání místo posílání žádostí.
LocalStorage & SessionStorage
Náhrada za soubory cookie, která umožňuje ukládat víc dat než cookie.
App Shell
Architektonický přístup Model App Shell používají některé progresivní webové aplikace. Pro rychlé načítání ukládají Service workers základní uživatelské rozhraní nebo shell z responzivní webové aplikace. +more Tento shell poskytne prohlížeči počáteční statický rámec, rozložení nebo architekturu, do níž může být vlastní obsah načítán postupně a dynamicky. To umožňuje uživatelům pracovat s aplikací plynule navzdory měnící se rychlosti webového připojení. Shell může být uložen v mezipaměti prohlížeče například mobilního zařízení.
Využití a statistiky
Mnoho nadnárodních firem přechází z nativních aplikací na PWA, což přináší měřitelné změny v chování uživatelů.
Svět
Díky přechodu na PWA zvýšil Aliexpress konverzi nových uživatelů o 104 %. Také se zvýšil čas, který uživatelé stráví na stránkách napříč všemi prohlížeči o 74 %. +more Dvojnásobně vzrostlo i množství zobrazených stránek.
Aktivita uživatelů se v PWA Starbucksu zvýšila denně i měsíčně na dvojnásobek. Nákupy přes aplikaci se zvedly v průměru o 20 %.
Po přechodu na progresivní aplikaci se načítání stránek Forbes.com snížilo z 6,5 sekund na 2,5 a imprese na jednu návštěvu stoupla o 10 %.
Tinder
Původní nativní aplikace Tinderu se načítala 11,91 sekund. Nová PWA je o 90 % menší a načte se za 4,69 sekund.
Další PWA pro Windows 10:
* Twitter * Android Messages * Google Maps * Google Photos * Uber * Flipboard * Telegram * Air France * Pinterest
Česko
V ČR dosud není používání PWA příliš rozšířené a data o změnách v chování uživatelů zatím zcela chybí.
Odborný portál zaměřený na technologie a byznys Czechcrunch o PWA napsal:
„Jejich hlavní výhodou je fakt, že se nemusí stahovat a instalovat z nějakého obchodu, ale „nainstalují“ se přímo samy v rámci webového rozhraní, takže to uživatel na první pohled vůbec nepozná. Oproti klasickému webu nabízí mnohem rychlejší načítání, možnost ukládání jednotlivých stránek do offline režimu, push notifikace nebo přístup k samotnému zařízení, takže se v základu velmi podobají klasické nativní aplikaci.
Od roku 2018 začal počet progresivních aplikací v oběhu rapidně růst a na tento trend proto naskočily i společnosti jako síť kaváren Starbucks, nákupní galerie Aliexpress, seznamka Tinder, přepravní startup Uber, sociální síť Pinterest, ale i česká rozvozová služba DámeJídlo. A většina z nich si po dlouhodobém testování rozhodně nemůže na výsledky stěžovat. +more“.
Mezi známé české PWA patří:
* Kiwi. +morecom - Český internetový vyhledávač letenek umožňuje jejich rezervaci a koupi. Zaměřuje se na propojování letů leteckých společností, které spolu normálně nespolupracují. PWA si vyvinuli interně. * Damejidlo. cz - rozvozová (food delivery) služba rozšířená po celé ČR. * MyDentLab - Software na řízení zubních laboratoří zjednodušuje komunikaci mezi laboratoří a lékaři. Mezi hlavní funkce aplikace patří kalkulačka ziskovosti zubních náhrad, automatická fakturace, online správa zakázek a jednoduchá zpětná vazba. PWA vyvinulo brněnské studio SNADNEE.