Įvadas į pažangias žiniatinklio programas

Dauguma kūrėjų bent jau girdėjo apie tai Progresyvios žiniatinklio programos. Jie yra plačiai remiami tokiose technologijų įmonėse kaip „Google“ ir greitai tampa standartas daugialypėms žiniatinklio programoms.

Bet kas tiksliai skirtumas tarp tipinio ir a palaipsniui žiniatinklio programa?

Kūrėjams, tai yra viso pasaulio skirtumas. „Progressive Web Apps“ naudoja modernią žiniatinklio API sukurkite vietines programų patirtį naršyklėje. Tai reiškia, kad kūrėjai gali kurti greitai įkraunamas dinamines programas, nenaudodami hibridinių sistemų.

Šiame vadove aptarsiu „Progressive Web Apps“ pagrindai, kai kurios pagrindinės funkcijos ir kaip galite pradėti kurti savo.

Kas yra „Progressive Web Apps“?

Progresyvios žiniatinklio programos (arba PWA) pasinaudoti interneto naršyklės API sukurti bet kokio įrenginio naršyklėje gimtąsias programos patirties.

Galiausiai „Progressive Web Apps“ apima a sauja technologijų kad kūrėjai gali naudoti galingas vietines programas. Daugelis iš jų Žiniatinklio API toks kaip Paslaugų darbuotojų API arba Push API.

Yra nemažai reikalavimų kažką vadinti PWA, bet tai yra svarbiausių:

Visiškai mobilus reaguoja.
Laikosi palaipsniui.
Galėti įdiegti vietoje išmaniųjų telefonų ir planšetinių kompiuterių.
Veikia neprisijungus be interneto, naudojant paslaugų darbuotojus.
Atskiria turinį nuo funkcionalumo naudojant programos apvalkalą.
Sukuria HTTPS užtikrinti didesnį saugumą.
Atrodo „Google“ paieškoje.
Turi dinamiški „app“ puslapiai bet kiekvienas dar turi savo URL.

Jei esate galvoti apie mažos žiniatinklio programos kūrimą galite pabandyti sukurti „Progressive Web App“. Tai ateina su šiek tiek mokymosi kreivė, bet jūs turite tiek daug labiau kontroliuoti vartotojo patirtį kaip rezultatas.

Leiskite pasinerti į „Progressive Web Apps“ pagrindus ir sužinoti, kas juos daro.

Paslaugų darbuotojai

Kiekviena Progressive Web App reikia paslaugų darbuotojų. Sitie yra kaip eismo pareigūnai kuris koordinuoja eismo eigą, iš kurio gaunami duomenys ir kaip tai vyksta visi bus organizuojami ir talpinami.

Paprastai tarnaujantis darbuotojas veikia kaip „JavaScript“ failas ir veikia jūsų žiniatinklio programos fone. Kai vartotojas atlieka įvykį, ji vadina paslaugų darbuotojo scenarijus traukti duomenis, išsaugoti duomenis arba abu!

Naudojant Paslaugų darbuotojo API yra esminis paleisti nepalaikomą PWA. Taip jūs perduoti duomenis tarp vaizdų ir kaip galite prašyti duomenų iš vietinės duomenų bazės. Tačiau tai yra pažangios medžiagos, kurias išmoksite dirbdami su PWA projektu.

Pažvelkite į Paslaugų darbuotojų virimo knyga dėl pagrindiniai fragmentai ir gyvi demo. Tai yra fantastinis būdas išmokti studijas, ką darė kiti klonuoti tai savo programose.

Jei tikitės sukurti „Progressive Web App“ pradėti nuo Paslaugų darbuotojo API. Tiesiog sujunkite su juo ir nustatykite paprastą demonstraciją vietoje. Tai padės nustatyti vėliau kurti pasirinktines taikomųjų programų funkcijas ir puslapius kad visi vyktų per paslaugų darbuotojus.

