Johdatus progressiivisiin Web-sovelluksiin

Useimmat kehittäjät ovat ainakin kuullut jonkin verran surkeasti Progressiiviset Web-sovellukset. Niitä tukevat laajalti teknologiayritykset, kuten Google, ja niistä tulee nopeasti normi monilaitteisiin web-sovelluksiin.

Mutta mikä on täsmälleen eroa tyypillisen ja a etenevä web-sovellus?

Kehittäjille, se on koko maailman ero. Progressiiviset Web-sovellukset käyttävät nykyaikaisia verkkosovelluksia luo alkuperäisiä sovelluskokemuksia selaimessa. Tämä tarkoittaa, että kehittäjät voivat rakentaa nopeasti lataavia dynaamisia sovelluksia käyttämättä hybridirakenteita.

Tässä oppaassa katson progressiivisten Web-sovellusten perusteet, joitakin tärkeimpiä ominaisuuksia ja miten voit aloittaa oman omasi rakentamisen.

Mitä ovat progressiiviset Web-sovellukset?

Progressiiviset Web-sovellukset (tai PWA: t) hyödyntää selaimen sovellusliittymiä luoda omia sovelluskokemuksia suoraan selaimessa missä tahansa laitteessa.

Viime kädessä Progressive Web Apps sisältää a muutamia teknologioita että kehittäjät voivat käyttää luomaan tehokkaita natiivimaisia sovelluksia. Monet tulevat Web-sovellusliittymät kuten Service Workers API tai Push API.

On vaatimuksia kutsua jotain PWA: ta, mutta nämä ovat tärkeimmät:

On täysin mobiili reagoi.
Noudattaa progressiivinen parannus.
Kyetä asenna paikallisesti älypuhelimissa ja tableteissa.
Toimii offline-tilassa ilman Internetiä, palveluhenkilöstöä.
Erottaa sisällön toiminnallisuudesta sovelluksen kuoren avulla.
Rakentaa HTTPS: ään lisää turvallisuutta.
löydettävissä Google-haussa.
on dynaamiset sovellusten kaltaiset sivut mutta jokainen vielä on oma URL-osoite.

Jos olet ajattelu rakentaa pieni web-sovellus voit yrittää luoda Progressive Web App -ohjelman. Siinä on vähän oppimiskäyrää, mutta sinulla on niin paljon enemmän hallita käyttäjäkokemusta tuloksena.

Sukelletaan Progressive Web Appsin perusasioihin ja opimme, mitä ne tekevät.

Huoltohenkilöstö

Jokainen Progressive Web App tarvitsee huoltotyöntekijöitä. Nämä ovat kuten liikenneviranomaiset joka koordinoi liikennettä, jossa tiedot tulevat ja miten se tapahtuu kaikki järjestetään ja tallennetaan välimuistiin.

Yksinkertaisesti sanottuna palveluhenkilöstö toimii JavaScript-tiedostona ja toimii Web-sovelluksen taustalla. Aina kun käyttäjä suorittaa tapahtuman, se kutsuu palvelun työntekijän käsikirjoitus joko vetää tietoja, tallenna tietoja tai molempia!

Käyttämällä Service Worker API on olennainen käyttää offline-tuettua PWA: ta. Näin sinä lähettää tietoja eri näkymien välillä ja miten voit pyytää tietoja paikallisesta tietokannasta. Mutta tämä on enimmäkseen kehittyneitä juttuja, joita opit tekemällä PWA-projektia.

Ota kurkistus Palvelustyöntekijöiden keittokirja varten perustiedot ja live-demot. Tämä on loistava tapa oppia tutkimalla, mitä muut ovat tehneet kloonaaminen omiin sovelluksiin.

Jos haluat rakentaa Progressive Web App -ohjelmaa aloita Service Worker API: lla. Vain puuhaa se ja perustaa yksinkertainen demo paikallisesti. Tämä asettaa perustan myöhemmin mukautettujen sovellusominaisuuksien ja sivujen rakentaminen että kaikki kulkevat palveluntarjoajien kautta.

