Sissejuhatus progressiivse veebirakenduse juurde

Enamik arendajaid on vähemalt kuulnud mõningaid buzze Progressive Web Apps. Neid toetavad laialdaselt tehnoloogiaettevõtted, nagu Google, ning nad on kiiresti muutumas normi mitme seadme veebirakendustele.

Aga mis täpselt on erinevus tüüpilise ja a progressiivne veebirakendus?

Arendajatele, see on kogu maailma erinev. Progressiivsed veebirakendused kasutavad nüüdisaegseid veebirakendusi luua kohalikke rakenduskogemusi brauseris. See tähendab, et arendajad saavad ehitada kiiresti laaditavaid dünaamilisi rakendusi ilma hübriidraamistikke kasutamata.

Käesolevas juhendis käsitlen progressiivsete veebirakenduste alused, mõned peamised funktsioonid ja kuidas alustada omaenda ehitamist.

Mis on progressiivne veebirakendus?

Progressive Web Apps (või PWA-d) kasutage veebibrauseri API-sid luua native app kogemusi otse brauseris mis tahes seadmes.

Lõppkokkuvõttes hõlmavad progressiivsed veebirakendused a käputäis tehnoloogiaid et arendajad saavad kasutada võimsaid natiivseid rakendusi. Paljud tulevad Veebi API-d nagu Teenindustöötajate API või Push API.

Seal on üsna vähe nõudeid kutsuda midagi PWA-d, kuid need on kõige olulisemad:

On täielikult mobiilne reageeriv.
Järgib järkjärguline täiustamine.
Suuteline installige kohapeal nutitelefonid ja tabletid.
Töötab võrguühenduseta ilma internetita, teenindustöötajatega.
Eraldab sisu funktsionaalsusest rakenduse kestaga.
Ehitab HTTPS-i suurema turvalisuse tagamiseks.
Avastatav Google'i otsingus.
On dünaamilise rakendusega sarnased leheküljed kuid igaüks veel omab oma URL-i.

Kui sa oled mõelda väikese veebirakenduse loomisele võite proovida luua progressiivse veebirakenduse. Sellega kaasneb veidi õppimiskõver, kuid teil on nii palju rohkem kontrolli kasutaja kogemuse üle tulemusena.

Sukeldume progressiivsete veebirakenduste põhialuste juurde ja õpime, mis teeb need märkidest.

Teenindustöötajad

Iga progressiivne veebirakendus vajab hooldustöötajaid. Need on nagu liiklusohvitserid kes koordineerib liiklust, kus andmed pärinevad ja kuidas seda tehakse kõik on organiseeritud ja vahemällu salvestatud.

Lihtsamalt öeldes on teenistuja toimib JavaScripti failina ja töötab teie veebirakenduse taustal. Kui kasutaja täidab sündmuse, see kutsub seda teenuse töötaja skript andmete tõmbamiseks, andmete salvestamiseks või mõlemaks!

Kasutades Teenindustöötaja API on oluline võrguühenduseta toetatud PWA käivitamiseks. See, kuidas sina edastab andmeid vaadete vahel ja kuidas saate taotleda andmeid kohalikust andmebaasist. Kuid see on enamasti arenenud asjad, mida õpid PWA projekti kallal.

Pöörake pilgu peale Teenindustöötajate kokaraamat jaoks põhilised väljavõtted ja live demod. See on fantastiline viis õppida, uurides, mida teised on teinud kloonimine oma rakendustes.

Kui loodate luua progressiivse veebirakenduse alustage teenindustöötaja API-ga. Lihtsalt treenige sellega ja looge lihtne demo kohapeal. See paneb aluse hiljem kohandatud rakenduse funktsioonide ja lehtede loomine et kõik jooksevad läbi teenindustöötajate.

Sest algajate juhendid ja üksikasjalikud koodilõigud, Soovitan neid ressursse konkreetselt:

Teenindajatega alustamine
Teenindajatega alustamine
Teenindustöötaja näidis: kohandatud veebilehe proov

Rakenduse kest

Enamik kohalikke rakendusi järgige rakenduse kestu arhitektuuri kus andmed ja rakenduskood on täiesti eraldi kasutajaliidesest. Rakenduse kest võib olla kohapeal nii et iga lehekülg laadib uskumatult kiire.

See jääb samaks “kohalik rakendus” tunne, kus liides jääb alati nähtavaks kuid sisu / funktsionaalsus laaditakse erinevalt iga kord. Vaadake seda Google'i arendajate saidi lehte, et natuke rohkem teada saada rakenduskesta mudel.

Enamikul rakendustel on a väga lihtne rakenduse kest ja sa peaksid kujundama oma arhitektuuri lihtsus silmas pidades.

Tavaliselt on rakenduse kestal need peamised elemendid:

Top navigeerimisriba lingid.
Värskenda nuppu (valikuline).
Lehekülje tausta konteiner.

Siin on hea juhtumiuuring Google'i I / O progressiivse veebirakenduse kestuse arhitektuur. Nad pakuvad ka mõningaid näpunäiteid oma kesta arhitektuuri loomiseks, selle vahemällu salvestamiseks ja automaatselt iga lehekülje jaoks.

Mõtle kesta arhitektuurile kõik staatilised kasutajaliidese elemendid kasutate iga lehekülje kohta. Need peaksid olema eraldatud ülejäänud koodist lihtsustatud korduvkasutamiseks. Vaadake ka välja Google'i tutvustus subjektile palju koodi lõigud, mis aitavad teil alustada.

