Uvod v napredne spletne aplikacije

Večina razvijalcev je vsaj slišala kakšne zvoke Progressive Web Apps. Te so široko podprte s strani tehnoloških podjetij, kot je Google, in hitro postajajo standard za spletne aplikacije za več naprav.

Ampak, kaj je točno razlika med tipično in a progresivno spletna aplikacija?

Za razvijalce, to je cel svet razlik. Napredne spletne aplikacije uporabljajo sodobne spletne API-je ustvarite izvirne aplikacije v brskalniku. To pomeni, da lahko razvijalci izdelajo hitre dinamične aplikacije brez uporabe hibridnih ogrodij.

V tem vodniku bom pokrival osnove progresivnih spletnih aplikacij, nekatere osnovne funkcije in kako lahko začnete graditi svoje.

Kaj so napredne spletne aplikacije?

Progressive Web Apps (ali PWA) izkoristite prednosti API-jev spletnega brskalnika ustvariti izvirne izkušnje aplikacije v brskalniku na kateri koli napravi.

Konec koncev Progressive Web Apps zajema a tehnologij da lahko razvijalci uporabljajo za ustvarjanje močnih native-like aplikacij. Mnogi prihajajo Spletni API-ji kot je API za delavce storitev ali Potisni API.

Obstajajo kar nekaj zahtev klicati nekaj PWA, vendar so to najpomembnejše:

• Je v celoti mobilni odziv.
• Se drži postopno izboljšanje.
• Zmožen namestite lokalno na pametnih telefonih in tablicah.
• Zažene brez povezave brez interneta, z uporabo servisnih delavcev.
• Vsebino loči od funkcionalnosti z uporabo lupine aplikacije.
• Na HTTPS za večjo varnost.
• Vidno v iskanju Google.
• Je dinamične strani, podobne aplikacijam ampak vsak še vedno ima svoj URL.

Če ste razmišljanje o gradnji majhne spletne aplikacije namesto tega poskusite ustvariti Progressive Web App. To prihaja z malo krivulje učenja, vendar imate toliko večji nadzor nad uporabniško izkušnjo kot rezultat.

Potopimo se v osnove Progressive Web Apps in se naučimo, kaj jih naredi.

Servisni delavci

Vsak Progressive Web App potrebuje delavce. To so kot prometni uradniki ki usklajujejo, kam gre promet, od kod prihajajo podatki in kako vse se organizira in shrani.

Preprosto povedano, serviser deluje kot datoteka JavaScript in se izvaja v ozadju vaše spletne aplikacije. Kadarkoli uporabnik izvede dogodek, kliče delavec storitve za dvig podatkov, shranjevanje podatkov ali oboje!

Uporabljati API za delavce storitev je bistvenega pomena za delovanje brez povezave PWA. Tako ste vi prenos podatkov med pogledi in kako lahko zahtevajo podatke iz lokalne baze podatkov. Toda to so večinoma napredne stvari, ki se jih naučite s projektom PWA.

Pokukajte na Kuhar za delavce servisnih služb za osnovnih odrezkov in predstavitve v živo. To je fantastičen način za učenje s preučevanjem, kaj so drugi naredili in kloniranje v lastnih aplikacijah.

Če ste v upanju, da boste zgradili Progressive Web App začnite z API-jem Service Worker. Samo tinker z njim in nastavite preprost demo lokalno. To bo postavilo temelje za pozneje izdelava funkcij in strani po meri da vse tečejo prek delavcev v storitvah.

Za vodniki za začetnike in podrobni odrezki kode, Izrecno priporočam te vire:

• Začetek dela s servisnimi delavci
• Prvi koraki s servisnimi delavci
• Vzorec storitvenega delavca: vzorec po meri za stran brez povezave

Lupina aplikacije

Večina domačih aplikacij sledite arhitekturi lupine aplikacij kjer so podatki in koda aplikacije popolnoma ločen od uporabniškega vmesnika. Lupina aplikacije je lahko lokalno shranjene zato se vsaka stran obremeni neverjetno hitro.

To se drži enako “izvirna aplikacija” občutek, kje vmesnik vedno ostane viden toda vsebina / funkcionalnost različno obremenjuje vsakič. Oglejte si to stran na spletnem mestu Google Razvijalci, če želite izvedeti več o tem model lupine aplikacij.

Večina aplikacij ima a zelo preprosta lupina aplikacij in bi morali oblikovati svojo arhitekturo preprosto v mislih.

Običajno ima lupina aplikacije te glavni elementi:

• Povezave na vrhu navigacijske vrstice.
• Gumb Osveži (izbirno).
• Posoda za ozadje strani.

Tukaj lahko najdete lepo študijo primera Googlova arhitektura lestvice I / O progresivne spletne aplikacije. Ponujajo tudi nekaj nasvetov za izgradnjo lastne arhitekture lupine, predpomnjenje in samodejno za vsako stran.

Pomislite na arhitekturo lupine kot vse statične elemente uporabniškega vmesnika uporabili boste na vsaki posamezni strani. To bi moralo biti ločeno od preostale kode in predpomnjeno za enostavno ponovno uporabo. Prav tako preverite Googlov uvod z veliko kodo odrezke, ki vam bodo pomagali začeti.

