JavaScript Academy · Oppitunti

Taustasynkronointi ja päivitykset

Päivittäkää välimuisteja ja synkronoikaa yhteyden palauduttua.

Oppitunti 4/413 vaihetta

Taustasynkronointi ja päivitykset on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Välimuistien pitäminen tuoreina

Offline-toiminnallisuutta tukevan sovelluksen on päivitettävä itsensä hallitusti: uudet resurssit julkaistaan, vanhat poistetaan ja epäonnistuneet toiminnot yritetään uudelleen yhteyden palautuessa. Service workerit tarjoavat työkalut kaikkiin näihin tehtäviin.

Versioidut välimuistinimet

Yksinkertaisin päivitysmekanismi on versioitu välimuistinimi. Version kasvattaminen luo uuden välimuistin ja jättää vanhan poistettavaksi aktivoinnin yhteydessä.

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

Vanhojen välimuistien siivoaminen

activate-tapahtumassa luetellaan kaikki välimuistinimet ja poistetaan kaikki, jotka eivät vastaa nykyistä versiota. Tämä vapauttaa tallennustilaa ja poistaa vanhentuneet resurssit.

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

Odotustilassa oleva työntekijä

Oletusarvoisesti uusi worker asentuu, mutta jää waiting-tilaan, kunnes kaikki vanhan workerin hallitsemat sivut on suljettu. Näin vältetään versioiden yhteensopimattomuus kesken istunnon.

skipWaiting

self.skipWaiting() käskee odottavaa workeria aktivoitumaan heti ja ottamaan hallinnan odottamatta välilehtien sulkemista. Kutsukaa sitä install-tapahtumassa, kun päivitysten halutaan tulevan voimaan välittömästi.

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

Aktivoitumisen jälkeen self.clients.claim() antaa uuden workerin ottaa jo avoimet sivut heti hallintaansa sen sijaan, että se hallitsisi vain tulevia navigointeja.

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

Päivitysten havaitseminen sivulta

Sivu voi kuunnella uutta workeria rekisteröinnin updatefound-tapahtuman avulla ja kehottaa käyttäjää lataamaan sivun uudelleen uusimman version saamiseksi.

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

Taustasynkronointi

Background Sync API mahdollistaa toiminnon, kuten lomakkeen lähetyksen, siirtämisen siihen asti, kunnes laitteella on verkkoyhteys. Synkronointitunniste rekisteröidään, minkä jälkeen selain lähettää sync-tapahtuman yhteyden ollessa käytettävissä.

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

sync-tapahtuman käsittely

Service workerissä kuunnellaan sync-tapahtumaa ja tarkistetaan sen tunniste. waitUntil-menetelmää käyttämällä selain pitää workerin käynnissä, kunnes uudelleenyritys on valmis.

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

Ensin jonoon, sitten synkronointi

Luotettava offline-toimintamalli on seuraava: tallennetaan odottava toiminto IndexedDB:hen, rekisteröidään synkronointi ja luetaan sync-käsittelijässä jono. Sen jälkeen jokainen kohde lähetetään POST-pyynnöllä ja poistetaan jonosta onnistumisen jälkeen.

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

Päivitysten ja synkronoinnin kertaus

Nämä ominaisuudet tekevät sovelluksista toimintavarmoja: versioidut välimuistit ja niiden siivoaminen pitävät resurssit tuoreina, skipWaiting/clients.claim hallitsevat käyttöönoton ajoitusta ja Background Sync viimeistelee toiminnot luotettavasti, kun käyttäjä palaa verkkoon.

Pikatesti

Testatkaa, miten hyvin ymmärrätte päivitykset ja taustasynkronoinnin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte taustasynkronoinnin ja päivitysten perusteet:

Käyttäkää versioituja välimuistinimiä ja siivotkaa vanhat välimuistit activate-tapahtumassa.
skipWaiting ja clients.claim hallitsevat päivitysten ajoitusta.
Havaitkaa uudet versiot updatefound-tapahtuman avulla.
Background Sync siirtää toiminnot myöhemmäksi, kunnes verkkoyhteys on käytettävissä, käyttämällä sync-tapahtumaa.
Tallentakaa toiminnot jonoon IndexedDB:ssä ja tyhjentäkää jono synkronoinnin yhteydessä.

Olette suorittaneet Service Workers and Offline Caching -kokonaisuuden.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Taustasynkronointi ja päivitykset” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Taustasynkronointi ja päivitykset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Taustasynkronointi ja päivitykset”?

Päivittäkää välimuisteja ja synkronoikaa yhteyden palauduttua. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Taustasynkronointi ja päivitykset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy