Oletko koskaan miettinyt, kuinka jotkin verkkosivustot näyttävät toimivan myös offline-tilassa? Salaisuus on yksinkertainen: näillä verkkosivustoilla on palvelutyöntekijöitä.

Palvelutyöntekijät ovat avainteknologia monien nykyaikaisten verkkosovellusten alkuperäisten sovellusmaisten ominaisuuksien takana.

Mitä ovat palvelutyöntekijät?

Palvelutyöntekijät ovat erikoistuneita työntekijöitä JavaScript-verkkotyöntekijät. Service worker on JavaScript-tiedosto, joka toimii vähän kuin välityspalvelin. Se sieppaa lähtevät verkkopyynnöt sovelluksestasi ja antaa sinun luoda mukautettuja vastauksia. Voit esimerkiksi tarjota välimuistissa olevia tiedostoja käyttäjälle, kun hän on offline-tilassa.

Palvelutyöntekijät antavat sinun myös lisätä ominaisuuksia, kuten taustasynkronoinnin, verkkosovelluksiin.

Miksi palvelutyöntekijät?

Verkkokehittäjät ovat yrittäneet laajentaa sovellustensa ominaisuuksia jo pitkään. Ennen huoltotyöntekijöiden tuloa voit käyttää erilaisia ​​ratkaisuja tämän mahdollistamiseksi. Erityisen merkittävä oli AppCache, joka teki resurssien välimuistista kätevän. Valitettavasti siinä oli ongelmia, jotka tekivät siitä epäkäytännöllisen ratkaisun useimmille sovelluksille.

instagram viewer

AppCache näytti olevan hyvä idea, koska sen avulla voit määrittää välimuistiin tallennettavia resursseja todella helposti. Se teki kuitenkin monia oletuksia siitä, mitä yritit tehdä, ja sitten hajosi hirveästi, kun sovelluksesi ei noudattanut näitä oletuksia tarkasti. Lue Jake Archibaldin (valitettavasti nimetty, mutta hyvin kirjoitettu) Sovellusvälimuisti on Douchebag Lisätietoja. (Lähde: MDN)

Palvelutyöntekijät ovat tällä hetkellä yritys vähentää verkkosovellusten rajoituksia ilman AppCachen kaltaisen tekniikan haittoja.

Käyttötapaukset palvelutyöntekijöille

Joten mitä palvelutyöntekijät antavat sinun tehdä? Palvelutyöntekijät antavat sinun lisätä verkkosovellukseesi ominaisuuksia, jotka ovat ominaisia ​​alkuperäisille sovelluksille. Ne voivat myös tarjota normaalin käyttökokemuksen laitteilla, jotka eivät tue huoltotyöntekijöitä. Tällaisia ​​sovelluksia kutsutaan joskus Progressiiviset verkkosovellukset (PWA).

Tässä on joitain ominaisuuksia, jotka palvelutyöntekijät mahdollistavat:

  • Antaa käyttäjän jatkaa sovelluksen (tai ainakin sen osien) käyttöä, kun hän ei ole enää yhteydessä Internetiin. Palvelutyöntekijät saavuttavat tämän palvelemalla välimuistissa olevia resursseja vastauksena pyyntöihin.
  • Chromium-pohjaisissa selaimissa palvelutyöntekijä on yksi verkkosovelluksen asentamisen edellytyksistä.
  • Palvelutyöntekijöitä tarvitaan, jotta verkkosovelluksesi pystyy toteuttamaan push-ilmoituksia.

Palvelutyöntekijän elinkaari

Palvelutyöntekijät voivat hallita koko sivustoa tai vain osaa sivuston sivuista. Tietyllä verkkosivulla voi olla vain yksi aktiivinen palvelutyöntekijä, ja kaikilla palvelutyöntekijöillä on tapahtumapohjainen elinkaari. Palvelutyöntekijän elinkaari näyttää yleensä tältä:

  1. Työntekijän rekisteröinti ja lataus. Palvelutyöntekijän elinikä alkaa, kun JavaScript-tiedosto rekisteröi sen. Jos rekisteröinti onnistuu, palvelutyöntekijä lataa ja alkaa sitten toimia erityisessä säikeessä.
  2. Kun palvelutyöntekijän hallitsema sivu ladataan, palvelutyöntekijä saa asennustapahtuman. Tämä on aina ensimmäinen tapahtuma, jonka palvelutyöntekijä vastaanottaa, ja voit määrittää tälle tapahtumalle kuuntelijan työntekijän sisällä. "Asennus"-tapahtumaa käytetään yleensä hakemaan ja/tai tallentamaan välimuistiin kaikki palvelutyöntekijän tarvitsemat resurssit.
  3. Kun palvelutyöntekijä on suorittanut asennuksen, se vastaanottaa "aktivoi"-tapahtuman. Tämän tapahtuman avulla työntekijä voi puhdistaa aiempien palvelutyöntekijöiden käyttämät ylimääräiset resurssit. Jos päivität huoltotyöntekijää, aktivointitapahtuma käynnistyy vain, kun se on turvallista. Tämä tapahtuu, kun palvelutyön vanhaa versiota käyttäviä sivuja ei ole ladattu.
  4. Tämän jälkeen palvelutyöntekijällä on täysi hallinta kaikista sivuista, jotka ladattiin onnistuneen rekisteröinnin jälkeen.
  5. Elinkaarin viimeinen vaihe on redundanssi, joka tapahtuu, kun palvelutyöntekijä poistetaan tai korvataan uudemmalla versiolla.

