Het webappmanifest
Schrijf een manifest.json met name, icons, start_url, display en theme_color, zodat browsers een prompt voor Toevoegen aan startscherm kunnen aanbieden.
Het webappmanifest is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat is een PWA?
Een Progressive Web App is een website met de mogelijkheden van een native app: installatie op het startscherm, offline werken en pushmeldingen ontvangen. De drie basisonderdelen zijn een Web App Manifest, een service worker en HTTPS.
Het manifestbestand
manifest.json (of .webmanifest) is een JSON-bestand met de metagegevens van je app. Browsers lezen dit om 'Aan startscherm toevoegen' mogelijk te maken en je app te starten zoals een native app.
Basismanifest
Een minimaal manifest bevat name, icons, start_url en de weergavemodus.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Het manifest koppelen
Koppel het vanuit je HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">display-modi
"display" bepaalt welke browserinterface rond het appvenster zichtbaar is: "standalone" (geen browserinterface, werkt als een app), "fullscreen" (volledig scherm, verbergt de statusbalk), "minimal-ui" (enkele browserknoppen), "browser" (normaal tabblad).
Pictogrammen — meerdere formaten
Lever pictogrammen in meerdere formaten aan. Moderne Android-apparaten verwachten 192 en 512; Apple vereist extra formaten. Gebruik "purpose": "maskable" voor aanpasbare Android-pictogrammen.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Apple-specifieke metatags
iOS ondersteunt het manifest niet volledig. Voeg Apple-specifieke metatags toe voor de functie om de app op iOS aan het startscherm toe te voegen.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<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="Notes">Installatieprompt
Browsers activeren een beforeinstallprompt-gebeurtenis wanneer aan de voorwaarden is voldaan (manifest + service worker + HTTPS + gebruikersinteractie). Je kunt de gebeurtenis uitstellen en vanuit je eigen interface activeren.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Snelkoppelingen (app-snelkoppelingen)
In het manifest kun je snelkoppelingen opgeven die verschijnen wanneer je lang op het pictogram van de geïnstalleerde app drukt.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Categorieën en schermafbeeldingen
Voeg categories en screenshots toe voor een uitgebreidere installatie-interface in Chrome voor Android en Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Het manifest testen
Open DevTools → Applicatie → Manifest. Chrome toont de uitgelezen manifestvelden, voorbeelden van pictogrammen en waarschuwingen (ontbrekende pictogrammen, laag contrast enzovoort).
Frameworks maken dit eenvoudig
Next.js: plaats manifest.webmanifest in public/. Nuxt: installeer de module @vite-pwa/nuxt. Vite: vite-plugin-pwa maakt automatisch een manifest en service worker.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Korte controle
Welke waarde van display in een Web App Manifest zorgt ervoor dat de geïnstalleerde PWA zonder browserinterface opent, zoals een native app?
Samenvatting: Web App Manifest
JSON-bestand met de metagegevens van een PWA. Neem name, short_name, start_url, display, theme_color en icons op (meerdere formaten + maskable). Koppel het in HTML met rel=manifest. iOS vereist Apple-specifieke metatags. Gebruik de beforeinstallprompt-gebeurtenis voor een aangepaste installatie-interface. Voeg shortcuts en screenshots toe voor een uitgebreidere installatie. Frameworks (Vite PWA, Next, Nuxt PWA) automatiseren de aanmaak.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Het webappmanifest” gratis?
Ja — de volledige tekst van “Het webappmanifest” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Het webappmanifest”?
Schrijf een manifest.json met name, icons, start_url, display en theme_color, zodat browsers een prompt voor Toevoegen aan startscherm kunnen aanbieden. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Het webappmanifest”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Het webappmanifest
- Registratie en levenscyclus van een Service Worker
- Offlinecachingstrategieën: CacheFirst en NetworkFirst
- Pushmeldingen