Progresivní webové aplikace (PWA): co jsou, výhody a nevýhody a hlavní příklady na trhu

Žijeme ve stále rychlejším, dynamičtějším a neustále se měnícím světě. Postupné inovace, které mají vliv na lidi, následují jedna za druhou a stále zřetelněji se zaměřují na:

výkon, vzpomeňme na stále výkonnější zařízení, která denně používáme, nebo na úkoly, které nám umožňují dělat rychleji;
zážitek, aby se odstranily veškeré třecí plochy při používání softwaru/hardwaru;
inteligenci, s algoritmy, které nyní pracují v prediktivní perspektivě.

Tímto směrem, zaměřeným především na výkon a uživatelský zážitek pro koncového uživatele, se ubírá vývoj progresivních webových aplikací (PWA), řešení, které chce spojit to nejlepší z nativních aplikací a webových technologií.

Progresivní webová aplikace (PWA) je aplikace, která využívá moderní webové možnosti, aby uživatelům nabídla velmi podobný (ne-li lepší) zážitek jako nativní aplikace.

Na rozdíl od tradičních aplikací jsou progresivní webové aplikace hybridem mezi běžnými webovými stránkami a mobilními aplikacemi. Termín “progresivní” odkazuje na skutečnost, že zavádějí nové funkce a z hlediska uživatelského zážitku jsou zpočátku vnímány jako běžné webové stránky, ale postupně se chovají více jako mobilní aplikace, mimo jiné multiplatformní.

Pros a proti progresivní webové aplikace
Důležitost manifestu a pracovníků služeb
Jaké jsou nejpoužívanější technologie pro PWA?
Jak se rozhodnout mezi PWA a nativním řešením
Rozdíly v procesu instalace: PWA vs. nativní aplikace
Hlavní příklady progresivní webové aplikace
Je tedy budoucnost “progresivní”?

Pros a proti progresivní webové aplikace

Hlavní vlastnosti jsou:

Progresivní – fungují pro každého uživatele bez ohledu na zvolený prohlížeč, protože jsou v základu postaveny na principech progresivního zlepšování.
Responzivní – Přizpůsobují se různým velikostem obrazovky: stolnímu počítači, mobilu, tabletu nebo rozměrům, které mohou být k dispozici později.
Podobné aplikacím – Chovají se k uživateli jako nativní aplikace, pokud jde o interakci a navigaci.
Aktualizované – Informace jsou vždy aktuální díky procesu aktualizace dat, který nabízejí pracovníci služeb.
Zabezpečené – Vystavené přes protokol HTTPS, aby se zabránilo zobrazení informací nebo změně obsahu připojení.
Vyhledatelné – Jsou identifikovány jako “aplikace” a jsou indexovány vyhledávači.
Reaktivovatelné – Usnadňují opětovnou aktivaci aplikace díky možnostem, jako jsou webová oznámení.
Instalovatelné – Umožňují uživateli “uložit” aplikace, které považuje za nejužitečnější, s příslušnou ikonou na obrazovce svého mobilního terminálu (domovské obrazovce), aniž by musel čelit všem krokům a problémům spojeným s používáním obchodu s aplikacemi.
Odkazovatelné – Snadno se sdílejí prostřednictvím adresy URL bez složitých instalací.
Offline – Opět jde o to, aby měl uživatel přednost před vším a vyhnul se obvyklému chybovému hlášení v případě slabého nebo žádného připojení. PWA jsou založeny na dvou zvláštnostech: především na “kostře” aplikace, která připomíná strukturu stránky, i když její obsah neodpovídá, a mezi její prvky patří záhlaví, rozvržení stránky a také ilustrace, která signalizuje, že se stránka načítá.

Slabiny se týkají:

podpory systému iOS od verze 11.3 a dále;
větší využití baterie zařízení;
ne všechna zařízení podporují celou škálu funkcí PWA (stejná řeč pro operační systémy iOS a Android);
není možné zavést silné opětovné zapojení pro uživatele iOS (schéma URL, standardní webová oznámení);
podpora provádění offline je však omezená;
nedostatek přítomnosti v obchodech (není možnost získávat provoz z tohoto kanálu);
neexistuje kontrolní “orgán” (jako obchody) a schvalovací proces;
omezený přístup k některým hardwarovým komponentám zařízení;
malá flexibilita, pokud jde o “speciální” obsah pro uživatele (např. věrnostní programy, loyalty apod.).

Důležitost manifestu a pracovníků služeb

Nové funkce moderních prohlížečů, které umožňují nabízet PWA to nejlepší, jsou “manifest” a “pracovníci služeb”.