Palvelutyöntekijöiden käyttäminen JavaScriptissä

Service Worker API (MDN) tarjoaa käyttöliittymän, jonka avulla voit luoda JavaScriptin palvelutyöntekijöitä ja olla vuorovaikutuksessa heidän kanssaan.

Palvelutyöntekijät käsittelevät ensisijaisesti verkkopyyntöjä ja muita asynkronisia tapahtumia. Tämän seurauksena Service Worker API käyttää paljon Lupaukset ja asynkroninen ohjelmointi.

Palvelutyöntekijän luomiseksi sinun on ensin soitettava numeroon navigator.serviceWorker.register() menetelmä. Tältä se saattaa näyttää:

jos ('palvelutyöntekijä' navigaattorissa) {
 navigator.serviceWorker.register('/sw.js').then(toiminto(rekisteröinti){
 console.log('Palvelutyöntekijän rekisteröinti onnistui:', rekisteröinti);
 }).catch((virhe) => { console.log('Palvelutyöntekijän rekisteröinti epäonnistui:', virhe); });
} muu {
 console.log('Palvelutyöntekijöitä ei tueta.');
}

Uloin if-lohko suorittaa ominaisuuden havaitsemisen. Se varmistaa, että huoltotyöntekijöihin liittyvä koodi toimii vain selaimissa, jotka tukevat huoltotyöntekijöitä.

Seuraavaksi koodi kutsuu rekisteröidy menetelmä. Se välittää sen polun palvelutyöntekijälle (suhteessa sivuston alkuperään), jotta se rekisteröi ja lataa sen. The rekisteröidy menetelmä hyväksyy myös valinnaisen parametrin, jota kutsutaan laajuudeksi, jota voidaan käyttää rajoittamaan työntekijän hallitsemia sivuja. Palvelutyöntekijät hallitsevat oletusarvoisesti kaikkia sovelluksen sivuja. The rekisteröidy menetelmä palauttaa lupauksen, joka osoittaa, onnistuiko rekisteröinti.

Jos lupaus ratkeaa, palvelutyöntekijä rekisteröityi onnistuneesti. Koodi tulostaa sitten rekisteröityä palvelutyöntekijää edustavan objektin konsoliin.

Jos rekisteröinti epäonnistuu, koodi havaitsee virheen ja kirjaa sen konsoliin.

Seuraavaksi tässä on yksinkertaistettu esimerkki siitä, miltä itse palvelutyöntekijä voi näyttää:

self.addEventListener('Asentaa', (tapahtuma) => {
 event.waitUntil(UusiLupaus((ratkaise, hylkää) => {
 console.log("tekemällä asennustöitä")
 ratkaista()
 }))
 console.log("Huoltotyöntekijä viimeisteli asennuksen")
})
self.addEventListener('aktivoida', (tapahtuma) => {
 event.waitUntil(UusiLupaus((ratkaise, hylkää) => {
 console.log("tekemällä siivoushommia!")
 ratkaista()
 }))
 console.log('aktivointi tehty!')
})
self.addEventListener('hakea', (tapahtuma) => {
 console.log("Pyyntö siepattu", tapahtuma)
});

Tällä demopalvelutyöntekijällä on kolme tapahtumakuuntelijaa, jotka on rekisteröity itseään vastaan. Siinä on yksi "install"-, "Active"- ja "fetch"-tapahtumalle.

Kahden ensimmäisen kuuntelijan sisällä koodi käyttää odota kunnes menetelmä. Tämä menetelmä hyväksyy lupauksen. Sen tehtävänä on varmistaa, että palvelutyöntekijä odottaa lupauksen ratkaisemista tai hylkäämistä ennen kuin hän siirtyy seuraavaan tapahtumaan.

Hakukuuntelija käynnistyy aina, kun palvelutyöntekijän hallitsemaa resurssia pyydetään.

Palvelutyöntekijän hallitsemat resurssit sisältävät kaikki sen hallitsemat sivut sekä kaikki näillä sivuilla viitatut resurssit.

Paranna verkkosovelluksiasi palvelutyöntekijöiden avulla

Palvelutyöntekijät ovat erikoislaatuisia verkkotyöntekijöitä, jotka palvelevat ainutlaatuista tarkoitusta. He istuvat verkkopyyntöjen edessä ottaakseen käyttöön ominaisuuksia, kuten offline-sovellusten käytön. Palvelutyöntekijöiden käyttäminen verkkosovelluksessa voi parantaa huomattavasti sen käyttökokemusta. Voit luoda palvelutyöntekijöitä ja olla vuorovaikutuksessa heidän kanssaan Service Worker API: n avulla.