Uvod u progresivne web-aplikacije

Većina programera barem je čula neke glasine Progresivni web-aplikacije. To su široko podržane od strane tehnoloških tvrtki kao što je Google i brzo postaju norma za web-aplikacije s više uređaja.

Ali, što je točno razlika između tipičnog i a progresivan web-aplikacija?

Za programere, to je cijeli svijet razlika. Napredne web-aplikacije koriste moderne web-API-je za stvoriti vlastita iskustva s aplikacijama u pregledniku. To znači da programeri mogu graditi dinamičke aplikacije koje se brzo učitavaju bez korištenja hibridnih okvira.

U ovom ću vodiču pokriti osnove Progressive Web Apps, neke primarne značajke i kako možete početi graditi vlastite.

Što su napredne web-aplikacije?

Progressive Web Apps (ili PWA) iskoristite API-je web-preglednika stvoriti vlastita iskustva s aplikacijama izravno u pregledniku na bilo kojem uređaju.

Naposljetku, progresivne web-aplikacije obuhvaćaju a nekoliko tehnologija koje programeri mogu koristiti za stvaranje snažnih aplikacija nalik izvornom. Mnogi dolaze Web API-ji kao API za radnike usluga ili Push API.

Tamo su nekoliko zahtjeva nazvati nešto PWA, ali ovo su najvažnije:

U potpunosti je mobilni odgovara.
Pridržava se progresivno poboljšanje.
Može instalirajte lokalno na pametnim telefonima i tabletima.
Pokreće se izvan mreže bez interneta, korištenjem servisnih radnika.
Odvaja sadržaj od funkcionalnosti pomoću ljuske aplikacije.
Napravljen na HTTPS-u za veću sigurnost.
Vidljiv u Google pretraživanju.
ima dinamičke stranice slične aplikacijama ali svaki još uvijek ima vlastiti URL.

Ako si razmišljanje o izgradnji male web aplikacije umjesto toga možete pokušati stvoriti Progressive Web App. Ovo dolazi s malo krivulje učenja, ali imate toliko veću kontrolu nad korisničkim iskustvom kao rezultat.

Uronimo u osnove Progressive Web Apps i naučimo što ih tjera.

Radnici u službi

Svaki pojedini Progressive Web App trebaju radnike u službi. Ovi su poput prometnih službenika koji koordiniraju kretanje prometa, odakle dolaze podaci i na koji način sve se organizira i sprema.

Jednostavno rečeno, serviser djeluje kao JavaScript datoteka i pokreće se u pozadini web-aplikacije. Kad god korisnik obavlja događaj, naziva skriptu za radnike usluga za povlačenje podataka, spremanje podataka ili oboje!

Koristiti API za radnike usluge je osnovni za pokretanje izvanmrežnog PWA-a. Evo kako vi prijenos podataka između prikaza i kako možete zatražiti podatke iz lokalne baze podataka. Ali, to su uglavnom napredne stvari koje učite radeći na projektu PWA.

Zavirite u Kuharica za radnike usluga za osnovni isječci i demonstracije uživo. Ovo je fantastičan način učenja kroz proučavanje onoga što su drugi učinili i kloniranje u vlastitim aplikacijama.

Ako se nadate izgraditi Progressive Web App započnite s API-jem Service Worker. Samo s njime pokrenite i postavite jednostavan demo na lokalnoj razini. To će postaviti temelje za kasnije izgradnja korisničkih značajki i stranica da svi prolaze kroz uslužne radnike.

Za početni vodiči i detaljni isječci koda, Posebno preporučujem ove resurse:

Početak rada sa serviserima
Početak rada sa serviserima
Uzorak radnika u usluzi: Uzorak prilagođene stranice bez veze

Okvir aplikacije

Većina izvornih aplikacija slijedite arhitekturu ljuske aplikacije gdje su podaci i kôd aplikacije potpuno odvojeno od korisničkog sučelja. Ljuska aplikacije može biti lokalno spremljeno tako da se svaka stranica nevjerojatno brzo učitava.

Ovo je isto “izvorna aplikacija” osjećaj gdje sučelje uvijek ostaje vidljivo ali sadržaj / funkcionalnost se različito učitava svaki put. Pogledajte ovu stranicu na web-lokaciji Google Developers da biste saznali više o tome model ljuske aplikacije.

Većina aplikacija ima vrlo jednostavna app ljuska i dizajnirajte svoju arhitekturu na umu jednostavnosti.

Obično je ovo ljuska aplikacije glavni elementi:

Veze gornje trake za navigaciju.
Gumb Osvježi (izborno).
Kontejner pozadine stranice.

Ovdje možete pronaći lijepu studiju slučaja Googleova I / O napredna arhitektura ljuske Web App. Oni također nude neke savjete za izgradnju svoje vlastite arhitekture ljuske, caching it, i automatski ga povlači za svaku stranicu.

Zamislite arhitekturu ljuske kao svi statički UI elementi koristiti ćete na svakoj stranici. To bi trebalo biti odvojeno od ostatka koda i spremljene za jednostavnu ponovnu upotrebu. Također provjerite Googleov uvod subjektu s mnogo koda isječke koji će vam pomoći da započnete.

