Co jsou to progresivní webové aplikace a jak si je nainstaluji?

Co jsou to progresivní webové aplikace a jak si je nainstaluji?

V telefonu dominují aplikace. Aplikace dlouhou dobu neovlivňovaly váš počítač nebo prohlížeč stejným způsobem. To se v posledních letech změnilo. Progresivní webové aplikace (PWA) rostou a mění naše interakce se všemi druhy webových stránek.





Ale co to vlastně je progresivní webová aplikace? Co PWA dělá, že web ne? Zde je to, co potřebujete vědět o progresivních webových aplikacích.



Co je to progresivní webová aplikace?

Progresivní webové aplikace jsou webové aplikace, které uživatelům nabízejí běžný web, ale zobrazují se jako nativní mobilní aplikace. Pokusy PWA přinést použitelnost nativní mobilní aplikace do sady moderních funkcí prohlížeče, přičemž plně využívají pokroky v obou vývojových oblastech.





Co tedy definuje PWA?

  • Univerzální : PWA musí fungovat bezproblémově (dobře, téměř) pro každého uživatele, bez ohledu na jeho prohlížeč.
  • Citlivý : PWA by měly fungovat s jakýmkoli zařízením, jako je váš notebook, tablet, smartphone atd.
  • Design : design by měl napodobovat nativní mobilní aplikace, což znamená zjednodušené a snadno dostupné nabídky s jednoduchou interaktivitou pro pokročilé funkce.
  • Bezpečný : PWA by měly používat HTTPS k zabezpečení uživatelských dat.
  • Objevitelný: uživatelé mohou najít PWA a lze je snadno identifikovat jako aplikaci (spíše než jako „web“).
  • Zapojení: PWA musí mít přístup k nativním funkcím zapojení, jako jsou push notifikace.
  • Aktualizace: PWA zůstávají aktuální a slouží nejnovější verzi služby nebo webu.
  • Instalace: umožňují uživatelům snadno 'nainstalovat' PWA na domovskou obrazovku, aniž by potřebovali obchod s aplikacemi.
  • Sdílení: PWA vyžadují ke sdílení pouze jednu URL, bez jakékoli instalace.

Jak vidíte, cílem PWA je poskytnout uživatelům úplné webové stránky s efektivnějšími funkcemi a designem rozhraní nativní aplikace.



Jak funguje progresivní webová aplikace?

Klíčem k progresivním webovým aplikacím jsou pracovníci servisu prohlížeče.

Servisní pracovník je skript, který běží na pozadí vašeho prohlížeče „odděleně od webové stránky a otevírá dveře funkcím, které nepotřebují webovou stránku ani interakci uživatele“. Můžete použít servisní pracovníky jako push notifikace a synchronizace na pozadí v tuto chvíli, ale okamžitá budoucnost PWA dává těmto skriptům větší sílu.



Servisní pracovníci tvoří základ standardu PWA a využívají webovou mezipaměť pro téměř okamžité výsledky.

Před servisními pracovníky byl skript mezipaměti prohlížeče přejmenován na Application Cache (nebo App Cache). Mezipaměť aplikací funguje v široké škále služeb offline, ale byla poněkud náchylná k chybám. Kromě toho má App Cache několik dobře známých omezení, jako A List Apart vysvětluje.



Ale hlavním problémem pro vývojáře je nedostatek přímé interakce s tím, jak přesně AppCache funguje, což brání vývojářům přesně řešit problémy, jakmile nastanou. Webové stránky a služby s plnou funkcí offline byly zase riskantní volbou.

Servisní pracovníci však vydrží jen tak dlouho, jak je vyžadováno jejich jednání. Když v PWA na něco kliknete nebo použijete funkci, servisní pracovník vstoupí do akce. Servisní pracovník (pamatujte, je to skript) zpracuje událost a rozhodne, zda může mezipaměť offline požadavek dokončit. Myšlenka spočívá v tom, že pro PWA existuje několik offline mezipamětí, z nichž si můžete vybrat, což poskytuje mnohem širší škálu funkcí offline.

Mezipaměť navíc není jen pro zvýšení rychlosti offline. Například směřujete k PWA, ale vaše připojení je extrémně neuspořádané. Servisní pracovník obsluhuje předchozí mezipaměť, plně funkční, bez přerušení vašeho prostředí.

Progresivní podpora webového prohlížeče

Pro používání progresivní webové aplikace existují dva požadavky: kompatibilní prohlížeč a služba podporující PWA.

Nejprve se podívejme na prohlížeče. Máte dvě možnosti, jak zkontrolovat podporu prohlížeče PWA. První je Jake Archibald's Je servisní pracovník připraven ? který snadno zobrazuje stav hlavních prohlížečů připravených na PWA a internet Samsung.

Chcete -li získat podrobnější přehled podpory prohlížeče PWA, měli byste se podívat Mohu použít , web, který se specializuje na seznam implementací různých webových a prohlížečových technologií podle verze prohlížeče. Pokud například do vyhledávacího pole zadáte „servisní pracovníci“, najdete tabulku zobrazující číslo verze, se kterou každý prohlížeč implementoval servisní pracovníky PWA.

