Proč a jak psát progresivní webové aplikace

Chcete vyvinout novou aplikaci, ale odrazuje vás složitost vývoje mobilních aplikací? Možná právě vám pomůže nový koncept vývoje softwaru zvaný progresivní webová aplikace (PWA). Jedná se o pouze o další buzzword, nebo dokážou PWA nativní aplikace skutečně nahradit?

V začátcích éry chytrých telefonů nastavily nativní mobilní aplikace nový standard kvality a ukázaly záda aplikacím webovým, nebo spíše webovým stránkám. Nativní aplikace poskytovaly lepší UX a startovaly rychleji než aplikace v prohlížeči. Přibalené zdrojové soubory a přímý přístup k hardwaru umožnily nativním aplikacím mnohem vyšší výkon a poskytovaly více funkcí.

Na tento vývoj postupně reagovaly webové technologie také více app-like přístupem. Zrodily se technologie jako HTML5, CSS3 a nové frameworky JavaScriptu, obrovský kus cesty ušly také webové prohlížeče. Díky tomu mohly začít vznikat webové aplikace, které se svým chováním podobají více nativním aplikacím než webovým stránkám.

Progresivní webová aplikace

V roce 2015 Google poprvé použil termín „Progressive Web Apps“ k popsání aplikací využívajících výhod nových funkcí moderních webových prohlížečů, jako jsou service workers a webové aplikační manifesty, které umožňují uživatelům „upgradovat“ webové aplikace o funkcionality z  nativního OS. Podle vývojářů Google mají PWA tyto vlastnosti:

• Progresivní: Fungují všem uživatelům nezávisle na volbě prohlížeče, protože aplikace je vytvořená se zásadou postupného načítání obsahu.
• Responzivní: Zobrazení stránky je optimalizováno pro všechny druhy nejrůznějších zařízení (mobily, notebooky, netbooky, tablety atd.).
• Nezávislé na konektivitě: Díky technologii service workers umožňují používat aplikaci offline nebo na špatném internetovém připojení.
• App-like: Uživatel má při interakci a navigaci pocit, jako by používal nativní mobilní aplikaci.
• Fresh: Obsahují vždy aktuální data díky procesu update technologie service workers.
• Zabezpečené: Obsluha pouze po HTTPS pro zabránění odposlouchávání a změně obsahu načítaných dat.
• Naleznutelné: Díky W3C manifestům jsou identifikovány jako „aplikace“ a registrace service workers napomáhá vyhledávačům k jejich nalezení.
• Znovuzapojení uživatele: Usnadňují znovuzapojení díky funkcím, jako jsou push notifikace.
• Instalovatelné: Umožňují uživatelům „uchovat“ aplikace na jejich domovské obrazovce bez nepříjemného a zdlouhavého procesu instalace z App Store.
• Odkazovatelné: Jednoduše sdílené pomocí URL bez nutnosti složité instalace.

Technologie PWA

PWA jsou vylepšením stávajících webových technologií, nepotřebují tedy žádné oddělené balíčkování nebo distribuování. Publikace PWA je jako publikace každé jiné webové stránky. Od roku 2016 jsou PWA implementovány v prohlížeči Chrome, dále např. v mobilním Safari.

Manifest

Webový aplikační manifest je JSON manifest pro centralizovanou definici metadat vývojářem dané aplikace. Specifikaci W3C naleznete zde.

Manifest vám dovoluje „nainstalovat“ webovou aplikaci na domovskou obrazovku pomocí hlášky při otevření webu.

Příklad souboru manifest.json:

{  
 "short_name": "App name",  
 "name": "The best application ever made! ++",  
 "icons": [  
 {  
 "src": "img/launcher–icon–4x.png",  
 "sizes": "192x192",  
 "type": "image/png"  
 }  
 ],  
 "background_color": "#FAFAFA",  
 "theme_color": "#512DA8",  
 "start_url": "/index.html",  
 "display": "standalone"  
}

Manifest poté stačí přidat do html hlavičky:

Service Workers

Service workers poskytují programovatelnou síťovou proxy ve webovém prohlížeči k obsluze webových (HTTP) požadavků. Service worker se nachází mezi sítí a zařízením k doplnění obsahu. Service workers používají efektivní cachovací mechanismus a umožňují používat aplikaci i v případě odpojení od sítě.

• Vlastnosti service workers
• Schopnost jednoduché obsluhy push notifikací
• Synchronizace dat na pozadí
• Schopnost zpracování HTTP požadavků pocházejících odkudkoliv
• Přijímání centralizovaných aktualizací

Service worker je implementovaný jako JavaScript kód registrovaný v html hlavičce:

if('serviceWorker' in navigator) {  
 navigator.serviceWorker  
 .register('/service–worker.js')  
 .then(function() { console.log("Service Worker Registered"); });

Soubor service-worker.js pak obsahuje samotný kód service workera, včetně obsluhy dotazů. Pokud se tedy stane, že během brouzdání v aplikaci se zařízení odpojí od Wi-Fi, service worker přesto vrátí HTTP kód 200 a servíruje offline obsah z cache. Můžete si tak třeba dočíst právě rozečtený článek. :)

V Chrome si zaregistrované service workers můžete prohlédnout na URL

chrome://serviceworker–internals

Architektura aplikačního shellu

Aplikační shell je minimální HTML, CSS a JavaScript potřebný k správnému běhu uživatelského rozhraní progresivní aplikace. První načtení shellu by mělo být extrémně rychlé a ihned nacachované.  „Nacachované“ znamená, že by soubory shellu měly být načteny jednou přes síť a poté uloženy do lokálního úložiště. Každé další otevření aplikace už by mělo shell načíst z cache, tedy velice rychle.

Architektura aplikačního shellu odděluje jádro infrastruktury aplikace a uživatelské rozhraní od dat. Uživatelské rozhraní a infrastruktura je cachována lokálně pomocí service workeru, každé další načtení aplikace tedy načte jen potřebná data místo toho, aby musela načíst všechno znovu.

Myšlenka aplikačního shellu je podobná jako nahrání balíčku aplikace do App Store při vytváření nativní aplikace.

Proč psát progresivní webové aplikace?

Tvorba kvalitních progresivních webových aplikací má obrovské výhody, těší uživatele a může vést k nárůstu prodeje, vyššímu zapojení uživatele a vyšším konverzím.

• Pokud aplikace plní kritéria PWA, Chrome zobrazí uživateli hlášku o přidání aplikace na jejich domovskou obrazovku zařízení.
• Spolehlivá aplikace nezávisle na kvalitě připojení
• Kvalitnější user experience!
• Díky cachování šetří množství stažených dat.
• Zvýšené zapojení uživatele a konverze
• Uživatel má díky instalaci snadnější přístup k aplikaci.
• Rozšíření dobře napsané Javascript webové aplikace na plnohodnotnou PWA aplikaci je poměrně snadné – jeden mainfest soubor a implementace service workera s trochou logiky pro offline funkcionality.

Nahradí progresivní webové aplikace nativní aplikace?

Nikoliv. Jedná se opravdu pouze o upgrade současných webových aplikací s trochou funkcionality navíc. Hlavní důvody, proč PWA nikdy nativní aplikace nenahradí, jsou dle mého názoru tyto:

• Především Apple si nenechá "vypustit rybník" v podobě App Store. Progresivní aplikace na Apple zařízení sice instalovat jdou, ale proces je (a dle mého názoru vždycky bude) uživatelsky dosti komplikovaný. V Safari je nutné kliknout na záložku a zvolit v menu poměrně abstraktní položku "Přidat na plochu".
• Přístup k HW přes webový prohlížeč nikdy nedožene možnosti, které mají SDK pro mobilní aplikace. Ať už se jedná o FaceID, offline úložiště v telefonu (limit pro PWA je 50 MB), nebo např. API pro HomeKit.

Jak se pozná progresivní webová aplikace?

Lighthouse je open-source automatizovaný nástroj pro ověření kvality vaší webové aplikace. Je dostupný jako Google Chrome rozšíření, ale i Node modul. Zadejte mu URL webové aplikace a on spustí sadu testů a na konci zobrazí hodnocení a případná doporučení.

Node modul je vhodné použít i v Continuous Integration testech.

Modul nainstalujete jednoduše:

npm install –g lighthouse

Spusťte test na URL dané web aplikace:

lighthouse https://example.com/

Závěr

Progresivní webové aplikace jsou velice zajímavým a mocným konceptem, který se stane postupně standardním rozšířením, na které je potřeba při vývoji webových aplikací myslet.

Pro některé use-cases opravdu nebude nutné psát nativní aplikace a bude je možné nahradit progresivními webovými aplikacemi. Rozhodně se ale nejedná o technologii, která nativní aplikace v budoucnu nahradí.

Máte chuť si napsat svoji první progresivní webovou aplikaci? Omrknout můžete taky progresivní pivo nebo se podívat, jak probíhá vývoj aplikací u nás v Ackee.

Zdroje:

• https://developers.google.com/web/progressive–web–apps/
• https://developers.google.com/web/fundamentals/engage–and–retain/web–app–manifest/
• https://en.wikipedia.org/wiki/Progressive_web_app
• https://codelabs.developers.google.com/codelabs/your–first–pwapp/#0
• http://blog.ionic.io/what–is–a–progressive–web–app/
• https://w3c.github.io/manifest/
• http://blog.mikota.cz/2016/01/bleskurychle–webove–aplikace.html
• https://cloudfour.com/thinks/ios–doesnt–support–progressive–web–apps–so–what/