Progresivní webová aplikace(PWA) je relativně krátce používaný termín k označení nové metodologie vývoje softwaru. Na rozdíl od tradiční aplikace, progresivní webová aplikace je jakýmsi hybridem běžné webové stránky a mobilní aplikace. Tento nový aplikační model má za cíl kombinaci vlastností nabízených většinou moderních webových prohlížečů s benefity user experience mobilních aplikací.

V začátcích éry chytrých telefonů se staly mobilní aplikace tvrdou konkurencí aplikacím webový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í.

Neustálá vylepšení kolem roku 2010 v HTML5, CSS3 a JavaScriptu, vylepšené a standardizované prohlížeče spolu s výkonnějšími procesory přinesly efektivní alternativu – hybridní aplikace . Hybridní aplikace napodobují user experience nativních aplikací, ale stále je potřeba je instalovat z App Store. Jako takové zabírají místo v úložišti telefonu. Běží částečně v prohlížeči, nemají URL, ale disponují vysokým výkonem.

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 na prvotřídní aplikace v jejich nativním OS. Podle vývojářů Google mají PWA tyto vlastnosti:

  • Progresivní – Funguje 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žňuje 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 – 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ňuje znovuzapojení díky funkcím, jako jsou push notifikace.
  • Instalovatelná – Umožňuje uživatelům „uchovat“ aplikace na jejich domovské obrazovce bez nepříjemného a zdlouhavého procesu instalace v App Store.
  • Odkazovatelná – Jednoduše sdílená pomocí URL bez nutnosti složité instalace.

Technologie

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, ale v budoucnu budou pravděpodobně podporovány i jinými prohlížeči.

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. Nově je možné místo instalace na domovskou stránku i doporučit ke stažení nativní aplikace místo té webové.

 

ackee_blog_3ackee_blog_1

Příklad souboru manifest.json:

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:

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 vysoce 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
  • Řeší problémy nativních aplikací
    • aktualizace v reálném čase (nemusíte aktualizovat aplikaci přes App Store)
    • průhlednost vyhledávačů pro SEO
    • šetří místo v úložišti
  • A je to cool!

Lighthouse

Lighthouse je open-source automatizovaný nástroj pro ověření kvality vaší webové aplikace. Je dostupný jakoGoogle 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:

Spusťte test na URL dané web aplikace

ackee_blog

PWA v ČR a ve světě

Na českém trhu zatím není poptávka po PWA velká. Zákazníci technologii neznají nebo za ni nejsou ochotní zaplatit . Dalším argumentem může být, že Apple zatím nepodporuje všechny funkce PWA. Nepodporuje právě service workers a není jisté, že je podporovat bude. Není to však jen problém Safari na iOS nebo Mac OS, týká se to i Chrome na Apple zařízeních. Chrome je na  iOS totiž omezen využitím WebKit engine. Žádní service workers. Žádné notifikace.

Může se tedy zdát, že pokud cílíme na iOS , je pro nás PWA zbytečné. Ale opak je pravdou. I přesto, že iOS nepodporuje všechny PWA funkce, podporuje třeba uložení aplikace na domovskou obrazovku. User experience na iOS byla vždy lepší než na konkurenčních mobilních OS, PWA zásady dokážou aplikaci ještě urychlit a zlepšit stávající UX.

Důkazem, proč to má smysl i pro iOS , je třeba AliExpres – po přechodu na PWA měli 82% narůst v  iOS konverzích, 104% narůst pro všechny prohlížeče celkově. Dalším je The Washington Post s 5x zvýšeným uživatelským zapojením. Rozdíly v nárůstu mezi Androidem a  iOS byly zanedbatelně malé.

Závěr

Progresivní webové aplikace jsou velice zajímavým a mocným konceptem, o kterém v budoucnu ještě určitě hodně uslyšíme.

Díky hlavním funkcím, jako je vysoký výkon, lepší user experience, možnost používat aplikaci offline, šetření místa v úložišti a datového pásma, je to jistě technologie, o kterou bychom se měli zajímat a kterou bychom měli aktivně implementovat i do svých aplikací.

Tak co? Máte chuť si napsat svoji první progresivní webovou aplikaci ? Omrknout můžete taky progresivní pivo.

 

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/

 

1 KOMENTÁŘ:

  1. Ahoj,
    ohledně toho manifestu, píšete tam „… Specifikaci W3C naleznete zde.“ a kromě odkazování slovem zde ten odkaz vede na  https://deanhume.github.io/beer/ . Je ten odkaz správně? Jako manifest tam je, o tom žádná, ale specifikaci bych si představoval trošku jinak.

    Díky

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *