Houd me gids in het implementeren van een service worker voor offline mogelijkheden in mijn Svelte applicatie
description
Door een service worker te implementeren, kun je de gebruikerservaring aanzienlijk verbeteren door je applicatie offline te laten functioneren, waardoor betrokkenheid en toegankelijkheid toenemen.
prompt
try_prompt
Help me begrijpen hoe ik een service worker kan instellen in mijn Svelte applicatie om offline mogelijkheden mogelijk te maken. Beschrijf de stappen die nodig zijn om assets te cachen, fetch-evene ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een stapsgewijze uitleg om een service worker te implementeren in je Svelte-app om offline functionaliteit mogelijk te maken, met focus op het cachen van statische assets:
1. Maak een service worker bestand aan
- Voeg een nieuw bestand toe in je project, bijvoorbeeld `service-worker.js`.
- Dit bestand gaat de caching en fetch-afhandeling regelen.
2. Definieer cache namen en assets
In `service-worker.js` kun je variabelen instellen voor cache namen en de lijst van assets die je wilt cachen:
```js
const CACHE_NAME = 'mijn-svelte-app-cache-v1';
const ASSETS_TO_CACHE = [
'/',
'/index.html',
'/build/bundle.css',
'/build/bundle.js',
// Voeg hier andere statische assets toe zoals afbeeldingen, fonts, etc.
];
```
3. Instellen van installatie event
Tijdens de installatie van de service worker cache je de assets:
```js
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(ASSETS_TO_CACHE))
);
});
```
4. Afhandelen van fetch events
Voor elke fetch vraag, probeer eerst uit de cache te halen, en indien niet aanwezig, haal het van het netwerk:
```js
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
})
);
});
```
5. Cache bij activatie en updates
Verwijder oude caches bij een nieuwe versie:
```js
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
```
6. Service worker registreren in je Svelte app
In je hoofd JavaScript-bestand (bijvoorbeeld `main.js`), registreer je de service worker:
```js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('Service Worker geregistreerd:', registration);
})
.catch(error => {
console.log('Registratie Service Worker mislukt:', error);
});
});
}
```
7. Testen en ontwikkelen
- Start je app en controleer of de service worker actief is via de browser devtools onder het tabblad ‘Application’ > ‘Service Workers’.
- Controleer of assets correct worden gecachet en dat offline werken mogelijk is door je netwerk uit te schakelen en je app te testen.
Door deze stappen te volgen, cache je de belangrijkste statische assets en zorg je dat je Svelte-app offline kan blijven functioneren. Je kunt later nog uitbreiden met dynamische cache, offline fallback pagina’s, en meer geavanceerde caching strategieën.
provider: deepseek
model: deepseek-chat
Hier is een stapsgewijze handleiding voor het instellen van een service worker in je Svelte-applicatie voor offline functionaliteit:
## 1. Service Worker Bestand Aanmaken
Maak een bestand `src/service-worker.js` aan met de volgende inhoud:
```javascript
const CACHE_NAME = 'mijn-svelte-app-v1';
const STATIC_ASSETS = [
'/',
'/index.html',
'/global.css',
'/build/bundle.js',
'/build/bundle.css'
];
// Installatie-event: cache statische assets
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Cache geopend');
return cache.addAll(STATIC_ASSETS);
})
);
});
// Fetch-event: serve vanuit cache wanneer offline
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// Return cached version of fallback naar network
return response || fetch(event.request);
})
);
});
// Activate-event: oude caches opruimen
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (cacheName !== CACHE_NAME) {
console.log('Oude cache verwijderd:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
```
## 2. Service Worker Registreren
Voeg in je `src/main.js` of `src/app.js` de volgende code toe:
```javascript
// Service worker registreren
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Service Worker geregistreerd:', registration);
})
.catch((error) => {
console.log('Service Worker registratie mislukt:', error);
});
});
}
```
## 3. Build Configuratie Aanpassen
Voor SvelteKit (indien gebruikt), voeg toe in `vite.config.js`:
```javascript
import { sveltekit } from '@sveltejs/kit/vite';
export default {
plugins: [sveltekit()],
build: {
target: 'es2015' // Vereist voor service worker ondersteuning
}
};
```
## 4. Static Assets Lijst Bijwerken
Pas de `STATIC_ASSETS` array aan in je service worker om je specifieke bestanden te includeren:
```javascript
const STATIC_ASSETS = [
'/',
'/index.html',
'/global.css',
'/build/bundle.js',
'/build/bundle.css',
// Voeg hier je specifieke assets toe:
'/images/logo.png',
'/fonts/custom-font.woff2',
'/icons/icon-192.png',
'/icons/icon-512.png'
];
```
## 5. Cache Strategieën (Optioneel)
Voor meer geavanceerde caching, kun je de fetch-event uitbreiden:
```javascript
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// Cache-first strategie
if (response) {
return response;
}
// Network fallback
return fetch(event.request)
.then((response) => {
// Cache nieuwe requests
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then((cache) => {
cache.put(event.request, responseToCache);
});
return response;
});
})
);
});
```
## 6. Testen
1. Bouw je applicatie: `npm run build`
2. Serveer de build map met een lokale server
3. Open Chrome DevTools → Application → Service Workers
4. Simuleer offline modus en test je app
## Belangrijke Opmerkingen:
- Service workers werken alleen via HTTPS (behalve localhost)
- Wijzig de cache naam bij updates om nieuwe assets te forceren
- Test grondig op verschillende browsers
- Houd rekening met cache grootte limieten
Je app zal nu basis offline functionaliteit hebben waarbij statische assets beschikbaar blijven zonder internetverbinding!