Progresivní webové aplikace — co to je a kdy má smysl se o to zajímat?

Pojem progresivní webová aplikace, zkráceně PWA, je terminus technicus, se kterým se ve světě webových technologií setkáváme nějaký pátek. V roce 2015 jej poprvé představil vývojář Alex Rusell s manželkou Frances Berriman ve článku “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”. Tato třípísmenná zkratka měla popisovat označení pro nové webové aplikace využívající vlastnosti moderních prohlížečů. Sympatická idea, nemyslíte? Pojďme se podívat, o které vlastnosti se jedná a jestli je o co stát.

Svět mobilních aplikací

Nelekejte se hned ze začátku, že budeme rozebírat do hloubky původ a vývoj jednotlivých typů aplikací. Jen pro pochopení důvodu vzniku PWA je zapotřebí nejprve velmi jemný úvod do této problematiky. Pokud nemáte času nazbyt, můžete rovnou přejít na podkapitolu Progresivní webové aplikace.

Nativní aplikace

Nativní aplikace se implementuje pro každou platformu zvlášť. Uživatel je může získat například z obchodu Google Play pro platformu Android, či App Store pro plaftormu iOS. Tím pádem je nutné vyvíjet dvě na první pohled jedny a ty samé aplikace, se stejnou architekturou, téměř identickým uživatelským rozhraním, akorát psané v jiných jazycích a testované na jiných platformách. Uh, to zní jako dvakrát více práce, než by bylo třeba! 😣

Hybridní aplikace

Jak už z názvu vyplývá, hybridní aplikace představují jakýsi kompromis mezi nativní a webovou aplikací. Jsou tedy postaveny na 3 základních pilířích pro tvorbu webu, kterými jsou HTML, CSS a JavaScript. Kvůli tomu, že tyto technologie nejsou známé jednotlivým operačním systémům, je nutné tohle všechno zaobalit do mezivrstvy, která vše bude překládat do nativního jazyka daného OS. Hybridní aplikace prvního typu se tedy zobrazují v tzv. WebView a vyžadují z něj i přístupy k nativním pluginům, aby mohly pracovat s funkcemi platformy (např. s fotoaparátem, gyroskopem, atd.). Obecně můžeme říct, že existují dva přístupy, kde oba dva mají společnou jednu vlastnost, kterou je jeden sdílený kód pro všechny platformy. Rozdíly jsou pak následující:

1. Sdílený kód je postavený na HTML, CSS a JS. Kvůli tomu, že tyto technologie nejsou známé jednotlivým operačním systémům, je nutné tohle všechno zaobalit do mezivrstvy, která vše překládá do nativního jazyka daného OS. Skrze tuto mezivrstvu můžeme komunikovat s komponentami daného zařízení. Aplikace je zobrazována v tzv. WebView, které si implementuje každý OS sám. Příkladem tohoto typu hybridní aplikace může být framework Ionic.
2. Sdílený kód je kompilován do nativního jazyku dané aplikace, tj. i aplikace se následně chová jako nativní a není tím pádem potřeba žádný WebView jako u první skupiny. Přístup se napříč používanými frameworky může trochu lišit. React Native používá své vlastní UI komponenty, které následně mapuje na nativní UI komponenty dané platformy. Flutter na to jde maličko jinak. Kód, napsaný v Dartu, je kompilován do nativního jazyka, který je následně přes vizualizační engine vykreslen na plátno a zpracován jako nativní aplikace.

(Poznámka autora: Aktualizováno 19. 10. 2020. Děkuji Michalu Voráčovi za upozornění na nejasné informace o hybridních aplikacích a Tadeáši Musilovi za korekturu 🙂)

Webové aplikace

U této části se netřeba více pozastavovat. Jedná se o webové stránky obvykle fungující na všech platformách a prohlížečích stejně.

Pojďme si to všechno ještě shrnout a zmínit výhody a nevýhody jednotlivých přístupů.

Velmi obecné srovnání mobilních aplikací

Nativní

• + svižný, plynulý i offline chod, díky lepšímu využívání vlastností systému
• + lepší přístup k dílčím funkcionalitám daného zařízení (gyroskop, kamera, aj.)
• − riziko vysokých nároků na paměťové úložiště zařízení
• − vyšší náklady na vývoj a údržbu - čas, cena a i lidské zdroje, jelikož jazyky jako Java/Kotlin či Swift patří k těm náročnějším na učení
• − přenositelnost aplikace (nutnost instalace a aktualizací přes obchod platformy na každém zařízení zvlášť)

Hybridní