varten aloittelijoiden oppaat ja yksityiskohtaiset koodinpätkät, Suosittelen erityisesti näitä resursseja:

Palvelustyöntekijöiden käyttöönotto
Palvelustyöntekijöiden käyttöönotto
Palvelustyöntekijän näyte: mukautettu offline-sivunäyte

Sovelluksen kuori

Useimmat alkuperäiset sovellukset noudata sovelluksen kuoren arkkitehtuuria missä tiedot ja sovelluskoodi ovat täysin erillään käyttöliittymästä. Sovelluksen kuori voi olla välimuistissa paikallisesti joten jokainen sivu latautuu uskomattoman nopeasti.

Tämä pysyy samana “natiivi sovellus” tunne missä käyttöliittymä on aina näkyvissä mutta sisältö / toiminnot latautuvat eri tavalla joka kerta. Tutustu tähän Google-kehittäjien sivusto-sivulle, jos haluat oppia lisää siitä sovelluksen kuorimalli.

Useimmissa sovelluksissa on hyvin yksinkertainen sovelluksen kuori ja sinun pitäisi suunnitella arkkitehtuurisi yksinkertaisuus mielessä.

Yleensä sovelluksen kuoressa on nämä tärkeimmät elementit:

Suosituimmat navigointipalkin linkit.
Päivitä-painike (valinnainen).
Sivun taustasäiliö.

Täältä löydät mukavan tapaustutkimuksen Googlen I / O-progressiivinen Web-sovelluksen kuoren arkkitehtuuri. Ne tarjoavat myös vinkkejä oman shell-arkkitehtuurin rakentamiseen, välimuistiin tallentamiseen ja vetämällä se automaattisesti jokaiselle sivulle.

Ajattele kuoren arkkitehtuuria kaikki staattiset UI-elementit voit käyttää jokaista sivua. Niiden pitäisi olla erotettu muusta koodista ja välimuistissa, jotta niitä voidaan käyttää uudelleen. Tarkista myös Googlen intro aiheeseen runsaalla koodilla katkelmia, joiden avulla pääset alkuun.

Online- ja offline-tuki

Useimmat alkuperäiset sovellukset ajaa hyvin ilman Internetiä. Progressiivisten Web-sovellusten on tarkoitus noudattaa samaa käyttäytymistä.

Palvelun työntekijöiden kautta voit rakentaa paikallisia välimuistia JSON-koodilla kullekin sivulle. Näin käyttäjät voivat selaa Web-sovellusta paikallisesti. Saatat myös sisällyttää manifesti-tiedosto Voit määrittää kuvakkeet, ruudun ja muut käynnistysasetukset.

Jos käytät Service Worker -ohjelmaa, ota katsella Cache API mikä on osa samaa kehystä. Se on yleensä paras tapa tallentaa tietoja paikallisesti ja palveluntarjoajilta myöhemmin.

Voit myös testata mitä tahansa verkkosovellusta käyttämällä Majakka, ilmainen työkalu PWA-teknologioiden ominaisuuksien noudattamisen ja tuen tarkistamiseen.

PWA: t aina vaatia offline-tukea palveluntarjoajan sovellusliittymän kautta, jotta ne voivat toimi matalan yhteyden tiloissa. Majakka on paras tapa testata offline-tukea sekä monia muita ominaisuuksia.

Live-esimerkkejä

Elävien PWA: iden opiskelu ja niiden toiminnan näkeminen on hyvä tapa oppia. Progressive Web App -markkinat ovat kuitenkin edelleen kehittymässä, niin monet parhaista ovat hajallaan Internetin eri kulmiin.

Mutta kiitos PWA-kalliot, Olen kuratoinut muutamia hämmästyttäviä esimerkkejä osoittamaan, mitä PWA: t voivat todella tehdä.

1. Valuuttamuunnin

Tämä on melko yksinkertainen Valuuttamuunnin ottaa valuuttakurssit ja laskee nykyisen eri valuuttojen välillä eri puolilla maailmaa.

