TakéPWA, Progressive Web ApplicationPokročilý
Definice
Progressive Web App je webová aplikace navržená tak, aby se v podporovaném prohlížeči chovala zčásti jako aplikace instalovaná v zařízení. Využívá HTTPS, manifest webové aplikace a service worker pro spouštění z ikony, práci s cache, offline režim a případně notifikace, aniž musí být distribuována přes obchod s aplikacemi.
Než se na to spolehnete: Podpora instalačních funkcí, push notifikací a práce na pozadí se mezi prohlížeči a operačními systémy mění, proto je vhodná kontrola aktuální kompatibility.
Z čeho se PWA skládá
Progressive Web App spojuje běžný web s několika schopnostmi prohlížeče. Základ tvoří responzivní rozhraní, doručování přes HTTPS, manifest s názvem, ikonami a režimem zobrazení a service worker běžící odděleně od stránky. Service worker umí zachytit síťové požadavky, uložit vybrané odpovědi do Cache API a rozhodnout, co se vrátí při špatném spojení.
Manifest sám o sobě z webu nedělá PWA. Manifest říká zařízení, jak aplikaci nabídnout k instalaci a jak má vypadat při spuštění z domovské obrazovky. Skutečná užitečnost vzniká až návrhem datových toků: co se může cachovat, co musí být vždy čerstvé a co se uloží lokálně třeba do IndexedDB.
Co se děje při instalaci
Prohlížeč může uživateli nabídnout instalaci, když web splní očekávané technické a UX podmínky. Po potvrzení vznikne ikona v systému, aplikace se otevře bez běžného rámu prohlížeče a může působit podobně jako nativní aplikace. Distribuce ale pořád zůstává webová: aktualizace se šíří přes nasazení nové verze a prohlížeč je stáhne podle pravidel cache a service workeru.
U PWA je důležité testovat stav po aktualizaci. Špatně napsaný service worker může držet starý JavaScript, nevracet novou verzi rozhraní nebo blokovat požadavky na API. U větších webů se proto kombinuje verzování assetů, krátké cache hlavičky pro HTML a dlouhá cache pro hashované soubory, často doručované přes CDN.
Kde PWA naráží na limity
Progressive Web App není plná náhrada nativního vývoje ve všech situacích. Přístup k hardwaru, běh na pozadí, push notifikace, platby nebo integrace se systémem závisí na konkrétní platformě a prohlížeči. Firemní aplikace s formuláři, katalogem nebo jednoduchou komunikací bývá dobrý kandidát. Hra s náročnou grafikou, Bluetooth workflow nebo hlubokou integrací do OS může narazit rychle.
Bezpečnostní model prohlížeče je součástí výhody i omezení. HTTPS chrání přenos a odemyká citlivá API, ale neřeší autorizaci, ukládání tokenů ani ochranu lokálních dat. PWA musí mít stejně promyšlenou autentizaci, expiraci session a práci s citlivými údaji jako jiná webová aplikace.
Příklad: e-shop s offline katalogem
E-shop s potřebami pro řemeslníky nabídne PWA pro zákazníky, kteří objednávají ve skladu se slabým signálem. Service worker uloží shell aplikace, vybrané obrázky a poslední stažené kategorie. Zákazník otevře katalog i bez internetu, ale dostupnost a cena se při odeslání košíku znovu ověří proti serveru.
Příklad: formulář technika v terénu
Servisní firma pošle technikovi PWA pro revize zařízení. Technický formulář se vyplní v budově bez signálu, data se uloží lokálně a synchronizují se po návratu připojení. Jednoduchá registrace service workeru vypadá například takto:
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}Příklady z praxe
E-shop s offline katalogem
E-shop s potřebami pro řemeslníky nabídne PWA pro zákazníky, kteří objednávají ve skladu se slabým signálem. Service worker uloží shell aplikace, vybrané obrázky a poslední stažené kategorie. Zákazník otevře katalog i bez internetu, ale dostupnost a cena se při odeslání košíku znovu ověří proti serveru.
Formulář technika v terénu
Servisní firma pošle technikovi PWA pro revize zařízení. Technický formulář se vyplní v budově bez signálu, data se uloží lokálně a synchronizují se po návratu připojení. Registrace service workeru připraví aplikaci na řízení cache a offline chování.
if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js"); }
Časté omyly
- MýtusPWA je jen web zabalený do ikony.
- Ve skutečnostiProgressive Web App může mít ikonu a samostatné okno, ale podstatné jsou schopnosti navržené kolem manifestu, service workeru, cache a síťového režimu. Bez promyšleného offline a aktualizačního chování jde spíš o instalovatelný web než o kvalitní PWA.
- MýtusKdyž mám service worker, aplikace automaticky funguje offline.
- Ve skutečnostiService worker pouze dává vývojáři kontrolu nad síťovými požadavky. Offline režim vznikne až tehdy, když aplikace předem uloží potřebné soubory a data a umí bezpečně řešit situace, kdy server není dostupný.
Časté dotazy
- Musí se Progressive Web App instalovat z obchodu s aplikacemi?
- Progressive Web App se obvykle instaluje přímo z prohlížeče, pokud prohlížeč a operační systém instalaci podporují. Obchod s aplikacemi není nutný, protože aplikace zůstává webem doručovaným z běžné URL. Některé týmy ale PWA do obchodů balí kvůli viditelnosti, firemní distribuci nebo očekávání uživatelů. Takový balíček nemění základní princip: jádro aplikace je stále webová aplikace.
- Potřebuje Progressive Web App internet při každém spuštění?
- Progressive Web App nepotřebuje internet při každém spuštění, pokud vývojář správně navrhne cache a lokální data. Service worker může vrátit uložený aplikační shell, styly, skripty nebo dříve stažený obsah. Části závislé na čerstvých datech, například platba, skladová dostupnost nebo přihlášení proti serveru, připojení obvykle vyžadují. Offline režim je tedy návrhové rozhodnutí, ne automatická vlastnost PWA.
- Kdy Progressive Web App nestačí pro mobilní projekt?
- Progressive Web App nestačí pro mobilní projekt, který vyžaduje hlubokou integraci do operačního systému, velmi přesný běh na pozadí, specializovaný přístup k hardwaru nebo výkon blízký nativnímu kódu. PWA se hodí pro mnoho formulářových, obsahových a obchodních aplikací. Náročné hry, komplexní Bluetooth scénáře nebo pokročilé systémové integrace často dávají větší smysl jako nativní aplikace.
- Ovlivní Progressive Web App SEO?
- Progressive Web App může SEO pomoci i poškodit podle provedení. Vyhledávače potřebují dostupný obsah, správné HTTP odpovědi, rychlé načítání a rozumné vykreslování. Service worker nesmí vracet zastaralé nebo prázdné HTML a aplikace by neměla spoléhat jen na klientský JavaScript bez fallbacku tam, kde je důležitý indexovatelný obsah. Samotný manifest není SEO zkratka.
Zdroje
- Progressive web apps(otevře se v novém okně)
- Web Application Manifest(otevře se v novém okně)
- Service Workers(otevře se v novém okně)
- Service Worker API(otevře se v novém okně)
Související pojmy