• + úspora času, peněz a lidských zdrojů oproti nativním aplikacím
• + relativně konzistentní UI a UX napříč platformami i prohlížeči
• + aplikace je přenositelná a uživatel nemusí provádět aktualizace
• − výpočetně či datově náročné aplikace jsou pomalejší
• − závislost na knihovnách, frameworcích a nativních pluginech, které mohou zvýšit nekonzistenci a chybovost

Webová

• + úspora času, peněz a lidských zdrojů než u hybridních aplikací
• + relativně konzistentní UI a UX napříč zařízeními i prohlížeči
• + aplikace je přenositelná a uživatel nemusí provádět aktualizace
• + žádné nároky na paměťové úložiště zařízení
• − závislost na internetovém připojení
• − horší uživatelský prožitek
• − omezený přístup k funkcionalitě zařízení

Pozn.: Výše zmíněné srovnání prosím berte s rezervou. Nejedná se o obecná tvrzení, která platí pro každou aplikaci daného typu — vždy záleží na architektuře a implementaci aplikace.

Možná se ptáte, proč, když existuje tolik možných přístupů, přibyl nový typ aplikace, kterým je PWA 🤔. Důvodů je mnoho, ale ten jeden, primární, je zcela prostý. Uživatelé na mobilních zařízeních mnohem častěji navštěvují nové webové stránky než mobilní aplikace. Nejvíce času však tráví s nativními aplikacemi. Proč tedy nezkusit spojit oba přístupy do jednoho?

Progresivní webové aplikace

Progresivní webové aplikace nejsou nic jiného, než webové stránky s pár funkcemi navíc. Takhle jednoduše popsal Dominick Ng na konferenci Google I/O’19 PWA. A má naprostou pravdu. Dokonce si troufám tvrdit, že některé z těch funkcí by měly být naprostou samozřejmostí u webových aplikací. Než si ale rozebereme, proč tomu tak občas není, pojďme se podívat, o kterých funkcích, resp. vlastnostech, je řeč.

1. Progresivita — webová aplikace je plně funkční pro každého uživatele, nehledě na používanou platformu nebo prohlížeč.
2. Responzivita — stránka se adekvátně vykreslí na jakémkoliv zobrazovacím zařízení.
3. Rychlejší po prvním načtení — po prvotním načtení stránky se stejný obsah nemusí znovu stahovat.
4. Nezávislost na připojení — aplikace bude fungovat i offline nebo při chabém internetovém připojení.
5. App-like — uživatel má díky interakci s aplikací pocit, jako by pracoval s nativní aplikací.
6. Aktuálnost — data v aplikaci budou vždy aktuální.
7. Bezpečnost — aplikace bude zabezpečená díky servírování webu přes HTTPS.
8. Dohledatelnost — stránky jsou dohledatelné jako aplikace díky Web Site Manifestu a zaregistrovanému Service Workeru.
9. Re-engageable — používání push notifikací za účelem udržení kontaktu s uživateli.
10. Instalovatelnost — aplikaci lze stáhnout, aniž by bylo nutné navštívit obchod platformy.
11. Dostupnost — jednotlivé stránky lze sdílet prostřednictvím URL adresy.

Progresivní webové aplikace tak posouvají uživatelský prožitek z webových aplikací na vyšší úroveň. Google si pro shrnutí PWA aplikací oblíbil zkratku FIRE — Fast (rychlý), Integrated (integrovaný), Reliable (spolehlivý) a Engaging (poutavý).

Kompatibilita

Může se na první pohled zdát, že během pár hodin jsme schopni splnit veškerá kritéria pro to, abychom sestavili plnohodnotnou PWA. Budeme-li se řídit pravidly zmíněnými v podkapitole Progresivní webové aplikace, narazíme hned u prvního bodu na kámenem úrazu — progresivitu. Kvůli současné podpoře některých technologií nejsme schopni zajistit, že aplikace bude fungovat na kterékoliv platformě či prohlížeči.

Největší vrásky vývojářům činí téměř všechny prohlížeče a platformy vyjma produktů od Googlu — jak nečekané 😉. Společnost Apple například uvedla v nedávném prohlášení svůj nekompromisní postoj pro nasazování HTML5 aplikací na App Store. Co to pro nás znamená?

Apple neuznává termín PWA nebo hybridní aplikace.

Do 3. 3. 2020 by měly veškeré aplikace na App Storu dodržovat stanovený bezpečnostní guideline. Tento guideline velmi striktně omezuje, jak mají aplikace vypadat. Jednou z uvedených podmínek je, že aplikace musí používat WebKit a i JavaScriptCore, který umožňuje práci se softwarem třetích stran. Zároveň není možné rozšiřovat nebo poskytovat API nativní platformy třetím stranám. „Pokud nechcete přijít o hlavní funkce a vlastnosti moderního dynamického webu, je lepší aplikaci poskytovat přes prohlížeč Safari než App Store,“ dodává Apple.

