Úvod do progresivních webových aplikací

Většina vývojářů alespoň slyšela nějaký šum Progresivní webové aplikace. Ty jsou široce podporovány technologickými společnostmi, jako je Google, a rychle se stávají standard pro webové aplikace s více zařízeními.

Ale co je přesně rozdíl mezi typickým a progresivní webová aplikace?

Pro vývojáře, je to celý svět rozdílů. Progresivní webové aplikace používají moderní webové rozhraní API vytvářet nativní zážitky z aplikací v prohlížeči. To znamená, že vývojáři mohou rychle vytvářet dynamické aplikace bez použití hybridních rámců.

V této příručce budu pokrývat základy progresivních webových aplikací, některé základní funkce a jak můžete začít budovat vlastní.

Co jsou progresivní webové aplikace?

Progresivní webové aplikace (nebo PWA) využít rozhraní API webového prohlížeče vytvářet nativní zážitky z aplikace přímo v prohlížeči na libovolném zařízení.

Progresivní webové aplikace nakonec zahrnují technologií vývojáři mohou používat k vytváření výkonných aplikací podobných nativním aplikacím. Mnozí pocházejí Web API Jako API servisních pracovníků nebo Push API.

Existují poměrně málo požadavků zavolat něco PWA, ale to jsou nejvýznamnější:

• Je plně mobilní reagovat.
• Dodržuje progresivní vylepšení.
• Být schopen nainstalovat lokálně na smartphony a tablety.
• Běží offline bez internetu, s využitím servisních pracovníků.
• Odděluje obsah od funkčnosti pomocí shellu aplikace.
• Postaven na HTTPS pro větší bezpečnost.
• Objevitelný ve vyhledávání Google.
• Má dynamické stránky podobné aplikacím ale stále má vlastní URL.

Pokud jsi myšlení o vytvoření malé webové aplikace místo toho můžete zkusit vytvořit aplikaci Progressive Web App. To přichází s trochou křivky učení, ale máte tolik větší kontrolu nad uživatelskými zkušenostmi jako výsledek.

Pojďme se ponořit do základů Progressive Web Apps a naučit se, co je činí.

Servisní pracovníci

Každá jednotlivá Progressive Web App potřebuje servisní pracovníky. Tyto jsou jako dopravní důstojníci kdo koordinuje, kam dochází provoz, odkud data pocházejí a jak to vše se organizuje a ukládá do mezipaměti.

Zjednodušeně řečeno, servisní pracovník funguje jako soubor JavaScript a běží na pozadí webové aplikace. Kdykoliv uživatel provede událost, to volá skript servisního pracovníka buď vytáhnout data, uložit data nebo obojí!

Za použití API servisního pracovníka je nezbytný spuštění PWA podporovaného offline. Takhle vy přenášet data mezi pohledy a jak můžete vyžádat data z lokální databáze. Ale to jsou většinou pokročilé věci, které se naučíte pracovat na projektu PWA.

Podívejte se na Servisní kuchařka pro základní úryvky a živá dema. To je fantastický způsob, jak se naučit studiem toho, co udělali ostatní a klonování ve vašich vlastních aplikacích.

Pokud jste doufali, že vybudujete Progressive Web App začít s API Service Worker. Stačí si s ním pohrát a nastavit lokální demo. Tím se nastaví základy pro pozdější vytváření vlastních aplikací a stránek to vše probíhá přes servisní pracovníky.

Pro průvodce pro začátečníky a detailní úryvky kódu, Tyto zdroje konkrétně doporučuji:

• Začínáme se servisními pracovníky
• Začínáme se servisními pracovníky
• Ukázka servisního pracovníka: Vlastní ukázka stránky offline

Shell aplikace

Většina nativních aplikací následovat architekturu aplikačního shellu kde je kód dat a aplikace zcela odděleně od uživatelského rozhraní. Aplikační shell může být lokálně uloženy do mezipaměti tak každá stránka se načte neuvěřitelně rychle.

To je stejné “nativní aplikace” pocit, kde rozhraní je stále viditelné ale obsah / funkčnost se liší pokaždé. Podívejte se na tuto stránku na webu vývojářů Google a dozvíte se něco více o této stránce model aplikace shell.

Většina aplikací má velmi jednoduchý app shell a měli byste navrhnout svou architekturu jednoduchost v mysli.

Obvykle má shell aplikace tyto hlavní prvky:

• Odkazy na horní navigační lištu.
• Tlačítko Aktualizovat (volitelné).
• Stránka pozadí kontejner.

Zde naleznete pěknou případovou studii Architektura I / O Progressive Web App společnosti Google. Nabízejí také několik tipů pro vytváření vlastní architektury prostředí, ukládání do mezipaměti a vytáhnutí automaticky pro každou stránku.

Přemýšlejte o architektuře shellu všechny statické prvky uživatelského rozhraní budete používat na každé stránce. To by mělo být oddělené od zbytku kódu a cache pro snadné opakované použití. Také se podívejte Intro Google k předmětu s dostatkem kódu úryvky, které vám pomohou začít.

