Bezpochyby jste slyšeli o nadcházející vlně mobilního webu. Nejběžnější věcí, kterou jste pravděpodobně slyšeli, je to, že přístup k mobilnímu webu rychle roste a zhruba polovina veškerého webového provozu je nyní prostřednictvím telefonu nebo tabletu. A Zpráva z února 2018 z Pew Research Center Všimněte si, že 95% všech Američanů vlastní mobilní telefon, zatímco podíl Američanů se smartphony je 77%.
Nemusíte se dívat daleko, abyste viděli dopad mobilních zařízení. Podívejte se na své vlastní chování a chování vaší rodiny. V prosinci 2016 comScore uvedl, že průměrný Američan nad 17 let strávil na svém telefonu dvě hodiny a 51 minut denně (Englais).
Statcounter.com konstatuje, že globální webový provoz pochází hlavně z mobilních zařízení po dobu nejméně jednoho roku (51,95% v únoru 2018).
I když si možná myslíte, že si nemůžete dovolit vyvinout nativní aplikaci pro mobilní uživatele, kterou by si mohli ukládat na své telefony, pro každé podnikání existuje úžasná alternativa: Progresivní webové aplikace. Možná jste slyšeli o progresivních webových aplikacích (PWA) a o tom, jak je lidé používají k rozvoji svého podnikání. V tomto článku se dozvíte něco více o PWA a proč byste měli více uvažovat o jejich použití v roce 2018.
Některé definice
Progresivní webové aplikace (PWA) jsou kolekce webových standardů původně vyvinutých společností Google za účelem zlepšení výkonu webových stránek v mobilních zařízeních. Výsledkem je, že weby fungují spíše jako specializované mobilní aplikace, které najdete v App Store Apple nebo Google Play.
Další definice vývojáři pro indický hotelový řetězec Treebo: „PWA jsou jednostránkové aplikace, které jsou postupně vylepšovány funkcemi, které poskytují více pohlcující nativní zážitek. »
Když to trochu zkrátíme, PWA na mobilních zařízeních umožňují vašim čtenářům a zákazníkům rychle načíst domovskou stránku vašeho webu a používat mnoho stejných funkcí na mobilním zařízení, které by používala nativní aplikace. Váš web může existovat mimo prohlížeč, i když zařízení není připojeno k internetu.
Další definice
Mezi klíčové technické součásti PWA patří:
Služby Pracovníci jsou klíčovou technologií spojenou s PWA. Ty umožňují PWA pracovat mimo síť.
Zjistěte soubory obsahovat ikonu a název, které propojují aplikaci v zařízení s Webové stránky. Vývojář sem může také přidat designové prvky, aby zlepšil vaši zákaznickou zkušenost.
Push oznámení komunikovat s uživateli (s jejich svolením), takže se vrátí.
Některé důvody
Proč by tedy váš web měl obsahovat PWA? Je to docela jednoduché.
Lepší výkon - dokonce i na ploše!
Víte, že na výhru máte omezený čas návštěvník poprvé – šest sekund načítání, než potenciální zákazník odejde a navštíví další web ve výsledcích vyhledávání. Uživatelé mobilních zařízení jsou ještě netrpělivější – polovina vašich potenciálních uživatelů odejde, pokud načítání webu trvá déle než 3 sekundy!
Dobrá zpráva: změny, které provedete pro vytvoření progresivní webové aplikace, zrychlí váš web!
Příklad: Indická hotelová společnost Treebo snížila dobu svého mobilního nabíjení ze šesti sekund na 1,5 sekundy vytvořením svého PWA. Web se načte na plochu za sekundu! Jejich technický tým uvedl, že se hodnocení na stránkách zlepšilo a měsíční konverzní poměr se více než zdvojnásobil!
Offline kapacita
K tomu nemusí být PWA na internetu. Vaši uživatelé mají přístup k veškerému obsahu aplikace ze svého zařízení nebo počítače.
Jednou z nejhezčích věcí na PWA je ve skutečnosti to, že váš zákazník může uložit web na domovskou stránku svého zařízení a později jej použít k zakoupení vašeho produktu nebo k získání dalších informací. .
Například, CNET Tech dnes nabízí denní shrnutí zpráv souvisejících s technologiemi, které jsou každodenním chlebem webu. Pokud web otevřete v prohlížeči Google Chrome na zařízení Android a přejdete dolů do dolní části obrazovky, uvidíte toto:
Stiskněte Přidat na domácí obrazovku ke stažení progresivní webové aplikace Tech Today do vašeho zařízení. Klepnutím na ikonu načtete 10 nejlepších aktuálních příběhů. Každý příběh přečtete přejetím doleva. Klepnutím na logo CNET otevřete domovskou stránku CNET ve svém prohlížeči.
Poznámka : Ve Firefoxu mají weby s PWA ikonu „Přidat na domovskou stránku“ (znaménko plus v malém rámečku) přímo v adresním řádku. Pokud je PWA již nainstalován, logo Androidu v adresním řádku vás přenese na PWA.
Jedna věc, kterou váš web nepotřebuje: Widgety „Stáhněte si naši aplikaci“ zabírají místo na vaší stránce (obvykle s logy iTunes a Android, které uživatele rozptylují). Pokud Chrome zjistí, že uživatel otevřel váš web PWA několikrát týdně, vyzve vás k přidání vašeho PWA. Aktualizace jsou také automatické.
Není třeba komplexních programovacích jazyků
Možná jste uvažovali o vytvoření nativní mobilní aplikace pro vaši firmu, ale zjistili jste, že vytvoření mobilní aplikace je jiné zvíře než vytvoření aplikace Webové stránky. Pokud na údržbě svých stránek spolupracujete s agenturou zabývající se webovým designem/vývojem, nemusí mít nutně dovednosti k vytvoření aplikace pro běžné mobilní dodavatele.
Aby se váš software mohl zobrazit v Apple App Store, musí se vývojáři zaregistrovat v síti Apple Developer Network, používat nástroj Apple Developer Tool (který funguje pouze na počítačích Mac) a znát jazyk Programování schválené společností Apple: Swift nebo Objective C.
Programování pro Android je o něco jednodušší (není nutné schválení vývojářem), ale drtivá většina aplikací pro Android je napsána v jazyce Java, což může být obtížný jazyk k učení.
Aby se aplikace mohla objevit v online obchodech Apple nebo Android, musí mít hotová aplikace souhlas od správců příslušného obchodu.
Naproti tomu progresivní webové aplikace jsou vytvořeny s populárními webovými jazyky: HTML, CSS (kaskádové styly) a JavaScript. Stručně řečeno, i noví vývojáři webu mohou vytvářet vysoce kvalitní PWA.
Konkrétně nepotřebujete velké počítačové vzdělání, abyste mohli dělat PWA pro váš web WordPress. Pokud jste již změnili formátování vašeho webu pomocí podřízeného motivu, můžete také vytvořit soubor PWA. Problematice kódování se budeme věnovat v jiném článku.
Zvyšte podporu technologických gigantů
Standardům trvá dlouho, než se stanou standardy. Google poprvé propagoval PWA v roce 2015.
Po dlouhou dobu byl Chrome jediným prohlížečem, který podporoval PWA, ale to se brzy změní. V posledních měsících:
- Mozilla přidala podporu PWA ve Firefoxu 58
- Společnost Apple nedávno oznámila podporu webových aplikací v systému iOS
- Microsoft bude podporovat PWA v příští verzi Windows 10, která bude k dispozici koncem tohoto roku (2018).
Společnost Microsoft jde nad rámec jiných prodejců operačních systémů a uvedla, že „vysoce kvalitní“ PWA budou brzy integrovány do obchodu s aplikacemi pro Windows 10 na mobilních zařízeních a počítačích.
WordPress a PWA
WordPress dosud plně nepodporuje vytváření progresivních webových aplikací v základní aplikaci. Tým Jetpack se zavázal v příštím roce přidat funkce PWA. Pomáhá tomu Javascriptová aplikace WordPress.
Jetpack „Postupně zavádí funkce PWA, jakmile budou připraveny,“ říká vývojář Dan Walmsley v článku na blogu WordPress VIP . Vývojáři mohou přidávat soubory manifestů pomocí modulu manifestu Jetpack od verze 5.6.0 a zavedli progresivní načítání obrázků, což zrychluje načítání stránek, i když je na nich spousta obrázků. strana. Další funkce přijdou letos.
Několik modulů plug-in se snaží přidat funkčnost PWA, ale nebyly příliš přijaty.
- Optimalizační nástroj WordPress poskytuje funkční a manifestní nástroj.
- Superprogresivní webové aplikace mimo jiné generují manifest a tlačítko Přidat na domovskou obrazovku.
- Sada WordPress Mobile Pack také přidává funkce PWA
Jak budete používat PWA?
V tomto tutoriálu jste se dozvěděli něco málo o progresivních webových aplikacích a proč byste je měli přidat do aplikace Webové stránky vaší společnosti:
- Rostoucí vlna provozu mobilních zařízení
- Lepší výkon pro vaše webové stránky - mobilní i stolní
- Dostupnost, i když je zařízení offline
- Používá standardní webové funkce: HTML, CSS a Javascript. Levnější stavět
- Zvýšená podpora pro prohlížeče a operační systémy
Možná teď chcete vědět, jak udělat PWA ve WordPressu? Nebo ukázat svým vývojářům, jak na to? Toto bude předmětem dalšího tutoriálu.