Online- ja offline-tugi

Enamik kohalikke rakendusi trahvi ilma Internetita. Progressive Web Apps on mõeldud järgima sama käitumist.

Teenindustöötajate kaudu saate ehitada kohalikke vahemälu iga lehekülje JSON-koodiga. Nii saavad kasutajad seda teha sirvige oma veebirakendust kohalikult. Sa võid ka lisada manifestifail ikoonide, splash-ekraani ja muude käivitusseadete määramiseks.

Kui kasutate Teenindustöötajate API-d, siis vaata Vahemälu API mis on osa sellest raamistikust. See on üldiselt parim viis salvestada andmeid kohapeal ja juurdepääs teenustöötajatele hiljem.

Sa saad ka testige veebirakendusi kasutades Majakas, tasuta tööriist funktsioonide vastavuse kontrollimiseks ja PWA tehnoloogiate toetamiseks.

PWA-d alati nõuavad võrguühenduseta toetust teenusepakkuja API kaudu, et nad saaksid seda teha töötavad madala ühenduvusega olekutes. Majakas on parim viis võrguühenduseta toetuse testimiseks koos paljude teiste funktsioonidega.

Elavad näited

Elavate PWA-de õppimine ja nende töö nägemine on suurepärane võimalus õppida. Progressive Web App turg on siiski veel tekkimas, nii paljud parimad on hajutatud erinevatesse Interneti nurkadesse.

Kuid tänu PWA kivide galerii, Ma olen kursis mõned hämmastavad näited, et näidata, mida PWA-d tõesti teevad.

1. Valuuta konverter

See on üsna lihtne valuuta konverter võtab vahetuskursid ja arvutab praeguse erinevused maailma valuuta vahel.

Märkad, et see veebirakendus on täielikult reageeriv, toetab puudutust, ja automaatsed uuendused ilma värskendamiseta.

Need on vaid mõned funktsioonid, mida te ootate tüüpiline Progressive Web App. See rakendust saab salvestada ka kohapeal telefoniühenduseta töötamiseks, kuigi see ühendab JSON-failiga, et kontrollida jooksvaid vahetuskursse.

2. Inglise aktsendid

Ma lihtsalt jumaldan seda veebirakendust, sest see on nii ainulaadne kui ka uskumatult hästi kujundatud. The Inglise aktsentide kaart curates videoid võrgus kus inimesed kannavad aktsente USA ja Suurbritannia teatud piirkondadest.

Klõpsates kaardil kõikjal, saate kuulata, kuidas inimesed teatavaid sõnu maailma eri osades hääldavad. Rakendus on välkkiire ja see on avatud GitHubist kellegi jaoks väljaregistreerimiseks.

Sisemised töötavad React / Redux koos Firebase ja API-ühendus teenusega Google Maps. Kindlasti on suurepärane näide sellest, et algajatele õpib ja õppima on üsna lihtne.

3. Pokedex.org

Teine suhteliselt lihtne PWA on see Pokedexi rakendus loodud Nolan Lawson. Ta avaldas selle koodi vabalt GitHubis, nii et see on veel üks projekt, mis on tasub snoopida ja õppida.

Kuna need andmed võivad jääda staatiliseks, on see kohaliku mootori kaudu kutsus PouchDB. Kõik andmed pärinevad PokeAPI-st ja salvestavad seejärel lihtsa JavaScripti. See tähendab, et saate salvestage see oma telefoni nagu tõeline emakeelena kasutatav rakendus ja see käivitatakse Interneti-ühenduse kaudu või ilma. Päris lahe, õige?

Kogu asi on powered by JavaScript, nii et see on märk sellest, kui palju saate frontend-koodiga teha. See kasutab palju vahemällu teenusepakkuja API-ga see on hull kiire ja super lihtne kasutada.

4. Flipkart

Lõpuks ja kõige üllatavamalt vaatame Flipkarti veebileht. See on täis e-kaubanduse pood on tegelikult progressiivne veebirakendus.

See on täielikult reageeriv ja laadib lehekülgi dünaamiliselt. Lehekülje URL-id lisatakse brauserile, nii et saate kopeerida / kleepida ja jagada neid nagu tavaline veebisait.

See on lihtne kõige keerulisem PWA, mida ma kunagi näinud olen. Ma olen üllatunud, et arendajad suutsid luua veebis kõigile sujuvat kogemust, rääkimata kohaliku võrguühenduse salvestamise toetamine, ka.

Ja kuigi ma ei leidnud kogu Flipkarti lähtekoodi repot, on olemas Flipkarti lehekülg GitHubis koos väiksemad koodilõigud arendaja meeskonnast.

Lisateave

Progressive Web Apps on uskumatult populaarne ja saab kindlasti auru kuna rohkem arendajaid vahetab kohalikud / hübriidrakendused.

Seal on iga-aastane tippkohtumine, mida nimetatakse Progressive Web App tippkohtumine ja nad avaldavad YouTube'is videoid, mida saate tasuta vaadata. See on suurepärane võimalus võtke mõned teadmised ilma pileti maksmata.

Aga kui otsite üksikasjalikumat PWA kodeerimisjuhised kindlasti tutvuge nende õpetustega:

Algaja juhend progressiivse veebirakenduse jaoks
Ehita oma esimene progressiivne veebirakendus rakendusega React
Progressiivse veebirakenduse loomine polümeeriga