Kuinka saada sovelluksesi toimimaan offline-tilassa JavaScriptin avulla

Nykypäivän maailmassa liitettävyys on tehnyt meistä liikkuvampia kuin koskaan, mikä (paradoksaalisesti) saa meidät olemaan joskus offline-tilassa: kun olemme lentokonetilassa, meillä on huono yhteys, meillä ei ole enemmän tietoja, olemme metrolla ... ja niin edelleen.

Tämän liikkuvuuden toinen vaikutus on raskaiden verkkosivustojen hidas lataus: Amazon havaitsi, että vain 100 millisekuntia ylimääräinen latausaika maksoi heille 1% myynnistä.

Näissä tilanteissa haluaisimme pääsyn sisältöön offline-tilassa. Siksi on olemassa työkaluja, kuten Instapaper ja Pocket. Spotify ja Netflix mahdollistavat myös median lataamisen offline-käyttöä varten.

Voimme helposti nähdä, että tälle ominaisuudelle on kysyntää ja kuinka se voi hyödyttää yritystäsi.

Verkon on aika siirtyä offline-tilaan.

Onneksi meidän ei tarvitse enää rakentaa natiivisovelluksia tämän tavoitteen saavuttamiseksi. Uusien palvelutyöntekijöiden ja välimuistin sovellusliittymän ominaisuuksien ansiosta voimme luoda offline-verkkosivuston JavaScriptin avulla .

Mikä on palvelutyöntekijä (SW)?

Palvelutyöntekijät ovat JavaScript-koodia, joka toimii verkkosivustosi taustalla, vaikka sivu olisi suljettu. Offline-tilassa yksi heidän tavoitteistaan ​​on tallentaa verkkopyynnöt tai kuvat selaimen välimuistiin.

BETC-virasto teki demosivuston nimeltä whentheinternetisdown.com ranskalaiselle teleyritykselle Bouygues. Se toimii vain offline-tilassa ja tuntuu maagiselta. Mene kokeilemaan :)

Välimuisti tekee sivuston taikuudesta: voit palata takaisin 3 viikon, 1 kuukauden, 1 vuoden kuluttua, silti ilman yhteyttä, ja käyttää kaikkea sisältöä. - Maxime Huygue, BETC Digital Studion johtaja

Ok, tämä on hienoa, kerro minulle, miten se tehdään sitten.

Ok, aloitetaan seuraavista edellytyksistä:

  • SW: n käyttämiseksi sinun on otettava https käyttöön verkkosivustollasi.
  • Sinun pitäisi ymmärtää kunnolla, miten JavaScript-lupaukset toimivat.
  • SW: t toimivat kaikissa moderneissa selaimissa paitsi ystävämme IE.
  • Vaikka se olisikin JavaScript, ne toimivat verkkotyöntekijöiden yhteydessä. Mikä tarkoittaa: ei DOM: ää, ja ajaa pääkierteen ulkopuolella.
  • Ymmärtää, miten tietokannat toimivat.
  • Huoltotyöntekijän koodin on oltava erillisessä JavaScript-tiedostossa. Esimerkki: service-worker.js

Palvelutyöntekijöiden elinkaari

Toimiakseen SW: t on rekisteröitävä sovelluksessasi ja asennettava sitten. Sinun on tarkistettava, ovatko SW: t yhteensopivia asiakkaasi kanssa, ennen kuin teet niin.

1) Rekisteröinti

Rekisteröi SW-tiedosto, jos mahdollista. Se palauttaa lupauksen, joten voit käsitellä virheitä. Voit myös määrittää URL-osoitteiden laajuuden rekisteröintivaihtoehdoissa.

2) Asennus

Palvelutyöntekijät ovat tapahtumapohjaisia. Lyhyesti sanottuna sinun on liitettävä takaisinsoittoja tapahtumiin, kuten tekisit elementin.addEventListener kanssa. Ensimmäinen käytettävä tapahtuma on asennustapahtuma. Tämä on hyvä aika tallentaa kaikki tärkeät resurssit välimuistiin, kuten Javascript, CSS, HTML, Images ... Täältä välimuisti-sovellusliittymä liittyy puolueeseen!

Avaa sitten menetelmä tai luo haluttuun nimiin linkitetty välimuisti. Palautettu lupaus on pakattava tapahtumaan event.waitUntil (), joka viivästyttää huoltotyöntekijän asennusta, kunnes lupaus on ratkaistu. Muussa tapauksessa asennustapahtuma epäonnistuu ja huoltotyöntekijä hylätään.

Ole varovainen välimuistin suhteen: käyttäjän tallennustila on arvokasta, joten älä käytä sitä väärin. Ole myös varovainen: asennustapahtuma voidaan kutsua vain kerran, ja sinun on päivitettävä ohjelmistosi muokkaamaan sitä.

3) Aktivointi

Tämä on vähän hienovarainen.

Kun asennus on valmis, huoltotyöntekijä ei ole vielä aktiivinen: olemme asennetussa tilassa.

Tässä tilassa se odottaa ottavansa sivun hallinnan. Sitten se siirtyy elinkaaren seuraavaan vaiheeseen, joka on aktivointivaihe.

Aktivointivaihe on kätevä, kun päivität ohjelmiston. Yleisin tapaus on tyhjentää edellisen asennetun SW-välimuisti.

Huomaa, että asennuksen jälkeen päivitetty työntekijä odottaa, kunnes nykyinen työntekijä hallitsee nolla asiakasta (asiakkaat ovat päällekkäisiä päivityksen aikana).

self.skipWaiting () estää odottamisen, mikä tarkoittaa, että huoltotyöntekijä aktivoituu heti, kun se on valmis asentamaan. Tämän menetelmän etuna on, että voit vastaanottaa hakutapahtumia nopeammin.

