Progressive Web Apps (PWA)

Co jsou Progressive Web Apps neboli PWA?

Progressive Web Apps jsou technologickou kombinací nativních aplikací a webových aplikací založených na HTML5, které známe. PWA přišly, aby překlenuly technologickou propast mezi aplikacemi a webovými stránkami.

Google byl jedním z hlavních zastánců povzbuzování vývoje tohoto typu technologie. Pro lepší pochopení jejích funkcí musíme mluvit o aplikacích, které musí být spolehlivé, rychlé a poutavé.

Funkce, které musí mít Progressive Web Apps

Aby koncept PWA byl dostatečně jasný a vysvětlený, ponořme se do zásadních vlastností, které tyto technologie musí mít.

Samozřejmě mluvíme obecně. Odtud každý byznysový/servisní model přizpůsobí své cíle potřebám své vlastní cílové skupiny.

Rychlost

Čas jsou peníze, nejen pro Google, ale pro všechny ty businessy, kde pomalé načítání jejich produktů může způsobit, že uživatelé opustí potenciální nákup.

Google na tuto premisu zdůrazňoval dlouhou dobu. Zrod projektu AMP měl tento cíl, a nyní se PWA připojují k potřebě rychlého přístupu k informacím z aplikací.

Uživatelé dnes nemají trpělivost; nečekají, až se web plně načte. 53 % uživatelů nepočká na načtení webu více než 3 sekundy podle Think with Google

Spolehlivá

Když mluvíme o spolehlivosti, máme na mysli garance fungování webu. Díky tomu, co je známé jako Service Workers, by problémy se síťovým připojením neměly bránit načtení PWA.

Instalovatelná

PWA lze instalovat, aniž byste museli jít na Chrome Store, Apple Store nebo do kteréhokoli z existujících obchodů s aplikacemi. Pamatujte, že nejsou nativními aplikacemi, takže k nim můžeme přistupovat, aniž bychom prošli těmito obchody.

Instalace se chová jednoduše jako zkratka; nepotřebuje místo pro uložení různých souborů.

Různá zařízení: mobil a desktop

Codebase je sjednocena mezi oběma zařízeními, což znamená, že techniky responzivního designu se vztahují jak na mobil, tak na desktop.

Výhody a nevýhody PWA

Některé výhody již byly zmíněny výše při vysvětlování funkcí progresivních aplikací. Ale existuje mnohem více důvodů zvážit používání této technologie v našem businessu.

• ›Úspora zdrojů
• ›Není vyžadována žádná instalace
• ›Velmi vysoká rychlost načítání
• ›Push notifikace přímo na smartphony
• ›Funguje na všech operačních systémech
• ›Vylepšená bezpečnost
• ›Méně vývojářské a údržbářské práce než u nativní aplikace.
• ›Ekonomičtější než nativní aplikace.

Nevýhody

• ›Vyžaduje internetové připojení.
• ›Ne všechny prohlížeče podporují PWA.
• ›Vysoká spotřeba baterie

Co je Service Worker?

Vraťme se krátce k technické stránce, musíme mluvit o určitých aspektech, bez kterých by progresivní aplikace nemohly fungovat. Service workers jsou skripty, které běží na pozadí a dělají požadavky na webové aplikace, cache nebo samotnou síť.

Jednou důležitou věcí, kterou bychom měli vědět, je, že Service Workers mohou fungovat pouze, pokud máte SSL certifikát a obsluhujete je přes https.

Nyní si to všechno ukážeme na příkladu: web BMW a jeho PWA.

Příklad PWA: BMW

Snažil jsem se napsat článek bez hlubokého ponoru do technických aspektů, a teď uvidíme příklad aplikace, která pomůže lépe pochopit koncept PWA.

Pokud vstoupíme na web BMW, vidíme, že mají velmi atraktivní design, upřednostňující vizuální, ale za řečí o designu se podívejme, s jakým typem webu se setkáváme.

Zdá se, že je to „normální" web, ale pokud se prohrabete kódem, dostaneme první překvapení. Skutečně, je to web kompletně vyvinutý v AMP, nejen mobilní verze.

Ale dostaňme se k dnešnímu předmětu.