Tabulka Mohu použít servisní pracovníky potvrzuje, že všechny hlavní prohlížeče podporují PWA. Rovněž ukazuje podporu PWA pro několik alternativních desktopových prohlížečů a mobilních prohlížečů.

Rozebrat to trochu víc:

  • Prohlížeč pro stolní počítače (plná podpora): Chrome, Firefox, Opera, Edge, Safari
  • Prohlížeč pro stolní počítače (částečná podpora/zastaralá verze): Prohlížeč QQ, prohlížeč Baidu
  • Mobilní prohlížeč (plná podpora): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Mobilní prohlížeč (částečná podpora/zastaralá verze): Prohlížeč QQ, Prohlížeč Android, Opera Mobile

Všechny hlavní prohlížeče tedy podporují PWA. Microsoft Edge a Safari jsou nejnovějšími přírůstky do úplného seznamu podpory. Naopak, QQ Browser i Baidu Browser nyní používají zastaralé verze a jako takové spadly do druhé úrovně.

Jak najít a nainstalovat progresivní webovou aplikaci

Nyní, když víte, který prohlížeč použít, můžete přemýšlet o hledání a instalaci PWA. V tomto případě budu používat Samsung Galaxy S8 s Google Chrome.

Progresivní webové aplikace jsou všude. Mnoho společností přizpůsobilo své weby a služby tak, aby nabízely verzi Progressive Web App. V mnoha případech se s PWA poprvé setkáte, když přejdete na domovskou stránku nebo mobilní web služby, který spustí Přidat na domácí obrazovku dialogové okno.

Podívejte se na video níže, abyste zjistili, co se stane, když navštívíte Mobilní web Twitter .

Navštívit bezpočet webů a doufat, že uvidíte spoušť na domovské obrazovce, samozřejmě není užitečné. Ve skutečnosti je to časově velmi náročné. Naštěstí to nemusíte dělat, protože existuje několik stránek věnovaných katalogizaci PWA.

První pokus přelstít . Uvádí docela slušnou škálu PWA, přičemž se často objevují nové možnosti. Dále zkuste pwa.rocks. Má menší výběr, ale některé praktické PWA, které budete chtít přidat do svého zařízení.

V lednu 2019 byl navíc Chrome 72 pro Android dodáván s důvěryhodnou webovou aktivitou (TWA). TWA umožňuje otevření karet Chrome v samostatném režimu. Na druhé straně to umožňuje PWA fungovat v obchodě s aplikacemi Google Play. Prvních pár PWA, které se objevily na Google Play, bylo Twitter Lite , Instagram Lite a Google Maps Go , s více nastavenými, aby se objevily v průběhu času.

Galerie obrázků (2 obrázky) Rozšířit Rozšířit Zavřít

Nahradí progresivní webové aplikace nativní aplikace?

Progresivní webové aplikace jsou vynikajícím hybridním krokem mezi vaším prohlížečem a nativní mobilní aplikací. Nahradí PWA nativní aplikace úplně? To je ode mě těžké ne. PWA jsou skvělé jako odlehčená nabídka, ale vzhledem k tomu, že se v současné době převážně zaměřují na replikaci stávajících webů a služeb, nenahradí nativní aplikace.

Alespoň prozatím ne.

můžete dát hry ps3 do ps4

PWA však fungují. Data dostupná ve statistikách PWA to také podporují. Zde je několik zajímavých čísel, která ilustrují, jak PWA mění naše interakce s běžně používanými webovými stránkami:

  • Společnost Trivago zaznamenala 150 % nárůst zapojení uživatelů přidávajících své PWA na domovskou obrazovku.
  • Domovská stránka Forbes PWA se úplně načte za pouhých 0,8 sekundy, zatímco počet zobrazení na návštěvu se zvýší o 10 procent. Forbesův PWA také zaznamenal dvojnásobnou délku relací uživatelů.
  • Twitter Lite zaznamenal 65procentní nárůst stránek na relaci s masivním 75procentním nárůstem tweetů. Je také interaktivní „za méně než 5 sekund přes 3G“.
  • Alibaba zaznamenala 76 % nárůst mobilních konverzí.

PWA ještě nejsou hlavním proudem. Ale s obrovskou škálou výhod, které poskytují, například úspora místa na vašem zařízení, o nich v budoucnu ještě uslyšíte.

Podíl Podíl tweet E-mailem Průvodce pro začátečníky k animované řeči

Animovaná řeč může být výzva. Pokud jste připraveni začít s přidáváním dialogu do projektu, proces za vás rozdělíme.

Číst dále Související témata O autorovi Gavin Phillips(945 publikovaných článků)

Gavin je juniorský editor pro Windows a vysvětlenou technologii, pravidelný přispěvatel do Skutečně užitečného podcastu a pravidelný recenzent produktů. Má BA (Hons) Contemporary Writing with Digital Art Practices drancované z kopců Devonu, stejně jako více než deset let zkušeností s profesionálním psaním. Má rád velké množství čaje, deskových her a fotbalu.

Více od Gavina Phillipse

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru