Rakenna sovelluksia, jotka toimivat offline-tilassa

Feb 6, 2026

Miten tehdään

Pitkästä aikaa offline-toiminnallisuus, taustasynkronointi ja push-ilmoitukset ovat eriytyneet natiivit sovellukset verkkopuolelta. The Palvelutoimittaja API on pelin muuttuva tekniikka, joka esittelee pelikentän. Tässä opetusohjelmassa käytämme sitä rakentamaan sivua, joka voi palvella sisältöä jopa silloin, kun ei ole Internet-yhteyttä.

Lataa koodi Filesilosta

01. HTTPS-palvelin

Helpoin tapa ajatella huoltotyöntekijöitä on koodikoodina, joka asentaa sivustolla asiakaskoneella, joka toimii taustalla, ja sen jälkeen mahdollistaa tämän sivuston lähetetyt pyynnöt sieppaamaan ja manipuloimaan. Koska tämä on niin voimakas kyky, työskennellä palveluhankkeiden kanssa elävässä ympäristössä, sinun on oltava käynnissä HTTPS: ssä. Näin varmistetaan, että niitä ei voi hyödyntää varmistamalla, että palvelun työntekijä selain vastaanottaa sivulta on aito.

Kehitystarkoituksiin kuitenkin voimme ajaa ilman httpsiä http: // localhost / on sallittua poikkeuksena tähän sääntöön. Yksinkertaisin tapa päästä alkuun on NPM http-palvelin paketti.

 NPM asentaa http-server -g
HTTP-SERVER -P 8000 -C-1

02. Aseta perussivun

Palvelimessa ei ole mitään, joten tee perussivun palvelemaan. Luomme uuden index.html-tiedoston ja kun käytämme palvelinta, se on nyt saatavilla http: // localhost: 8000 .

Tässä vaiheessa huomaat, että jos lopetat HTTP-palvelimen ja päivität sivun selaimessa, saat virheesivun, koska sivustoa ei voida saavuttaa. Tämä on kokonaan odotettu, koska meillä ei ole vielä välimuistiin offline-sisältöä.

 & lt ;! DocType HTML & GT;
& lt; html & gt;
  & lt; pää & gt;
  & lt; Meta Charset = "UTF-8" / & GT;
  & lt; otsikko & gt; huoltotyöntekijä & lt; / otsikko & gt;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; Link Rel = "Stylesheet" tyyppi = "Text / CSS" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; otsikko & gt;
  & lt; h1 & gt; Tervetuloa & lt; / h1 & gt;
  & lt; / otsikko & gt;
  & lt; div id = "Sisältö" & gt;
  & lt; p & gt; Sisältö tässä & lt; / p & gt;
  & lt; img src = "kitty.jpg" leveys = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Rekisteröi palvelutoimihenkilö

Meillä on nyt melko epäsäännöllinen sivu, ja on aika alkaa ajatella palvelutoiminnan toteuttamisesta. Ennen kuin saamme koodaamista, kannattaa ottaa hetki ymmärtää palveluhankkeiden elinkaaren.

Prosessi käynnistää JavaScriptin palvelutoiminnon "rekisteröinti", joka kertoo selaimen aloittamaan työntekijän asentamisen - sen elinkaaren ensimmäinen vaihe. Koko elinkaaren ajan palvelualan työntekijä on jossakin seuraavista valtioista:

Asennus: Kun palvelutoimihenkilö on rekisteröity, sen asennusta käytetään tyypillisesti lataamaan ja välimuistiin staattisen sisällön
Asennettu: Työntekijä on teoreettisesti käyttövalmis, mutta ei välittömästi aktivoi
Aktivointi: Asennettu huoltotyöntekijä aktivoi itsensä, jos siellä ei ole olemassa olevaa palvelutarjousta, tai tietyt ehdot johtavat olemassa olevaa vanhentumista; Aktivointi käytetään tyypillisesti vanhojen tiedostojen poistamiseen välimuistista offline-sisällöstä
Aktivoitu: Palvelutoiminnassa on nyt hallita asiakirjaa ja pystyy käsittelemään pyyntöjä
Redundant: Jos palvelutoiminto ei onnistunut asentamaan tai aktivoimaan tai jos se korvataan uudemmalla palvelutoimihenkilöllä

