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!

Läs mer här om du vill :-)

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