Vytvořte progresivní webovou aplikaci (PWA) jako svého nejlepšího přítele

„PWA je revolucionář pro vývoj webových aplikací. Pomáhá zvýšit vaši produktivitu tím, že poskytuje skvělý uživatelský zážitek, který kombinuje výhody webových i mobilních aplikací s minimálními náklady. “
Handshake je dobrá praxe

Chvění s PWA udržuje zákazníka v kontaktu. A PWA je vždy připraven stát se vaším nejlepším přítelem, tak proč neposíláme žádost o přátelství PWA?

Je čas udělat dobrý krok k PWA a vysvětlím, jak pro vás vaše přátelství s PWA prospívá!

Nezaměňujte si s PWA

Z některých důvodů si mnoho lidí myslí, že PWA jsou jednostránkové aplikace (SPA).
To je špatně, opravdu velmi špatně (se stavovým kódem 400 ).

SPA může být PWA, ale PWA nemusí být SPA.

PWA rád pracuje se všemi

Webové stránky postavené na jakémkoli rámci nebo knihovně, jako jsou ReactJs, Angular, VueJS nebo dokonce v HTML, mohou být PWA.

Zjednodušeně řečeno, progresivní webová aplikace je mobilní web transformovaný s dalšími funkcemi a funkcemi, které mu dodávají dojem „app-like“. Funguje to pomocí instance prohlížeče a využívá servisního pracovníka k zajištění plynulého provozu i bez spolehlivého připojení k internetu.

Pokud máte mýtus, že PWA je technologie Google, pak tyto informace stačí k tomu, abyste svůj mýtus vyčistili. Progresivní webové aplikace jsou založeny na webových standardech. Funguje s každým prohlížečem a každou platformou.

Jedná se tedy o web - ale je to jako nativní mobilní aplikace, úvodní obrazovka, vlastní obrazovka načítání, plynulejší animace, oznámení push a žádný navigační panel. Vaši průměrní koncoví uživatelé to mohou nazvat mobilní aplikací.

Progresivní webové aplikace jsou weby, které musí splňovat tři technické požadavky:

  • Musí být doručeno pomocí protokolu HTTPS (zabezpečené)
  • Mějte platný soubor webového manifestu s minimální specifickou sadou ikon
  • Měl by zaregistrovat platného servisního pracovníka a minimální podporu offline

Nic z těchto požadavků neříká, že web musí používat JavaScript. Stručně řečeno, musíte zaregistrovat servisního pracovníka pomocí JavaScriptu na straně klienta.

PWA podporuje následující funkce:

  • Připnutí na domovskou obrazovku - Na domovskou obrazovku můžeme přidat ikonu naší webové aplikace.
  • Oznámení Push - Můžeme integrovat oznámení push jako v nativní aplikaci prostřednictvím rozhraní Push API a API pro oznámení pro web.
  • Úvodní obrazovka - Soubor manifestu spravuje úvodní obrazovku pro vaše PWA, aby bylo možné oslovit jako nativní aplikace
  • Geografická poloha - k aktuální poloze uživatele můžeme přistupovat pomocí rozhraní Geolocation API
  • Režim práce offline - Díky servisnímu pracovníkovi, který spravuje mechanismus ukládání do mezipaměti, získáme bohaté uživatelské zkušenosti, i když není k dispozici internet.
  • Přístup k multimediálním funkcím - Můžeme přistupovat k mikrofonním, video a kamerovým zařízením. Implementujte také funkci videohovoru a zvukového volání pomocí rozhraní API WebRTC.

Celkově nemusíte vyvíjet samostatnou mobilní aplikaci pro stejný projekt, pokud jsou vaše požadavky splněny funkcemi PWA. Znamená to, že PWA se stále snaží poskytovat funkce některých nativních aplikací.

Jo, to je úžasný okamžik pro vývojáře webu. Další užitečné funkce jsou již na cestě. PWA se již těší na poskytování nativních funkcí podobných aplikacím. Pojďme se podívat na ty funkce, které nám budou opravdu užitečné.