Huomaat tämän web-sovelluksen täysin reagoiva, tukee kosketusta, ja automaattiset päivitykset ilman sivun päivitystä.

Nämä ovat vain joitakin ominaisuuksia, joita odotat millä tahansa tyypillinen Progressive Web App. Tämä sovellus voidaan tallentaa myös paikallisesti puhelimeen toimimaan offline-tilassa, vaikka se muodostaa yhteyden JSON-tiedostoon tarkistaakseen nykyiset valuuttakurssit.

2. Englannin aksentit

Minä vain rakastan tätä web-sovellusta, koska se on sekä ainutlaatuinen että uskomattoman hyvin suunniteltu. Englanninkieliset aksenttikartat curates videoita verkossa jossa ihmiset kuljettavat aksentteja tietyiltä Yhdysvaltojen ja Yhdistyneen kuningaskunnan alueilta.

Klikkaamalla mitä tahansa karttaa voit kuunnella, miten ihmiset lausuvat tiettyjä sanoja eri puolilla maailmaa. Sovellus on salamannopea ja se on avoinna GitHubista joku voi tarkistaa.

Sisäosat ovat käynnissä Reagoida / Redux kanssa Firebase ja API-yhteys Google Mapsiin. Ehdottomasti hyvä esimerkki siitä, että aloittelijoille on helppo opiskella ja oppia.

3. Pokedex.org

Toinen melko yksinkertainen PWA on tämä Pokedex-sovellus luonut Nolan Lawson. Hän julkaisi tämän koodin vapaasti GitHubissa, joten se on vielä toinen hanke kannattaa snoopata ympäri ja opiskella.

Koska nämä tiedot voivat pysyä staattisina, se on paikallisen moottorin kautta olla nimeltään PouchDB. Kaikki tiedot tulevat PokeAPI: sta ja tallentavat sen jälkeen pelkkä JavaScript. Tämä tarkoittaa, että voit tallenna se paikallisesti puhelimeesi kuten todellinen natiivi sovellus ja se toimii Internet-yhteyden kanssa tai ilman sitä. Aika viileä?

Koko asia on powered by JavaScript, joten se on osoitus siitä, kuinka paljon voit tehdä frontend-koodilla. Se käyttää paljon välimuistia palveluntarjoajan API: n kanssa se on hullu nopea ja erittäin helppokäyttöinen.

4. Flipkart

Lopuksi, ja yllättäen, katsotaanpa Flipkart-verkkosivusto. Tämä on täynnä Verkkokaupan myymälä on itse asiassa Progressive Web App.

Sen täysin reagoiva ja lataa sivuja dynaamisesti. Sivun URL-osoitteet liitetään selaimeen, joten voit kopioida / liittää ja jakaa niitä kuten tyypillinen sivusto.

Tämä on helposti kaikkein monimutkaisin PWA, jota olen koskaan nähnyt. Olen hämmästynyt siitä, että kehittäjät pystyivät luomaan verkossa saumattoman kokemuksen kaikille käyttäjille, puhumattakaan paikallisen offline-tallennuksen tukeminen, liian.

Ja vaikka en löytänyt repoa koko Flipkartin lähdekoodille, on olemassa Flipkart-sivu GitHubissa kanssa pienempiä koodinpätkiä kehittäjien tiimiltä.

Opi lisää

Progressiiviset Web-sovellukset ovat uskomattoman suosittu ja saa varmasti höyryä koska enemmän kehittäjiä siirtyy alkuperäisistä / hybridi-sovelluksista.

Vuotuinen huippukokous nimeltään Progressive Web App -huippukokous ja he julkaisevat YouTubessa videoita, joita voit katsella ilmaiseksi. Tämä on hyvä tapa poimia jonkin verran pro-tietämystä maksamatta lippua.

Mutta jos etsit tarkempaa PWA-koodausoppaat tarkasti nämä opetusohjelmat:

Aloittelijan opas progressiivisiin Web-sovelluksiin
Rakenna ensimmäinen progressiivinen web-sovelluksesi Reactilla
Progressiivisen Web-sovelluksen rakentaminen polymeerillä