Synkronisering og oppdateringer i bakgrunnen
Oppdater hurtigbuffere og synkroniser når du er på nett igjen.
Synkronisering og oppdateringer i bakgrunnen er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Holde buffere oppdaterte
En app som fungerer uten nett, må kunne oppdateres på en god måte: levere nye ressurser, fjerne gamle ressurser og prøve mislykkede handlinger på nytt når forbindelsen kommer tilbake. Service workers tilbyr verktøy for alle tre oppgavene.
Versjonerte buffernavn
Den enkleste oppdateringsmekanismen er et versjonert buffernavn. Når du øker versjonsnummeret, opprettes en ny buffer, mens den gamle blir liggende til den ryddes bort under aktiveringen.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Rydde bort gamle buffere
I activate-hendelsen lister du opp alle buffernavnene og sletter alle som ikke tilhører den gjeldende versjonen. Dette frigjør lagringsplass og fjerner utdaterte ressurser.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Worker-en som venter
Som standard installeres en ny worker, men den blir værende i tilstanden waiting til alle sidene som styres av den gamle workeren, er lukket. Dette unngår versjonskonflikter midt i en økt.
skipWaiting
self.skipWaiting() ber en ventende worker om å aktiveres umiddelbart og ta kontroll uten å vente på at faner skal lukkes. Kall den i install når du vil at oppdateringer skal tas i bruk med én gang.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Etter aktiveringen lar self.clients.claim() den nye workeren ta kontroll over sider som allerede er åpne, umiddelbart, i stedet for å bare kontrollere fremtidige navigeringer.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Oppdage oppdateringer fra siden
Siden kan lytte etter en ny worker via registreringens updatefound-hendelse og deretter be brukeren laste siden på nytt for å hente den nyeste versjonen.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Bakgrunnssynkronisering
Background Sync API lar deg utsette en handling (for eksempel innsending av et skjema) til enheten har nettverkstilkobling. Du registrerer en synkroniseringstagg, og nettleseren utløser en sync-hendelse når enheten er tilkoblet.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Håndtere sync-hendelsen
I service workeren lytter du etter sync og finner riktig tagg. Bruk waitUntil slik at nettleseren holder workeren i live til forsøket på nytt er fullført.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Mønsteret kø og synkronisering
En robust flyt uten nett er å lagre den ventende handlingen i IndexedDB, registrere en synkronisering og i sync-behandleren lese køen og sende hvert element med POST, før elementet fjernes når det lykkes.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Oppsummering av oppdateringer og synkronisering
Til sammen gjør disse funksjonene apper robuste: versjonerte buffere og opprydding holder ressursene oppdaterte, skipWaiting/clients.claim styrer tidspunktet for utrulling, og Background Sync fullfører handlinger på en pålitelig måte når brukeren er på nett igjen.
Kjapp kontroll
Test forståelsen din av oppdateringer og bakgrunnssynkronisering.
Oppsummering
Du har lært om bakgrunnssynkronisering og oppdateringer:
- Bruk versjonerte buffernavn, og rydd bort gamle buffere i
activate. skipWaitingogclients.claimstyrer tidspunktet for oppdateringer.- Oppdag nye versjoner via
updatefound. - Background Sync utsetter handlinger til enheten er på nett, via
sync-hendelsen. - Legg handlinger i kø i IndexedDB, og tøm deretter køen ved synkronisering.
Du har fullført Service Workers og frakoblet bufring.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Synkronisering og oppdateringer i bakgrunnen» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Synkronisering og oppdateringer i bakgrunnen», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Synkronisering og oppdateringer i bakgrunnen»?
Oppdater hurtigbuffere og synkroniser når du er på nett igjen. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Synkronisering og oppdateringer i bakgrunnen»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Registrere en Service Worker
- Cache-API-et
- Strategier for hurtigbufring
- Synkronisering og oppdateringer i bakgrunnen