PWA bude v budoucnu podporovat následující funkce jako:

  • Bluetooth - Web Bluetooth API se vyvíjí a brzy budeme mít přístup k Bluetooth na webové platformě.
  • Senzory - Senzory jsou opravdu důležitou součástí dnešní vývojové éry. Přístup některých senzorů se již vyvíjí, jako je snímač okolního světla, přibližovací senzor, snímač akcelerometru, magnetometrický senzor a gyroskopický senzor.
  • Nativní sdílení - Můžeme vyvolat nativní mechanismus sdílení zařízení jako součást rozhraní Web Share API.
  • Snímač otisků prstů - Uživatelé můžeme autentizovat pomocí snímače otisků prstů pomocí rozhraní Web Authentication API. Z bezpečnostních důvodů je však stále vyvíjen.

Proč dnes každý přijme PWA?

Po přečtení některých statistik velkých společností, které používají PWA, budete znát sílu PWA a jasně pochopíte, proč všichni chtějí jít za PWA.

Chci vám ukázat některá data z případových studií PWA populárních společností:

  • Twitter vyvinul progresivní webovou aplikaci Twitter Lite v dubnu 2017 a ve výsledku twitter zvýšil stránky na relaci o 65%, tweety poslaly zvýšení o 75% a pokles míry odchodů o 20%.
  • Flipkart, největší indický web v oblasti elektronického obchodování, se v roce 2015 rozhodl vypnout strategii pouze pro aplikace. Poté přišli s Flipkart Lite, který využívá Powered by PWA a budete ohromeni čtením Je to skvělé výsledky. Uživatelé trávili více času na webu rychlostí 3x, míry opětovného zapojení jsou o 40% vyšší, o 70% vyšší míra konverze u těch, kteří přicházejí přes obrazovku Přidat na domovskou stránku, a 3x nižší využití dat ve srovnání s nativní aplikací.
  • Alibaba.com, největší online obchodní platforma B2B na světě. Alibaba.com přišla s novou strategií jako PWA, aby poskytovala skvělý uživatelský zážitek jak pro návštěvníky, kteří navštěvují poprvé, tak pro opakované návštěvníky. Jejich nová strategie přišla s překvapivými výsledky. Alibaba.com získala o 76% vyšší míru konverze napříč prohlížeči, o 4% více aktivních uživatelů měsíčně na iOS a 30% na Androidu a 4x vyšší míru interakce z Přidat na plochu.

Ano, to je neuvěřitelné a musíme akceptovat krásu Progresivní webové aplikace. Teď chápete, proč vás nutím, abyste se PWA stali vaším nejlepším přítelem.

Obchod Play je připraven publikovat PWA

Ano ano ano! Obchod Play a PWA se nyní stali přáteli. Nyní můžeme publikovat PWA v obchodě pomocí Trusted Web Activities (TWA). Google Chrome 72 přidal Důvěryhodné webové aktivity, aby podporoval webové zobrazení na celé obrazovce bez zobrazení adresy URL nebo jakýchkoli prvků souvisejících s prohlížeči. Můžete si tedy vytvořit APK vaší webové aplikace a nahrát ji do obchodu s hrami pomocí studia Android a některých znalostí vývoje Androidu.

Zde doporučuji sledovat video níže, abyste získali podrobné znalosti o TWA:

Existence PWA jako Facebook Lite, Instagram Lite, Flipkart Lite a Twitter Lite většinou používají WebView a dává nám pocit aplikace. Ale mějte na paměti, že Apple stále nepodporuje TWA.

Nakonec můžeme říci, že PWA je dobrý a nákladově efektivní přístup k vývoji našich webových aplikací. Jistě je to budoucnost vývoje webu. Doufáme, že PWA nám bude sloužit více v budoucnu jako vždy.

Clap Clap Clap! Protože tleskání je dobrý zvyk