Natuurlijk! Hier is een stapsgewijze gids om een progressieve webapplicatie (PWA) te maken met Svelte, inclusief het configureren van service workers, offline functionaliteit en optimalisatie voor installatie op Android en iOS. 1. Basisopzet van je Svelte-project ------------------------------------ 1. Maak een nieuw Svelte-project aan (bijvoorbeeld met Vite): ```bash npm create vite@latest mijn-pwa -- --template svelte cd mijn-pwa npm install ``` 2. Installeer PWA-gerelateerde dependencies: ```bash npm install --save-dev @vite-pwa/svelte ``` 2. Configuratie van de Service Worker en PWA --------------------------------------------- Gebruik de Vite PWA-plugin om je PWA te configureren: 1. Installeer de plugin: ```bash npm install vite-plugin-pwa --save-dev ``` 2. Pas `vite.config.js` aan: ```js import { defineConfig } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte'; import { VitePWA } from 'vite-plugin-pwa'; export default defineConfig({ plugins: [ svelte(), VitePWA({ registerType: 'autoUpdate', injectRegister: 'auto', manifest: { name: 'Mijn PWA', short_name: 'MijnPWA', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#3367D6', icons: [ { src: 'icons/icon-192.png', sizes: '192x192', type: 'image/png' }, { src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png' } ] }, workbox: { runtimeCaching: [ { urlPattern: /^https:\/\/your-api-domain\.com\/.*$/, handler: 'NetworkFirst', options: { cacheName: 'api-cache' } } ] } }) ] }); ``` 3. Service Worker en offline functionaliteit --------------------------------------------- De plugin genereert automatisch een service worker die caching regelt. Voor extra offline functionaliteit: - Voeg een `offline.html` of fallback pagina toe. - Configureer `workbox` in de plugin voor precache en runtime caching van belangrijke assets en API's. Bijvoorbeeld, voeg in het manifest onder `icons` je iconen toe en zorg dat je assets correct worden gecached. 4. Manifest en installatie voor verschillende apparaten ------------------------------------------------------- Maak een `manifest.json` of laat de plugin dat genereren, voeg het toe aan je `index.html`: ```html <link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#3367D6" /> ``` Voor iOS moet je extra meta-tags toevoegen: ```html <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <link rel="apple-touch-icon" href="/icons/icon-192.png" /> ``` Voor Android wordt de installatie via het manifest geregeld. 5. PWA optimaliseren voor installatie op Android en iOS ------------------------------------------------------- - **Android:** De meeste functionaliteiten worden automatisch ondersteund door Chrome. Zorg dat je manifest en icons correct zijn ingesteld. - **iOS:** Ondersteuning is beperkter. Voeg de genoemde meta-tags toe en test op verschillende iOS-versies. iOS ondersteunt geen service workers volledig, maar recentere versies bieden betere ondersteuning. 6. Test je PWA -------------- - Gebruik Chrome DevTools (Device Mode) om de installatiemogelijkheden te testen. - Gebruik online tools zoals Lighthouse (via Chrome DevTools) om de PWA-kwalificaties te controleren. 7. Extra tips ------------- - Zorg dat je app een 'Add to Homescreen' prompt toont op geschikte momenten. - Gebruik Svelte's reactive variables om offline status te detecteren en gebruikers te informeren. - Overweeg het gebruik van libraries zoals `workbox` voor geavanceerdere cachingstrategieën. Door deze stappen te volgen, heb je een Svelte-gebaseerde PWA met service workers, offline functionaliteit en installatie-opties voor Android en iOS.