Dėl pradedantiesiems vadovus ir išsamūs kodo fragmentai, Aš konkrečiai rekomenduoju šiuos išteklius:

Darbo su darbuotojais pradžia
Darbo su darbuotojais pradžia
Paslaugų darbuotojo pavyzdys: pasirinktinis neprisijungęs puslapis

Programos apvalkalas

Dauguma vietinių programų sekite programos apvalkalo architektūrą kur duomenys ir programos kodas yra visiškai atskirti nuo UI. Programos apvalkalas gali būti talpykloje todėl kiekvienas puslapis įkeliamas neįtikėtinai greitai.

Tai išlaiko tą patį “vietinė programa” jausmas, kur sąsaja visada matoma bet turinys / funkcionalumas įkeliami skirtingai kiekvieną kartą. Jei norite sužinoti daugiau apie „Google“ kūrėjų svetainę, apsilankykite šiame puslapyje programos apvalkalo modelis.

Dauguma programų turi labai paprastas programos apvalkalas ir turėtumėte sukurti savo architektūrą paprastumas.

Paprastai tai yra programų apvalkalas pagrindiniai elementai:

Geriausios navigacijos juostos nuorodos.
Atnaujinti mygtuką (pasirinktinai).
Puslapio fono talpykla.

Čia rasite gražią atvejo analizę „Google“ I / O „Progressive Web App“ apvalkalo architektūra. Jie taip pat siūlo keletą patarimų, kaip sukurti savo apvalkalo architektūrą, ją išsaugoti, ir automatiškai traukiant kiekvieną puslapį.

Pagalvokite apie korpuso architektūrą kaip visi statiniai UI elementai naudosite kiekviename puslapyje. Tai turėtų būti atskirti nuo likusio kodo ir talpykloje, kad būtų lengva pakartotinai naudoti. Taip pat patikrinkite „Google“ intro į temą su daug kodo fragmentai, kurie padės jums pradėti.

Internetinė ir neprisijungus palaikymas

Dauguma vietinių programų veikia be interneto. Progresyvios žiniatinklio programos yra skirtos laikytis tokio paties elgesio.

Per paslaugų darbuotojus galite kurti vietines talpyklas su JSON kodu kiekvienam puslapiui. Tokiu būdu vartotojai gali naršykite žiniatinklio programą vietoje. Jūs taip pat galite įtraukti manifestą nustatyti savo piktogramas, ekrano ekraną ir kitus paleidimo parametrus.

Jei naudojate „Service Worker“ API, žiūrėkite „Cache API“ kuris yra tos pačios sistemos dalis. Tai paprastai yra geriausias būdas saugoti duomenis vietoje ir naudotis iš paslaugų darbuotojų vėliau.

Tu taip pat gali išbandyti bet kurią žiniatinklio programą naudojant Švyturys, nemokama priemonė, skirta tikrinti funkcijų atitiktį ir paramą PWA technologijoms.

PWA visada reikalauti neprisijungus palaikymo per „Service Worker API“, kad jie galėtų dirbti mažo ryšio būsenose. Švyturys yra geriausias būdas išbandyti neprisijungus palaikymą kartu su daugybe kitų funkcijų.

Gyvi pavyzdžiai

Studijuojant gyvus PWA ir matydami, kaip jie dirba, yra puikus būdas išmokti. Tačiau „Progressive Web App“ rinka yra vis dar atsiranda, tiek daug geriausių yra išsibarsčiusios įvairiuose interneto kampuose.

Tačiau, dėka PWA uolų galerija, Aš kuravo keletą nuostabių pavyzdžių, kad parodyti, ką PWAs tikrai gali padaryti.

1. Valiutos keitiklis

Tai gana paprasta valiutos keitiklis atsižvelgia į valiutų kursus ir apskaičiuoja dabartinę skirtumų tarp tonų visame pasaulyje.

