Progresivní webová aplikace s WordPress: výhody a nevýhody

4 min.
Progresivní webová aplikace WordPress

Náš partner z agentury giftGRÜN vytvořil s WordPress pro Univerzitní nemocnici RWTH Aachen progresivní webovou aplikaci (zkráceně PWA), která podporuje onboarding nových zaměstnanců. O výhodách a nevýhodách PWA v porovnání s webovými stránkami a nativními aplikacemi jsme si povídali s Patrickem Heinkerem.

Jak funguje Progressive Web App

Patricku, jak přesně funguje PWA a jak je to se správou dat?

Obsah je uchováván na WordPress a má podobu běžných šablon. ServiceWorker zajišťuje jeho fungování offline. Při prvním otevření stránky stáhne ServiceWorker soubor zip se všemi stránkami, který vygeneroval server.

Nyní se při vyvolání stránky zobrazí ta stránka, která se již uložila do cache. A ServiceWorker se na pozadí postará o aktualizaci, takže se při příští návštěvě zobrazí nový obsah, pokud se něco změnilo. Případně můžete také po aktualizaci znovu stránku načíst, ale v našem případě užití to nebylo nutné.

PWA WordPress
Screenshoty z progresivní webové aplikace pro Univerzitní nemocnici RWTH Aachen

Ukládání dat probíhá kompletně offline, pouze pro videa a externí obsahy je nutné mít připojení k internetu.

PWA vs. nativní aplikace

Jaké jsou rozdíly, ale také výhody oproti nativním aplikacím?

Nativní aplikace jsou specifické pro konkrétní platformy, často jsou nákladné, a proto je jejich implementace drahá. Kromě toho musí být distribuovány prostřednictvím oficiálních obchodů s aplikacemi, aby měly široký záběr. Naproti tomu lze PWA nainstalovat přímo při návštěvě webu pouhým stisknutím tlačítka.

Apple je však v podporování funkcionality PWA stále trochu pozadu. Ale mezi webovými vývojáři není žádnou novinkou, že Safari nepodporuje věci, které jsou v jiných prohlížečích už dávno běžné...

Jak probíhá souhra mezi progresivní webovou app a WordPress?

Pro údržbu dat, ale také pro šablony používáme WordPress. Jedná se o běžnou webovou stránku s jediným rozdílem, že obsah je dostupný offline prostřednictvím JavaScript ServiceWorker. A že se chová skoro stejně jako nativní aplikace.

Je možné také vsadit na rozhraní REST-API od WordPress a renderovat vše ze strany klienta, jak je to obvyklé v nativních aplikacích. V naší ukázce použití jsme ale viděli pouze vynaložené úsilí, které nepřináší téměř žádný užitek.

Implementace progresivní webové app s WordPress

Jaké se nabízejí možnosti, pokud chcete realizovat progresivní webovou aplikaci pomocí WordPress?

Existují některé pluginy, pomocí nichž lze stránku stisknutím tlačítka a pár změnami v nastavení proměnit v progresivní webovou aplikaci. Nabízejí se také služby push notifikací, které všechny návštěvníky blogu upozorní na nové příspěvky. Tyto hotové pluginy jsou však určeny spíše k tomu, aby běžný blog fungoval i offline a cílené soubory se načetly.

Poté, co jsme si pohráli s těmito některými pluginy, jsme přistoupili k vlastnímu řešení. Funkcionalitu jsme "budovali" odděleně od pluginů, abychom například umožnili kompletní načtení obsahu stránky prostřednictvím zipu, který generoval server, a abychom byli flexibilnější v přizpůsobování se funkci. Push notifikace se obvykle tvoří prostřednictvím placených služeb, ale stejně snadno je lze vytvořit i vlastními silami.

PWA: kompatibilita a ochrana dat

Jaká jsou možná úskalí a jak jste je vyřešili? A jak to vypadá s ochranou údajů?

Při vývoji webu je to obvyklé: každý prohlížeč funguje jinak a je třeba jej důkladně otestovat na všech zařízeních. Společnost Apple odmítá plně podporovat funkcionalitu PWA a pro zprovoznění aplikace má opět své vlastní specifické meta tagy, které se odchylují od standardu.

Model ukládání do cache (tj. mezipaměti) by měl být zvolen tak, aby odpovídal danému případu použití. ServiceWorker mohou v milisekundách ukázat stránky uložené v cache  a obnovovat je na pozadí. Pokud se však nacházím na stránce s novinkami, chce si uživatel eventuálně raději počkat, dokud se nenačte nejnovější obsah celý.

Ochrana dat byla jedním z hlavních důvodů, proč jsme se rozhodli pro PWA. Obsah a pokrok učení uživatelů jsou kompletně uchovány offline. Server nikdy nevidí, který uživatel co spouští, protože tu nejsou žádní přihlášení uživatelé. Nelze tedy vysledovat, zda nový zaměstnanec už vše zpracoval, nebo zda si aplikaci ještě ani nenainstaloval.

Výhody a nevýhody systémů

Jak se rozhodujete dle zákazníka, která technologie je pro takový projekt nejvhodnější?

Existují aplikace, které lze realizovat pouze prostřednictvím nativní aplikace. Pokud chce například zákazník bezpodmínečně mít na iPhonu push oznámení, pak to lze provést jen nativně. Na druhou stranu je produkce PWA také výrazně levnější než výroba nativní aplikace, a to díky použití webových technologií a eliminaci veškerých manipulací s úložištěm. Rozhodující roli samozřejmě hraje i dostupný rozpočet.

Máte v plánu nějaké další projekty PWA, o kterých nám můžeš něco prozradit?

Je jich hodně - ale zatím je nechceme prozrazovat 😉 Jen tolik: s PWA se dají dělat velké věci i v oblasti elektronického obchodování.

Pár slov o tobě a tvé agentuře?

giftGRÜN je digitální agentura skupiny GRÜN. Naše skupina podniků je na německém trhu jedničkou mezi poskytovateli systémů pro správu členů a správu příspěvků. Většina našich projektů se týká nastavení veškerého systému pro naše zákazníky, tj. propojení našeho systému ERP s webovými stránkami.

Děláme hodně práce na rozhraní, a proto také vyvíjíme vlastní WordPress šablony. Náš tým se skládá z designérů, front-end a back-end vývojářů a projektových manažerů. Náš oblíbený hostitel pochází samozřejmě z Münsteru 🙂

Vaše otázky k progresivním webovým aplikacím

Jaké máte dotazy k progresivním webovým aplikacím? Neváhejte nám napsat komentář. Chcete být informováni o nových článcích na WordPress a WooCommerce? Pak nás sledujte na Twitteru, Facebooku, LinkedIn nebo prostřednictvím našeho newsletteru.

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.