Online i izvanmrežna podrška

Većina izvornih aplikacija trčanje bez Interneta. Progressive Web Apps namijenjene su za praćenje istog ponašanja.

Kroz uslužne radnike možete graditi lokalne spremnike s JSON kodom za svaku stranicu. Tako korisnici mogu pregledajte web-aplikaciju lokalno. Možda i ti uključiti datoteku manifesta da biste definirali svoje ikone, početni zaslon i ostale postavke pokretanja.

Ako koristite API Service Worker, zavirite u API za predmemoriju koji je dio istog okvira. To je obično najbolji način pohraniti podatke lokalno i pristupiti mu od servisnih radnika kasnije.

Također možete testirajte bilo koju web-aplikaciju koristeći Svjetionik, besplatan alat za provjeru sukladnosti značajki i podršku za PWA tehnologije.

PWA uvijek zahtijevaju izvanmrežnu podršku putem API-ja Service Worker, tako da mogu rad u državama s niskom povezanošću. Svjetionik je najbolji način za testiranje za izvanmrežnu podršku uz niz drugih značajki.

Primjeri uživo

Proučavanje živih aktivnih osoba i gledanje kako oni rade je sjajan način za učenje. Međutim, tržište Progressive Web App jest još uvijek u nastajanju, mnogi od najboljih su raštrkane po različitim kutovima Interneta.

Ali, zahvaljujući PWA galerija kamenja, Ja sam uredio nekoliko nevjerojatnih primjera kako bih pokazao što PWA stvarno mogu.

1. Pretvornik valuta

Ovo je prilično jednostavno pretvarač valuta uzima tečajeve i izračunava trenutni tečaj razlike između tona valuta u svijetu.

Primijetit ćete ovu web-aplikaciju potpuno odgovarajući, podržava dodir, i automatska ažuriranja bez osvježavanja stranice.

Ovo su samo neke od značajki koje očekujete tipični Progressive Web App. Ovaj Aplikacija se također može spremiti lokalno na telefon da radi izvanmrežno, iako se povezuje s JSON datotekom kako bi provjerio trenutne tečajeve.

2. Engleski naglasci

Jednostavno obožavam ovu web-aplikaciju jer je i jedinstvena i nevjerojatno dobro osmišljena. Karta s naglaskom na engleskom kurira videozapise na mreži gdje ljudi nose naglaske iz određenih regija SAD-a i Velike Britanije.

Klikom bilo gdje na karti možete slušati kako ljudi izgovaraju određene riječi u različitim dijelovima svijeta. Aplikacija je munjevita i to je otvorenog izvora na GitHubu da svatko može provjeriti.

Unutarnji dijelovi rade Reagirati / Redux s Firebase i jedan API veza s Google kartama. Definitivno odličan primjer nečega što je prilično jednostavno za početnike da uče i uče.

3. Pokedex.org

Još jedna prilično jednostavna PWA je ova Pokedex aplikacija stvorio Nolan Lawson. Također je slobodno objavio ovaj kod na GitHubu, tako da je to još jedan projekt koji je vrijedi njuškati okolo i učiti.

Budući da ti podaci mogu ostati statični, to je upravljani putem lokalnog motora zvao PouchDB. Svi podaci dolaze iz PokeAPI, a zatim se spremaju kao običan JavaScript. To znači da možeš spremite je lokalno na telefon kao prava izvorna aplikacija i pokrenut će se s pristupom internetu ili bez njega. Prilično cool, točno?

Cijela stvar je pokreće JavaScript, tako da je dokaz koliko možete učiniti s kodom sučelja. Ona koristi mnogo cachinga s API-jem Service Worker, dakle to je ludo brzo i super jednostavno za korištenje.

4. Flipkart

I na kraju i najviše iznenađujuće, pogledajmo Flipkart web stranica. Ovo je puno e-trgovina je zapravo Progressive Web App.

to je potpuno odgovarajući i dinamički učitava stranice. URL-ovi stranica dodaju se pregledniku, tako da ih možete kopirati / zalijepiti i dijeliti poput tipične web-lokacije.

To je lako najsloženiji PWA koji sam ikada vidio. Ja sam zadivljen programeri su mogli stvoriti tako besprijekorno iskustvo na webu za sve korisnike, a kamoli podržava lokalnu izvanmrežnu pohranu, isto.

I dok nisam mogao pronaći repo za cijeli Flipkart izvorni kod, postoji a Flipkart stranica na GitHubu s manje isječke koda od tima razvojnih programera.

Učenje više

Napredne web-aplikacije su nevjerojatno popularan i sigurno će dobiti paru kako se više programera prebacuje s izvornih / hibridnih aplikacija.

Postoji godišnji sastanak na vrhu nazvan Progressive Web App Summit i objavljuju videozapise na usluzi YouTube koje možete gledati besplatno. Ovo je sjajan način pokupite nešto pro znanja bez plaćanja karte.

Ali, ako tražite detaljnije PWA vodiči za kodiranje svakako pogledajte ove vodiče:

Vodič za početnike za napredne web-aplikacije
Izradite svoju prvu progresivnu web-aplikaciju s React
Izrada Progressive Web App s Polymer