Co jsou Progresivní Webové Aplikace a proč se o ně zajímat?

PWA, aneb Progresivní Webové Aplikace je nová technologie, díky které je možné z obyčejných webových stránek udělat regulerní aplikaci pro mobilní zařízení. A má to obrovské výhody. Taková aplikace je rychlá, spolehlivá, funguje i bez připojení k internetu a není ji potřeba nijak instalovat nebo ručně aktualizovat.

Nativní aplikace nebo PWA?

Na mobilních zařízeních dnes převládají nativní aplikace, které si můžete stáhnout a nainstalovat z Google Play nebo Apple App Store. Takové aplikace jsou dnes běžná součást vašeho telefonu, takže proč by nás mělo zajímat něco jako PWA? Odpověď je snadná, výroba nativní aplikace není jednoduchá a často je nutné vyvíjet ji pro několik různých systémů (iOS, Android, Windows).

PWA tento proces zjednoduší, protože aplikace funguje jako web a ten je možné zobrazit na všech zařízeních stejně nehledě na jejich systém.

Pro ulehčení tohoto procesu se často webová aplikace integrovala přímo do nativní aplikace, např. Apache Cordova, Adobe Phonegap. Jenže to úplně není ono, furt se jedná o emulování webové aplikace v nativní aplikaci. S příchodem PWA se tohle vše podstatně zjednodušilo a v budoucnosti to bude hrát velkou roli u webových stránek.

Určitě znáte situaci, kdy přijdete na webovou stránku a ta vás začne otravovat s tím, že pro tuto stránku existuje nativní aplikace. Tento proces je ale otravný a dlouhý, musíte celou aplikaci stáhnout, nainstalovat a aplikace většinou vypadá úplně jinak než na webu. S webovými aplikacemi se vám tohle ale nestane. Dostanete jen upozornění o tom, že si stránku můžete přidat na plochu a tím to končí, pak se vám aplikace ihned otevře samostatně mimo prohlížeč. Toto velice napomáhá ve zvýšení návštěvnosti a konverze pro vaší stránku.

Jak to vlastně funguje?

Aby se vaše webová stránka stala i aplikací, je k tomu potřeba pár věcí. Stránka musí běžet na zabezpečeném připojení https, musí obsahovat aplikační manifest a musí obsahovat Service Worker. A teď co to vlastně všechno je?

• Zabezpečené připojení - stránka musí běžet na serveru, který běží na zabezpečeném protokolu HTTPS a HTTP/2, k tomu je zapotřebí mít i certifikát pro stránku. Ten je buď potřeba zakoupit nebo lze využít bezplatné řešení jako Let's Encrypt nebo CloudFlare.
  
• Aplikační manifest - jedná se o soubor se základníma informacema o aplikaci, obsahuje cesty k ikonám aplikace, název aplikace apod. Více informací naleznete na Google Developers.
• Service Worker - jde o script který se stará o to aby vaše stránka byla dostupná offline a fungovala na pozadí jako aplikace. Takže je to taková služba na pozadí, která zajištujě hladký chod vaší aplikace. Webová stránka pak dokáže přijímat push notifikace, aktualizace na pozadí a další běžné funkce regulérní aplikace. Více informací naleznete na Google Developers.

Jak je to s podporou?

Webové aplikace jsou zatím ve velkém podporovány jen v prohlížeči Google Chrome a Opera, v telefonech Android a na PC. Podobná podpora bude v dohledné době dostupná i v prohlížečích Mozilla Firefox a Microsoft Edge. Proztím scházejí zařízení od společnosti Apple a prohlížeč Safari, kde je vývoj nejpomalejší. Na podpoře service workeru pro Safari se už ale pracuje, zatím je však nejasné, jak to bude s instalací takové aplikace do telefonu.

Google i Microsoft berou webové aplikace vážně a v budoucnu to bude podstatné i pro aplikace ve Windows Store. Už dnes zde nalezneme aplikace jako Trello, LinkedIn nebo Slack, které jsou mixem technologií jako je PWA, UWP a Electron.

Co bude dál? Aby web fungoval stejně jako nativní aplikace, tak musí umět stejné věci a k tomu už je opravdu blízko, např. u poslední verze Chrome chybí 8 funkcí z 36 (podle stránky whatwebcando.today).

Příklady stránek s PWA

Webové aplikace se dnes už standardně považují za nutnou součást moderních webových stránek a pár takových největších příkladů si ukážeme.

• Twitter Lite - Jedná se o mobilní verzi twitteru, která je skoro naprosto totožná s nativní aplikací. Více informací o tom, co tato PWA aplikace umí a jak se k ní Twitter dopracoval, naleznete zde.
• The Washington Post - Používá jak PWA, tak AMP což pro stránku znatelně zvětšilo návštěvnost a konverzi na mobilních zařízeních. Případové studie pro PWA naleznete zde a pro AMP zde.
• AliExpress - S webovou aplikací tento oblíbený e-shop dosáhl většího konverzního poměru pro nové návštěvníky a to až o 104%. Případová studie je dostupná zde.
• Mapa voličů - Česká aplikace od společnosti Behavio, mimo PWA používají i moderní framework od Googlu Polymer.
• PWA Rocks - Zde naleznete spoustu dalších menších aplikací podporující PWA.

Takže webové aplikace jsou určitě nadějná budounost, jedna aplikace napříč všemi možnými zařízeními s různými systémy, to je PWA.