Online a offline podpora

Většina nativních aplikací běžet bez internetu. Progressive Web Apps jsou určeny k tomuto chování.

Prostřednictvím servisních pracovníků můžete vybudovat lokální cache s kódem JSON pro každou stránku. Uživatelé tak mohou procházet webovou aplikaci lokálně. Můžete také obsahovat soubor manifestu definovat ikony, úvodní obrazovku a další nastavení spuštění.

Pokud používáte API servisního pracovníka, podívejte se na Cache API který je součástí téhož rámce. Je to obecně nejlepší cesta ukládat data lokálně a přístup od servisních pracovníků později.

Můžete také otestujte jakoukoliv webovou aplikaci použitím Maják, bezplatný nástroj pro kontrolu dodržování pravidel a podporu technologií PWA.

PWAs vždy vyžadují offline podporu prostřednictvím API servisního pracovníka, takže mohou práce ve státech s nízkou konektivitou. Lighthouse je nejlepší způsob, jak otestovat offline podporu spolu s řadou dalších funkcí.

Živé příklady

Studovat živé PWAs a vidět, jak fungují, je skvělý způsob, jak se učit. Nicméně, Progressive Web App trh je stále se objevují, tolik těch nejlepších rozptýlené do různých koutů Internetu.

Ale díky Galerie PWA skály, Jsem kurátorka několik úžasných příkladů, abych předvedla, co PWAs opravdu dokáže.

1. Převodník měn

To je poměrně jednoduché převodník měn bere směnné kurzy a vypočítává proud rozdíly mezi tunou měn na celém světě.

Všimněte si, že tato webová aplikace je plně reagující, podporuje dotek, a automatické aktualizace bez jakékoli aktualizace stránky.

To jsou jen některé z funkcí, které očekáváte v každém typická progresivní webová aplikace. Tento aplikaci lze také uložit lokálně do telefonu, aby fungoval offline, i když se připojuje k souboru JSON ke kontrole aktuálních směnných kurzů.

2. Anglické akcenty

Prostě zbožňuji tuto webovou aplikaci, protože je jedinečná a neuvěřitelně dobře navržená. English Mapy akcentů natáčí videa online kde lidé nesou akcenty ze specifických oblastí USA a Velké Británie.

Kliknutím kdekoliv na mapě si můžete poslechnout, jak lidé vyslovují určitá slova v různých částech světa. Aplikace je blesk a je to na GitHubu pro každého, kdo se má podívat.

Interiéry běží dál React / Redux s Požární základna a Připojení API k Mapám Google. Rozhodně skvělý příklad něčeho poměrně jednoduchého pro začátečníky ke studiu a učení.

3. Pokedex.org

Další poměrně jednoduché PWA je to Aplikace Pokedex vytvořil Nolan Lawson. Tento kód také volně publikoval na GitHub, tak to je ještě další projekt, který je stojí za to snooping kolem a studovat.

Protože tato data mohou zůstat statická, je to ovládány místním motorem volal PouchDB. Všechna data pocházejí z PokeAPI a pak se ukládají jako prostý JavaScript. To znamená, že můžete uložte ji místně do telefonu jako skutečná nativní aplikace a bude fungovat s přístupem k Internetu nebo bez něj. Docela v pohodě?

Celá věc je powered by JavaScript, takže je to důkaz toho, jak moc můžete s kódem frontendu pracovat. Používá hodně ukládání do mezipaměti s API servisního pracovníka je to bláznivé rychlé a super snadné použití.

4. Flipkart

Konečně a nejvíce překvapivě, uvidíme Webové stránky Flipkart. Tento plný e-commerce shop je ve skutečnosti Progressive Web App.

To je plně reagující a načítá stránky dynamicky. Adresy URL stránek jsou připojeny k prohlížeči, takže je můžete kopírovat / vkládat a sdílet jako typické webové stránky.

To je snadné nejsložitější PWA, jaký jsem kdy viděl. Jsem ohromen, že vývojáři byli schopni vytvořit tak bezproblémovou zkušenost na webu pro všechny uživatele, natož podpora lokálního offline úložiště, také.

A i když jsem nemohl najít repo pro celý zdrojový kód Flipkartu, existuje Stránka Flipkart na GitHubu s menší kousky kódu od jejich vývojářského týmu.

Další informace

Progressive Web Apps jsou neuvěřitelně populární a jistě získá páru více vývojářů přechází z nativních / hybridních aplikací.

Je tu každoroční summit nazvaný Progressive Web App Summit a publikují videa na YouTube, která můžete sledovat zdarma. To je skvělý způsob, jak vyzvednout některé znalosti bez zaplacení letenky.

Ale pokud hledáte podrobnější Průvodce kódováním PWA určitě si přečtěte tyto tutoriály:

• Průvodce pro začátečníky k progresivním webovým aplikacím
• Sestavte si svou první progresivní webovou aplikaci s Reactem
• Vytváření progresivní webové aplikace s polymerem