Online in offline podpora

Večina domačih aplikacij teči brez interneta. Progressive Web Apps je namenjeno temu, da sledijo temu vedenju.

S pomočjo servisnih delavcev lahko graditi lokalne predale s kodo JSON za vsako stran. Tako lahko uporabniki lokalno brskanje po vaši spletni aplikaciji. Lahko tudi vključuje datoteko manifesta za definiranje ikon, začetnega zaslona in drugih nastavitev zagona.

Če uporabljate API Service Worker, si oglejte API za predpomnilnik kateri je del istega okvira. Na splošno je to najboljši način lokalno shranjevanje podatkov in dostop do storitev od delavcev, ki opravljajo storitve kasneje.

Lahko tudi preizkusite katero koli spletno aplikacijo uporabo Svetilnik, brezplačno orodje za preverjanje skladnosti funkcij in podporo tehnologijam PWA.

PWA vedno potrebujejo podporo brez povezave z API-jem Service Worker, tako da lahko delo v državah z nizko povezljivostjo. Svetilnik je najboljši način za testiranje podpore brez povezave skupaj z vrsto drugih funkcij.

Primeri v živo

Študij živih bolnikov in videnje njihovega dela je odličen način za učenje. Vendar pa je trg Progressive Web App še vedno pojavljajo, toliko najboljših je razpršeni po različnih koncih interneta.

Toda, zahvaljujoč Galerija PWA kamenja, Kurirala sem nekaj neverjetnih primerov, da pokažem, kaj lahko PWA resnično storijo.

1. Pretvornik valut

To je precej preprosto pretvornik valut sprejema menjalne tečaje in izračunava tok razlike med tono valut po vsem svetu.

Opazili boste, da je ta spletna aplikacija popolnoma odziven, podpira dotik, in samodejne posodobitve brez osveževanja strani.

To so le nekatere od funkcij, ki jih pričakujete tipična progresivna spletna aplikacija. To aplikacijo lahko shranite tudi lokalno v telefon, da deluje brez povezave, čeprav se povezuje z datoteko JSON za preverjanje trenutnih menjalnih tečajev.

2. Angleški poudarki

Preprosto obožujem to spletno aplikacijo, ker je edinstvena in neverjetno dobro oblikovana. The Zemljevid angleških naglasov kurira videoposnetke na spletu kjer ljudje nosijo poudarke iz določenih regij v ZDA in Veliki Britaniji.

S klikom kjerkoli na zemljevidu lahko poslušate, kako ljudje izgovarjajo določene besede v različnih delih sveta. Aplikacija je hitro strela in je odprtega izvora na GitHubu za vsakogar.

Notranjost teče naprej React / Redux z Firebase in Povezava s programom API za Google Zemljevide. Zagotovo je odličen primer nekaj preprostega za začetnike, da se učijo in se učijo.

3. Pokedex.org

Druga dokaj preprosta PWA je ta Aplikacija Pokedex ustvaril Nolan Lawson. Prav tako je svobodno objavil to kodo na GitHub, zato smo še en projekt, ki je vredno snooping okoli in študij.

Ker lahko ti podatki ostanejo statični, je z lokalnim motorjem imenuje PouchDB. Vsi podatki prihajajo iz PokeAPI in nato shrani kot navaden JavaScript. To pomeni, da lahko shranite lokalno v telefon kot prava domača aplikacija in se bo izvajala z dostopom do interneta ali brez njega. Precej kul, prav?

Vse je poganja JavaScript, tako da je dokaz, da lahko storite s kodo vmesnika. Uporablja veliko predpomnjenja s programom Service Worker API je nora hitra in super enostavna za uporabo.

4. Flipkart

Nazadnje in najbolj presenetljivo, poglejmo Spletna stran Flipkart. To je polno e-trgovina je pravzaprav Progressive Web App.

To je popolnoma odziven in dinamično naloži strani. URL-ji strani so dodani brskalniku, tako da jih lahko kopirate / prilepite in jih delite kot običajno spletno mesto.

To je enostavno najbolj zapleteno PWA, kar sem jih kdaj videl. Presenečen sem, da so razvijalci lahko ustvarili tako brezhibno izkušnjo na spletu za vse uporabnike, kaj šele podpira lokalno shranjevanje brez povezave, tudi.

In čeprav nisem mogel najti repo za celotno izvorno kodo Flipkart, obstaja a Flipkart stran na GitHubu z manjše kode iz skupine razvijalcev.

Učenje več

Napredne spletne aplikacije so neverjetno priljubljena in bo zagotovo pridobila paro več razvijalcev preklopi na domorodne / hibridne aplikacije.

Obstaja letni vrh, imenovan Progressive Web App Summit in objavljajo videoposnetke na YouTubu, ki jih lahko gledate brezplačno. To je odličen način pobrati nekaj pro znanja brez plačila vozovnice.

Ampak, če iščete podrobnejše Vodniki za kodiranje PWA vsekakor si oglejte te vadnice:

• Navodila za začetnike za napredne spletne aplikacije
• Z React ustvarite svojo prvo progresivno spletno aplikacijo
• Izdelava progresivne spletne aplikacije s polimerom