Pastebėsite, kad ši žiniatinklio programa yra visiškai reaguoja, palaiko ryšį, ir automatiniai atnaujinimai be jokio puslapio atnaujinimo.

Tai tik keletas iš funkcijų, kurių tikitės bet kokiame tipinė Progressive Web App. Tai programa taip pat gali būti išsaugota vietoje į telefoną, kad galėtumėte dirbti neprisijungus, nors jis prisijungia prie JSON failo, kad patikrintų dabartinius valiutų kursus.

2. Anglų akcentai

Aš tiesiog mėgstu šią žiniatinklio programą, nes tai unikalus ir neįtikėtinai gerai suprojektuotas. The Anglų akcentų žemėlapis kuruoja vaizdo įrašus internete ten, kur žmonės turi akcentus iš tam tikrų JAV ir JK regionų.

Spustelėję bet kur žemėlapyje, galite klausytis, kaip žmonės išreiškia tam tikrus žodžius skirtingose pasaulio dalyse. App yra žaibas greitai ir tai atidarytas „GitHub“ kiekvienas gali patikrinti.

Vidaus veikia React / Redux su Firebase ir a API ryšys su „Google“ žemėlapiais. Tikrai puikus pavyzdys, kaip pradedantiesiems mokytis ir mokytis gana paprasta.

3. Pokedex.org

Kitas gana paprastas PWA yra tai Pokedex programa sukūrė Nolan Lawson. Jis taip pat paskelbė šį kodą laisvai apie GitHub, tai mums dar vienas projektas verta verti ir mokytis.

Kadangi šie duomenys gali likti statiniai, tai yra per vietinį variklį vadinamas PouchDB. Visi duomenys gaunami iš „PokeAPI“ ir išsaugomi kaip paprastas „JavaScript“. Tai reiškia, kad galite išsaugokite jį vietoje kaip tikra gimtoji programa ir ji bus paleista su arba be interneto. Gana kietas, tiesa?

Visa tai yra veikia „JavaScript“, taigi tai liudija, kiek jūs galite padaryti su „frontend“ kodu. Jis naudoja daug talpyklos su Paslaugų darbuotojo API, taip tai crazy greitai ir super lengva naudoti.

4. Flipkart

Galiausiai ir stebėtinai pažiūrėkime „Flipkart“ svetainė. Tai visiškai elektroninės komercijos parduotuvė iš tiesų yra „Progressive Web App“.

Tai visiškai reaguoja ir įkelia puslapius dinamiškai. Puslapio URL pridedami prie naršyklės, todėl galite kopijuoti / įklijuoti ir bendrinti juos kaip įprastą svetainę.

Tai lengva sudėtingiausia PWA, kurią aš kada nors mačiau. Esu nustebęs, kad kūrėjai sugebėjo sukurti tokį sklandų patirtį internete visiems vartotojams, jau nekalbant palaikyti vietinį neprisijungusį saugojimą, taip pat.

Ir nors aš negalėjau rasti viso Flipkart šaltinio kodo repo, yra a „Flipkart“ puslapis „GitHub“ su mažesni kodo fragmentai iš jų kūrėjų komandos.

Sužinokite daugiau

Progresyvios žiniatinklio programos yra neįtikėtinai populiarus ir tikrai gaus daugiau kūrėjų persijungia iš vietinių / hibridinių programų.

Yra metinis aukščiausiojo lygio susitikimas, vadinamas „Progressive Web App Summit“ ir jie skelbia vaizdo įrašus „YouTube“, kuriuos galite žiūrėti nemokamai. Tai puikus būdas pasiimti kai kurias žinias nemokant bilieto.

Bet jei ieškote išsamesnės informacijos PWA kodavimo vadovai būtinai patikrinkite šiuos mokymus:

Pradedančiųjų vadovas palaipsniui veikiančioms žiniatinklio programoms
Sukurkite pirmąją pažangią žiniatinklio programą su „React“
Progresyvios žiniatinklio programos kūrimas su „Polymer“