Hier is een stapsgewijze handleiding voor het maken van een PWA met Svelte: ### 1. Svelte Project Opzetten ```bash npm create vite@latest mijn-pwa --template svelte cd mijn-pwa npm install ``` ### 2. PWA Configuratie Installeer de benodigde packages: ```bash npm install -D @sveltejs/pwa npm install workbox-precaching workbox-routing workbox-strategies ``` ### 3. Service Worker Configuratie Maak een `src/sw.js` bestand: ```javascript import { precacheAndRoute } from 'workbox-precaching'; import { registerRoute } from 'workbox-routing'; import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies'; // Precache alle assets precacheAndRoute(self.__WB_MANIFEST); // Cache strategie voor HTML registerRoute( ({ request }) => request.mode === 'navigate', new StaleWhileRevalidate({ cacheName: 'html-cache' }) ); // Cache strategie voor CSS en JS registerRoute( ({ request }) => request.destination === 'style' || request.destination === 'script', new StaleWhileRevalidate({ cacheName: 'static-resources' }) ); // Cache strategie voor afbeeldingen registerRoute( ({ request }) => request.destination === 'image', new CacheFirst({ cacheName: 'images', plugins: [ new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60 // 30 dagen }) ] }) ); ``` ### 4. Svelte Configuratie Update `svelte.config.js`: ```javascript import { vitePreprocess } from '@sveltejs/kit/vite'; import adapter from '@sveltejs/adapter-auto'; import { VitePWA } from 'vite-plugin-pwa'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: adapter() }, plugins: [ VitePWA({ strategies: 'injectManifest', srcDir: 'src', filename: 'sw.js', registerType: 'autoUpdate', manifest: { name: 'Mijn PWA', short_name: 'PWA', description: 'Mijn progressieve webapp', theme_color: '#ffffff', background_color: '#ffffff', display: 'standalone', orientation: 'portrait', scope: '/', start_url: '/', icons: [ { src: 'icons/icon-192x192.png', sizes: '192x192', type: 'image/png' }, { src: 'icons/icon-512x512.png', sizes: '512x512', type: 'image/png' } ] } }) ], preprocess: vitePreprocess() }; export default config; ``` ### 5. Offline Functionaliteit Voeg offline detectie toe in `src/app.html`: ```html <script> // Offline status monitoring if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); }); } // Offline/online events window.addEventListener('online', () => { console.log('App is online'); }); window.addEventListener('offline', () => { console.log('App is offline'); }); </script> ``` ### 6. Manifest Icons Maak verschillende iconen (minimaal 192x192 en 512x512 pixels) en plaats ze in de `static/icons` map. ### 7. Installatie Promotie Voeg een installatieprompt toe in je hoofdcomponent: ```svelte <script> let deferredPrompt; let showInstallButton = false; if (typeof window !== 'undefined') { window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; showInstallButton = true; }); } function installApp() { if (deferredPrompt) { deferredPrompt.prompt(); deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('Gebruiker heeft de PWA geïnstalleerd'); } deferredPrompt = null; showInstallButton = false; }); } } </script> {#if showInstallButton} <button on:click={installApp}>Installeer App</button> {/if} ``` ### 8. iOS Specifieke Configuratie Voeg deze meta tags toe aan `src/app.html`: ```html <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-title" content="Mijn PWA"> <link rel="apple-touch-icon" href="icons/icon-192x192.png"> ``` ### 9. Build en Test ```bash npm run build npm run preview ``` ### Belangrijke Punten voor Platform-specifieke Installatie: **Android:** - Automatische installatieprompt bij bezoek - Vereist HTTPS - Moet voldoen aan PWA-criteria **iOS:** - Gebruiker moet "Delen" > "Voeg toe aan beginscherm" gebruiken - Safari ondersteuning sinds iOS 11.3 - Specifieke meta tags nodig ### Optimalisatie Tips: 1. Gebruik lazy loading voor componenten 2. Optimaliseer afbeeldingen 3. Minimaliseer CSS en JavaScript 4. Test offline functionaliteit grondig 5. Implementeer caching strategieën op maat Deze configuratie zorgt voor een volledig functionele PWA met offline ondersteuning en installatiemogelijkheden op zowel Android als iOS.