Baggrundssynkronisering og opdateringer
Opdatér caches, og synkronisér, når forbindelsen er tilbage.
Baggrundssynkronisering og opdateringer er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hold cachen frisk
En app, der kan fungere offline, skal opdatere sig problemfrit: levere nye ressourcer, fjerne gamle og prøve mislykkede handlinger igen, når forbindelsen vender tilbage. Service workers leverer værktøjer til alle tre dele.
Versionsstyrede cachenavne
Den enkleste opdateringsmekanisme er et versionsstyret cache-navn. Når du øger versionsnummeret, oprettes en ny cache, mens den gamle efterlades til oprydning under aktiveringen.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Rydning af gamle cacher
I activate-hændelsen skal du opliste alle cache-navne og slette dem, der ikke tilhører den aktuelle version. Det frigiver lagerplads og fjerner forældede ressourcer.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Den ventende worker
Som standard installeres en ny worker, men den forbliver i tilstanden waiting, indtil alle sider, som styres af den gamle worker, er lukket. Det forhindrer versionsuoverensstemmelser midt i en session.
skipWaiting
self.skipWaiting() fortæller en ventende worker, at den skal aktiveres med det samme og overtage styringen uden at vente på, at faner lukkes. Kald den i install, når opdateringer skal træde i kraft med det samme.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Efter aktiveringen gør self.clients.claim() det muligt for den nye worker straks at overtage allerede åbne sider i stedet for kun at styre fremtidige navigeringer.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Registrering af opdateringer fra siden
Siden kan lytte efter en ny worker via registreringens updatefound-hændelse og derefter bede brugeren om at genindlæse siden for at hente den nyeste version.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Baggrundssynkronisering
Background Sync API giver dig mulighed for at udskyde en handling (f.eks. at sende en formular), indtil enheden har forbindelse. Du registrerer et synkroniseringsmærke, og browseren udløser en sync-hændelse, når enheden er online.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Håndtering af sync-hændelsen
I service workeren skal du lytte efter sync og kontrollere mærket. Brug waitUntil, så browseren holder workeren i live, indtil forsøget igen er afsluttet.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Mønsteret gem først, synkronisér derefter
Et robust offlineforløb er at gemme den ventende handling i IndexedDB, registrere en synkronisering og i sync-handleren læse køen og sende hvert element med POST, mens du fjerner elementet ved succes.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Opsummering af opdateringer og synkronisering
Tilsammen gør disse funktioner apps robuste: versionsstyrede cacher og oprydning holder ressourcerne friske, skipWaiting/clients.claim styrer tidspunktet for udrulningen, og baggrundssynkronisering gennemfører pålideligt handlinger, når brugeren igen er online.
Hurtigt tjek
Test din forståelse af opdateringer og baggrundssynkronisering.
Opsummering
Du har lært om baggrundssynkronisering og opdateringer:
- Brug versionsstyrede cachenavne, og ryd gamle cacher under
activate. skipWaitingogclients.claimstyrer tidspunktet for opdateringer.- Registrér nye versioner via
updatefound. - Baggrundssynkronisering udskyder handlinger, indtil enheden er online, via
sync-hændelsen. - Sæt handlinger i kø i IndexedDB, og tøm derefter køen under synkroniseringen.
Du har gennemført lektionen om Service Workers og offlinecaching.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Baggrundssynkronisering og opdateringer” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Baggrundssynkronisering og opdateringer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Baggrundssynkronisering og opdateringer”?
Opdatér caches, og synkronisér, når forbindelsen er tilbage. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Baggrundssynkronisering og opdateringer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Registrering af en Service Worker
- Cache-API'en
- Cachingstrategier
- Baggrundssynkronisering og opdateringer