04. Tarkista, että olet rekisteröitynyt

Rekisteröidään palvelutoimihenkilö. Tämä osoittaa tehokkaasti selaimen JavaScript-tiedostoon, joka määrittää palvelun työntekijän käyttäytymisen. Rekisteröinti tehdään käyttämällä Serviceworker-objektia, joka on lähtökohta API: lle. Tarkistamme myös API: n itse asiassa selaimessa ennen kuin yrität tehdä niin.

The Rekisteröidy () Toimintoa voidaan turvallisesti kutsua aina, kun sivulataa ja selain määrittää, onko palvelun työntekijä jo rekisteröity.

 Jos ("Serviceworker" navigaattorissa) {
  window.addeventlistener ("kuorma", toiminto () {
  navigator.serviceworker.register ("ServiceWorer.js", {Soveltamisala: "./'}).The(Function(registration) {
  Console.log ("Palvelutoimittaja rekisteröi onnistuneesti.");
  }, toiminto (virhe) {
  Console.log ("Virhe rekisteröiminen palvelun työntekijälle:" + virhe);
  });
  });
}

05. Täytä palvelun työntekijä

Seuraavaksi meidän on toteutettava palvelutoiminta itse. Palvelulliset työntekijät voivat kuunnella useita tapahtumia, jotka liittyvät omaan elinkaarensa ja toimintaan sivulla. Tärkeimmät ovat asennusta, aktivoi ja hae.

Aloitetaan luomalla kuuntelija Asentaa Tapahtuma, joka käynnistää kun työntekijän asennus on valmis. Tämä antaa meille mahdollisuuden ohjata palvelun työntekijää lisätä nykyisen kansion offline-sisältöä välimuistiin. Meidän on myös nimettävä välimuisti - koska vanhoja kätköjä voi jatkua, päivittää / versiota tämän välimuistin nimen avulla voit palvella uusia sisältöversioita myöhemmin.

 var currentcache = 'demo-välimuisti';
Self.AddeventListener ('asennus', tapahtuma = & gt; {
  tapahtuma.waituntil (
  caches.open (CurrentCache) ..Tun (toiminto (välimuisti) {
  konsoli.log ("Sisältöjen lisääminen välimuistiin");
  Palauta Cache.AdDall ([
  './index_offline.html',
  './Kitty_Offline.jpg',
  './custom.css'
  ]);
  }))
  );
});

06. Hae tapahtuma

Sivumme on nyt välimuistin sisältö, joka on ladattu, mutta tarvitsemme mekanismia pyyntöjen sieppaamiseksi ja ohjata ne tähän välimuistisiin. Tehdä tämä, meidän on kuunneltava hakea tapahtumia, jotka laukaistaan pyynnöstä, kuten saamme index.html Tiedosto tehdään verkossa. Sitten sovitamme pyynnön välimuistia vastaan ja palvelemme välimuistista resurssia, jos se löytyy. Muussa tapauksessa pudotaan takaisin hakemaan sovellusliittymän pyyntö palvelimelle.

Tässä vaiheessa kannattaa huomata, että meillä on raskas riippuvuus JavaScript lupaa työskennellä. Nämä voivat olla hieman hankalaa, joten kannattaa perehtyä, jos et ole käyttänyt niitä aiemmin.

 SELF.ADDEVENTLISTER ("Fetch", Tapahtuma = & GT; {
  tapahtuma.respondwith (
  caches.match (Event.request) .Tää (vastaus = & gt; {
  Palautusvaste || Fetch (Event.request);
  }))
   );
    });

07. Laajenna noutaa tapahtuma

Jos testat sen nyt (lopeta HTTP-palvelin ja päivitä sivu), sinun on löydettävä, että sivu toimii sekä verkossa että offline-tilassa. On kuitenkin todennäköistä, että haluat älykkäämpiä offline-käyttäytymistä, jossa on erilainen sisältö tai toiminto käytettävissä, kun palvelin ei ole käytettävissä.

Tämän saavuttamiseksi voimme laajentaa hakea Tapahtuman vastaus edelleen tarkistaa erityisesti navigointipyynnöt ja vastata erilaisella offline-sivulla, kun havaitaan. Tämä index_offline.html Tiedosto voi olla verkkosivun muunnelma tai jotain täysin erilaista, ja voi myös käyttää muita resursseja, joita olet välimuistiin custom.css .

 SELF.ADDEVENTLISTER ("Fetch", Tapahtuma = & GT; {
  Jos (Event.request.modi === 'navigoi') {
  tapahtuma.respondwith (
  Fetch (Event.request) .Catch (virhe = & gt; {
  Console.log ("Sivu ei ole käytettävissä. Offline-sisällön palauttaminen.");
  Palauta cches.match ('./ index_offline.html');
  }))
  );
  } muu {
  tapahtuma.respondwith (
  caches.match (Event.request) .Tää (vastaus = & gt; {
  Palautusvaste || Fetch (Event.request);
  }))
  );
  }
});

08. Poista välimuisti

Tarvitsemme vielä vielä yksi asia. Jos yrität nyt muuttaa offline-sisältöäsi, löydät sen, ettei se päivitä, kun testat sivusi - saat vielä vanhan version! Tämä johtuu siitä, että vanhemmat tiedostot ovat edelleen välimuistissa.

Sinun täytyy toteuttaa jotain puhdistamaan vanhentuneita tiedostoja välimuistista estääkseen heidät palvelemaan. Tämä tehdään vastaamalla aktivoida Tapahtuma ja kaikki välimuistit, jotka eivät vastaa nykyisessä vaiheessa määritettyä nimeä. Tämän jälkeen voit lisätä versionumeron Ajoneuvolle aina, kun muutat offline-sisältöä, jotta se päivitetään.

 This.AddeventListener ("Activate", tapahtuma = & gt; {
  var ActiveCaches = [CurrentCache];
  konsoli.log ("huoltotyöntekijä aktivoituu. Välimuistin tarkistaminen on ajan tasalla.");
  tapahtuma.waituntil (
  caches.keys (). Sitten (Keylisti = & gt; {
  Palauta lupaus.All (Keylist.Map (avain = & gt; {
  jos (ActiveCaches.indexof (avain) === -1) {
  konsoli.log ("Vanhan välimuistin poistaminen" + -näppäin);
  Palauta CACHES.DELETE (avain);
  }
  }));
  }))
  );
});

Tämä artikkeli julkaistiin Web Designer Magazine Issue # 268. Tilaa nyt.

Lue lisää:

Coderin opas AP: lle
Aloita WebGL: n kanssa käyttämällä kolmea.js
12 valtava web-suunnittelun suuntaus vuodelle 2018

Rakenna sovelluksia, jotka toimivat offline-tilassa

01. HTTPS-palvelin

02. Aseta perussivun

03. Rekisteröi palvelutoimihenkilö

04. Tarkista, että olet rekisteröitynyt

05. Täytä palvelun työntekijä

06. Hae tapahtuma

07. Laajenna noutaa tapahtuma

08. Poista välimuisti

Miten tehdään - Suosituimmat artikkelit

Kuinka tehdä Meme Photoshopissa

Miten lisätä energiaa elämäsi piirustuksiin

Kuvien pakkaaminen: Web Designerin opas

Käännä tietoja vuorovaikutteisiin kaavioihin

Luo viihtyisä sisustus linja-art

Luo realistinen fantasia ritari

Käytettävyystestaus

Kuinka ottaa Vector-logon 2D-3D: sta

Luokat