Jakmile jsme uvnitř webu, přejděme do lišty „přizpůsobit a ovládat" Chromu.

Jak jste mohli vidět, otevřelo se okno s obsahem webu BMW. Při srovnání obou obsahů vidíme, že jsou prakticky totožné.

Obrázek webu v prohlížeči (Chrome)

Obrázek webu v PWA desktop

Vývojářům BMW se podařilo zachovat identický vizuální vzhled. Když přijmeme „instalaci" PWA do naší složky aplikací Chrome nebo dokonce na desktop (v závislosti na OS, právě teď používám MacOS), byla stažena zkratka na PWA.

Pokud jsme zavaleni instalací aplikací a chceme odinstalovat, stačí jít do okna naší PWA verze, kliknout na pravou stranu stejně jako v Chromu a vybrat odinstalovat.

V mobilní verzi je to prakticky podobné. Když vstupujeme na web s PWA verzí, dostáváme upozornění „vytvořit zkratku".

Při vstupu na web s PWA; uvidíme možnost vytvořit zkratku.

Pokud souhlasíme, uvidíme ikonu PWA na našem mobilním desktopu.

DevTools, abychom se naučili více o PWA

V tuto chvíli se chci ponořit do příkladů pro vysvětlení konceptů a funkcí tohoto typu aplikace.

K tomu použijeme vývojářský nástroj, který poskytuje Chrome (DevTools). Otevřeme inspektor pravým tlačítkem a přejdeme na Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifest je malý JSON soubor se základními aspekty stylu, který poskytuje prohlížeči, aby se zabránilo náhlým změnám.

Příklad Manifestu (JSON)

Service Workers

Jak jsme vysvětlili dříve, nyní můžeme vidět, o co jde. Vidíme JS soubor a v něm skripty, které používá. Service Worker je nainstalován v prohlížeči. Budeme mít několik z dalších webových aplikací.

Jednou z hlavních funkcí tohoto typu kódu je zajistit, aby byla vždy obsluhována stejná verze (řídí cache), i když otevřeme jinou záložku.

Jak implementovat PWA ve WordPressu?

Zatímco pokud jsme náš web vyvinuli s vlastním kódem, budeme muset udělat docela dost manuální práce, situace bude velmi odlišná, pokud jsme náš web vyvinuli ve WordPressu. Pokud je to případ, budeme mít k dispozici několik pluginů, které nám umožní povolit PWA technologii na pár kliknutí. PWA verze SEOcrawl je ve skutečnosti výsledkem tohoto pluginu, který doporučujeme.

Nejpopulárnější pluginy pro implementaci PWA ve WordPressu.

PWA v marketingu

Pro ty z nás, kteří pracujeme v marketingu, mohou Progressive Web Apps pomoci dosáhnout cílů, které má každé marketingové oddělení na mysli, aby vyrostlo značku.

Věrnost a prodeje

Jeden z cílů, na kterém někteří značky pracovaly nejhůř. Všichni známe nízkou angažovanost, kterou značky mobilních telefonů mají při zacházení se svými zákazníky, abychom uvedli příklad.

Push notifikace v PWA jsou jednou z akcí, které fungují nejlépe a přispívají ke generování prodejů.

Studie provedená Gartnerem o PWA nám dává řadu velmi zajímavých statistik o Lancome a Alibabě; Lancome hlásí 17% nárůst konverzí, 51 % v sessions z mobilních zařízení a 52 % na iOS. Alibaba (skupina, ke které patří Aliexpress) zlepšila svou míru konverze o 76 %.

I když jsme mluvili o 2 globálních gigantech, mít aplikaci na mobilu, kde čas načítání a provádění není zátěží, plus respektující dobrý design, ukázalo se, že zvyšuje míru konverze.

Závěrem můžeme říct, že PWA se stále více šíří, hlavně mezi velkými značkami. Ve Španělsku nám pravděpodobně chvíli trvá, než si uvědomíme obrovský potenciál této technologie, ale dříve nebo později bude implementována.

Jakákoli technologie, která usnadňuje mobilní navigaci, má velkou důležitost; trávíme mnoho hodin se svými smartphony, a nakonec přístup k obsahu i produktům je business.

Reference

• ›Dokumentace Googlu k PWA