Sillä ei ole väliä, kun soitat skipWaiting (), niin kauan kuin se on odottamisen aikana tai ennen sitä. On melko yleistä kutsua sitä asennustapahtumassa.

Huh huh! Pidetään tauko ja tehdään yhteenveto näkemistämme:

  • Palvelutyöntekijät ovat JavaScriptiä, jotka mahdollistavat offline-ominaisuudet, kuten välimuistin.
  • Tutkimme SW-elinkaaren: rekisteröinti, asennus, aktivointi
  • Opimme toteuttamaan yleisiä käyttötapauksia, kuten: välimuistin tallentaminen ja välimuistien tyhjentäminen välimuistin sovellusliittymän avulla.
  • Näimme, että self.skipWaiting ja self.clients.claim antavat meille mahdollisuuden aktivoida SW: t nopeammin saadaksemme tapahtumia nopeammin.

Ok liikkuminen oikealle pitkin…

4) Hae

Hakutapahtuman avulla voimme siepata verkkopyyntöjä ja tallentaa vastauksia tai mukauttaa niitä.

Tämän koukun tärkein etu on välimuistissa olevien resurssien palauttaminen pyynnön soittamisen sijaan. Sinun tulisi tarkastella Fetch-sovellusliittymää pyyntöpuheluiden käsittelyä varten.

Emme voi kattaa kaikkia palvelutyöntekijöiden tarjoamia mahdollisuuksia yhdessä artikkelissa. Kannustan silti tutkimaan, mikä on mahdollista: Mukautettu 404, Background Sync -sovellusliittymä offline-analytiikkaa varten, ServiceWorker-puolen mallipohjat…. tulevaisuus näyttää jännittävältä!

Toistaiseksi olemme nähneet, mikä on palvelutyöntekijä, miten se toimii koko elinkaarensa ajan, ja yleisimmät käyttötapaukset pelaamalla välimuistin ja Fetch-sovellusliittymän kanssa. Nämä kaksi sovellusliittymää antavat meille aivan uuden tavan hallita URL-osoitteen resursseja selaimessa. Viimeistele tämä opas katsomalla, kuinka voimme tallentaa muun tyyppisiä tietoja, esimerkiksi käyttäjän JSON-tietokannasta.

Tallenna mukautetut tiedot IndexedDB: hen

Yleinen suuntaviiva tietojen tallennukselle on, että URL-osoitteisiin osoitettavat resurssit tulisi tallentaa välimuistirajapintaan ja muut tiedot IndexedDB: hen. Esimerkiksi HTML-, CSS- ja JS-tiedostot tulisi tallentaa välimuistiin, kun taas JSON-tiedot tulisi tallentaa IndexedDB: hen. Huomaa, että tämä on vain ohje, ei vankka sääntö. (lähde)

Lyhyesti sanottuna näemme, milloin sinun ei pitäisi käyttää välimuistin sovellusliittymää, vaan IndexedDB. Molemmat ovat asynkronisia ja käytettävissä palveluntyöntekijöissä, verkkotyöntekijöissä ja ikkunan käyttöliittymässä. Hyvä uutinen on, että sitä tuetaan hyvin, jopa IE: n uusimmissa versioissa.

IndexedDB on NoSQL-tietokanta. IndexedDB tiedot tallennetaan avain-arvo pareja esine kaupoissa pikemminkin kuin taulukoiden. Yhdessä tietokannassa voi olla mikä tahansa määrä objektivarastoja. Aina kun arvo tallennetaan objektikauppaan, se liitetään avaimeen. Se näyttää tältä:

Melko klassinen, eikö? Tärkein asia ymmärtää on avainpolun käsite. Se kertoo selaimelle, mitä avainta käytetään tietojen purkamiseen objektivarastosta tai hakemistosta.

Tässä esimerkissä voimme nähdä, että avainpolkumme on ominaisuuden tunnus ja se määritetään rivillä 10. Sitten palautamme kaikki kohteet tietokannasta. Tämä on hyvin yksinkertainen käyttötapaus, joten jos haluat oppia lisää siitä, miten IndexedDB toimii, suosittelen lukemaan tämän erinomaisen artikkelin.

Johtopäätös

Offline-verkon hyödyntäminen on hienoa käyttökokemukselle, ja jotkut yritykset ovat alkaneet ryöstää sitä. Se perustuu enimmäkseen huoltotyöntekijöihin, JavaScript-skripteihin, jotka toimivat verkkosivustosi taustalla.

Olemme nähneet, miten niitä käytetään palvelutyöntekijöiden elinkaaren läpi ja mitä voit tehdä käyttämällä välimuistin ja haun sovellusliittymää. Mahdollisuudet ovat melkein rajattomat. joten ole luova ja älä liian ahne laitteen tallennustilassa.

Voit käyttää tietokantoja myös offline-tilassa: siihen mitä IndexedDB on tehty. Nämä offline-ominaisuudet ovat varmasti osa verkon tulevaisuutta, joten se toimii hyvin uuden tyyppisten Googlen luomien verkkosivustojen kanssa: Progressiiviset verkkosovellukset.

Lisälukemista:

  • Offline-keittokirja: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA ja offline: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Lab: Tiedostojen välimuistiin tallentaminen Service Workerin kanssa: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Palvelutyöntekijän elinkaari: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Palvelutyöntekijän elinkaaren selvittäminen: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Aktivoi huoltotyöntekijät nopeammin: //davidwalsh.name/service-worker-claim
  • Reaaliaikaiset tiedot palvelutyöntekijässä: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • IndeksoituDBPeruskäsitteet: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Pysyvän offline-tallennuksen aloittaminen IndexedDB: llä: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c