Bakgrundssynkronisering och uppdateringar
Uppdatera cacheminnen och synkronisera när anslutningen återupprättas.
Bakgrundssynkronisering och uppdateringar är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Hålla cacher uppdaterade
En app som fungerar offline måste uppdateras smidigt: leverera nya resurser, ta bort gamla och försöka utföra misslyckade åtgärder igen när anslutningen återkommer. Service workers tillhandahåller verktyg för alla tre.
Versionsnumrerade cachenamn
Den enklaste uppdateringsmekanismen är ett versionsnumrerat cache-namn. När du ökar versionsnumret skapas en ny cache, medan den gamla lämnas kvar för att rensas bort vid aktiveringen.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Rensa gamla cacher
I händelsen activate listar du alla cachenamn och tar bort alla som inte hör till den aktuella versionen. Det frigör lagringsutrymme och tar bort gamla resurser.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Arbetaren i vänteläge
Som standard installeras en ny arbetare men förblir i tillståndet waiting tills alla sidor som styrs av den gamla arbetaren har stängts. Det förhindrar versionskonflikter mitt under en session.
skipWaiting
self.skipWaiting() instruerar en väntande arbetare att aktiveras omedelbart och ta över kontrollen utan att invänta att flikar stängs. Anropa den i install när du vill att uppdateringar ska börja gälla direkt.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Efter aktiveringen gör self.clients.claim() det möjligt för den nya arbetaren att omedelbart ta kontroll över redan öppna sidor, i stället för att bara kontrollera framtida navigeringar.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Identifiera uppdateringar från sidan
Sidan kan lyssna efter en ny arbetare via registreringens händelse updatefound och sedan uppmana användaren att läsa in sidan igen för att hämta den senaste versionen.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Background Sync
Background Sync API gör det möjligt att skjuta upp en åtgärd (till exempel att skicka ett formulär) tills enheten har anslutning. Du registrerar en synkroniseringstagg, och webbläsaren utlöser en händelse av typen sync när enheten är online.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Hantera händelsen sync
I service workern lyssnar du efter sync och matchar taggen. Använd waitUntil så att webbläsaren håller arbetaren aktiv tills försöket är klart.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Mönstret köa och synkronisera
Ett robust offlineflöde: spara den väntande åtgärden i IndexedDB, registrera en synkronisering och läs sedan kön i hanteraren för sync. Skicka varje post med POST och ta bort den när det lyckas.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Sammanfattning av uppdateringar och synkronisering
Tillsammans gör dessa funktioner appar motståndskraftiga: versionsnumrerade cacher och rensning håller resurserna aktuella, skipWaiting/clients.claim styr när uppdateringar införs, och Background Sync slutför åtgärder på ett tillförlitligt sätt när användaren är online igen.
Snabbtest
Testa dina kunskaper om uppdateringar och bakgrundssynkronisering.
Sammanfattning
Du har lärt dig om bakgrundssynkronisering och uppdateringar:
- Använd versionsnumrerade cachenamn och rensa gamla cacher i
activate. skipWaitingochclients.claimstyr när uppdateringar införs.- Identifiera nya versioner via
updatefound. - Background Sync skjuter upp åtgärder tills enheten är online, via händelsen
sync. - Lägg åtgärder i kö i IndexedDB och töm sedan kön vid synkronisering.
Du har slutfört Service Workers och offlinecachning.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Bakgrundssynkronisering och uppdateringar” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Bakgrundssynkronisering och uppdateringar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Bakgrundssynkronisering och uppdateringar”?
Uppdatera cacheminnen och synkronisera när anslutningen återupprättas. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Bakgrundssynkronisering och uppdateringar”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Registrera en Service Worker
- Cache-API:t
- Cachningsstrategier
- Bakgrundssynkronisering och uppdateringar