Manifest
Jedná se o jednoduchý soubor JSON, který definuje základní parametry PWA, řídí, jak se má aplikace zobrazovat uživateli, a definuje její vzhled při spuštění: ikony, další základní vlastnosti, jako jsou barvy, písma, orientace obrazovky a možnost instalace na domovskou obrazovku.

Pracovníci služeb
Jsou skutečným klíčem k pokročilým zážitkům, které může PWA nabídnout. Service worker je skript, který prohlížeč spouští na pozadí, odděleně od webové stránky, a používá funkce, které nevyžadují webovou stránku ani interakci uživatele.

Dnes již SW obsahují funkce, jako jsou push oznámení a synchronizace na pozadí. V budoucnu budou podporovat funkce, jako je periodická synchronizace nebo geofencing. Hlavní funkcí je schopnost zachycovat a spravovat síťové požadavky, včetně programové správy mezipaměti odpovědí. Jedná se o rozhraní API, které podporuje offline zážitky tím, že dává vývojářům úplnou kontrolu nad zážitkem.

Díky přidání podpory pro service workers v nejnovější verzi systému iOS otevřela společnost Apple dveře PWA, aby se dostaly po všech stránkách na celý mobilní trh.

Jaké jsou nejpoužívanější technologie pro PWA?

Pro vytvoření progresivní webové aplikace existuje několik technologií, založených především na JavaScriptu, s různými vlastnostmi.

Mezi hlavní patří např:

React
Výkonná knihovna jazyka JavaScript pro vytváření dynamických a moderních uživatelských rozhraní
Polymer
Kombinace komponent, nástrojů a modelů určených k vytváření PWA
Angular
Rámec JavaScriptu pro vytváření dynamických webových aplikací, který používá jazyk HTML jako šablonovací jazyk
Ionic
Rámec JavaScriptu pro vytváření výkonných aplikací pro více platforem pomocí základního kódu
Accelerated Mobile Pages (AMP)
Open source projekt pro zlepšení výkonu webových stránek

Jak se rozhodnout mezi PWA a nativním řešením

Nastává okamžik volby, jaké řešení přijmout?

Vhodnější je zvolit vývoj PWA, když:

Aplikace musí být snadno distribuována ještě širší uživatelské základně
Dostupný rozpočet není vysoký
Na uvedení do provozu je málo času
Důležitá je správná indexace ve vyhledávačích
Vyžaduje se kompatibilita napříč platformami
Vyžaduje se více aktualizací v krátkém čase

Nativní aplikaci je naopak výhodnější vyvinout, když:

Je nutné se pohybovat v obchodech
Rychlost a odezva jsou klíčovými body pro úspěch aplikace
Aplikace vyžaduje důležité využití hardwarových funkcí zařízení
Obchodní model je založen například na ceně za stažení a/nebo IAP (In App Purchase)
Aplikace musí být integrována s dalšími aplikacemi třetích stran

Rozdíly v procesu instalace: PWA vs. nativní aplikace

Obecný proces instalace nativních aplikací probíhá následovně:

Přístup do referenčního obchodu (App Store nebo Google Play)
Vyhledání aplikace
Kliknutí na “Instalovat”
Přijetí různých oprávnění
Otevření a spuštění aplikace
Používání aplikace

V porovnání zahrnuje instalace PWA:

Navštívení webu
Přidání na domovskou obrazovku zařízení (volitelné)
Otevření aplikace
Použití aplikace

Hlavní příklady progresivní webové aplikace

Je již mnoho příkladů PWA “rozlišených”, které uživatelé používají na svých zařízeních a mezi hlavní uvádíme:

Chcete-li vědět více:
Addy Osmani na Medium > Případová studie výkonu progresivní webové aplikace Pinterest

Instagram

Současná PWA je velmi podobná nativní aplikaci a má všechny hlavní interakční funkce, od oznámení až po možnost zobrazení Stories.

Mapy Google

Více:
The Next Web >Olehčené Mapy Go od Googlu jsou jen progresivní webová aplikace

Tinder

Více:
Addy Osmani na Medium > Progresivní případová studie výkonu webové aplikace Tinder

Twitter Lite

Chcete-li vědět více:
Blog Twitteru > Jak jsme vytvořili Twitter Lite
Google Developers > Twitter Lite PWA výrazně zvyšuje zapojení a snižuje spotřebu dat
Paul Armstrong na Medium > Twitter Lite a vysoce výkonný progresivní web React Aplikace ve velkém měřítku

YouPorn

Maternidad y todo