sandra-larsson
Educator Fullstack Developer Javascript at Chas Academy
Service Worker
JavaScript
En Service Worker är ett skript som din webbläsare kör i
bakgrunden, separerat från en webbsida. Möjliggör funktionalitet
som inte behöver en webbsida eller användarinteraktion, såsom
pushnotifikationer och bakgrundssynkronisering. Viktigast:
Möjlighet att avlyssna och styra nätverksförfrågningar som
möjliggör offline-funktionalitet.
Service worker är en komponent i Progressive Web Apps , PWA...
Vad är en Progressive Web App??
"Progressive Web Apps (PWA) kombinerar webb- och mobilappar och
erbjuder en förstklassig användarupplevelse, både offline och online.
Genom att förstå och implementera PWA-teknik kan du skapa
webbappar som känns snabba, responsiva och beter sig som "riktiga" appar."
Till provet: Du behöver endast kunna vad Service Worker är översiktligt!
Fördjupning: Sätta upp en Service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker registrerad med scope:', registration.scope);
}).catch(function(error) {
console.log('Service Worker-registrering misslyckades:', error);
});
}
# Service worker
Steg 1: Registrera en Service Worker
Först måste du skapa din Service Worker-fil. Skapa en ny fil, sw.js , i roten av din webbapp
Registrera sw.js i din huvud JavaScript-fil:
# Service worker
Steg 2: Förstå Service Worker-livscykeln
Service Workers har ett specifikt livscykelstadium som är viktigt att
förstå för att effektivt implementera offline-funktionalitet:
1. Installation: Triggas när en Service Worker registreras för första
gången. Detta är ett bra tillfälle att cacha viktiga resurser
2. Aktivering: Sker efter installation. Här kan du hantera
inladdning av gammal cache.
3. Idle: Efter aktivering och mellan nätverksförfrågningar
4. Fetch/Message: När en nätverksförfrågan eller ett meddelande
inträffar.
const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/images/my-image.jpg'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
# Service worker
Steg 3: Cacha resurser för offline-användning
Inom din sw.js kan du lyssna på install -händelsen för att cacha
nödvändiga filer
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
# Service worker
Steg 4: Svara på förfrågningar från cachen
Med våra resurser cachade, kan vi nu använda Service Worker för
att svara på nätverksförfrågningar med vår cachenödvändiga filer
Service Worker
By sandra-larsson