Tady opět doporučím článek — iPhone 11, iPadOS and iOS 13 for PWAs and web development, který čtenáře seznámí s kompletní současnou situací PWA ve světě Apple produktů.

Pojďme se ještě ve stručnosti podívat, co a kde nám bude v kontextu s PWA fungovat:

• A2HS (Add to Home screen) — bez problémů funguje na většině mobilních prohlížečů.
• Service Worker — trápit nás může pouze na Opera Mini.
• Cache API — iOS má velikost cache omezenou na 50 MB. Pokud je zapotřebí ukládat větší množství dat, lze využít i jiná úložiště v prohlížeči, třeba IndexedDB.
• Push Notifikace — co se týče push notifikací, i zde se připravte na to, že se vám nepodaří potěšit uživatele iOS. Na internetu můžete nalézt nepřeberné množství polemizujících článků, jestli je Apple někdy začne podporovat.

Výhody a nevýhody

Co tedy přináší PWA lepšího a zajímavějšího do světa webových technologií a s čím nám naopak nepomohou?

Výhody 👍

Offline mode

PWA nezaskočí, pokud je uživatel na omezeném připojení k internetu nebo právě spadly servery. Díky cachování dat je možné pracovat se stránkou i v offline režimu a to je to, o co většina webů usiluje — udržet si své uživatele za každou cenu.

Pozor, záleží i na typu renderingu. V případě SSR můžete aspoň zobrazit něco jiného než notoricky známou stránku s 🦖 There is no Internet connection.

Výkon a úspora dat

Cachování dat na klientovi má i další výhodu, a tím je performance. Prohlížeče pracují s uloženými daty a zlepšují tak prožitek z používání webu. V porovnání s nativními aplikacemi PWA nezabírají tak velkou část úložiště zařízení.

Nezávislost na obchodech platforem

Vývojáři mobilních aplikací vědí, jak striktní akceptační pravidla má Google nebo Apple na aplikace v jejich obchodech. Nehledě na to, že je nutné provádět velké releasy, které mohou trvat řádově i několik dní, než se vše schválí a nasadí. Tenhle problém u PWA nenastává. I pro uživatele zde odpadá nutnost schvalování aktualizací a jejich stahování. Jakmile se stáhne aplikace na domovskou stránku, není nutné se starat o její údržbu.

Re-engagement

Odesílání push notifikací v rozumné míře dokáže udržet uživatele věrné vaší aplikaci a zlepšit zážitek z používání aplikace.

Nevýhody 👎

Kompatibilita

Nejvíc nás zjevně tíží kompatibilita s iOS. Doufat v lepší zítřky pro kombinaci Apple produktů a PWA je už zjevně předem zbytečné, ale třeba nás bude časem čekat milé překvapení.

Omezený přístup k zařízení

Moderní webové technologie prozatím nemohou zcela nahradit nativní aplikace. Přes webové aplikace není možné pracovat s některými vlastnostmi daného zařízení: Bluetooth, pokročilé ovládání fotoaparátu aj. Navíc, webové aplikace jsou pořád méně šetrné k baterii zařízení než nativní aplikace.

Kdy má smysl přemýšlet o PWA?

V souvislosti s již zmíněnými výhodami a nevýhodami, v jakou chvíli stojí za zvážení implementace PWA?

• Neřešíte plnohodnotnou podporu na iOS.
• Vývojářský tým se nebojí JavaScriptu.
• Chcete zelená čísla z Lighthouse auditu.
• Chcete být dobře vidět ve výsledcích Google vyhledávání.
• Potřebujete mobilní aplikaci, stejně tak jako její desktopovou a webovou verzi.

Mám web a zvažuji z něj udělat PWA

• Chcete přilákat nové uživatele a udržet si ty stávající — zvýšit conversion rate.
• Plánujete zlepšit současný stav produktu na trhu — motivací mohou být případové studie velikánů typu Twitter, Pinterest nebo Spotify.

Kdy implementovat PWA místo nativní aplikace?

• Nepotřebujete přístup k pokročilým vlastnostem zařízení: NFC čtečce, funkcím fotoaparátu, aj.
• Nejste svázáni velmi specifickým zadáním, které by se horko těžko implementovalo s možnostmi dnešních webových API. Řeč je o požadavcích na platební systém, virtuální či rozšířenou realitu nebo i herní enginy.
• Máte omezený rozpočet.
• Vývojářský tým nemá znalosti s vývojem nativních aplikací.

Související odkazy

• Progresivní webové aplikace: Co to je? A jak webu zařídit plné hodnocení PWA v Lighthouse — Vzhůru dolů
• Kompletní návod pro vývoj PWA na MDN
• Progressive Web Application — Wikipedia
• Progressive Web Apps — Google Developers