Webbappens manifest
Skriv ett manifest.json med name, icons, start_url, display och theme_color så att webbläsare kan erbjuda alternativet Lägg till på startskärmen.
Webbappens manifest är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är en PWA?
En Progressive Web App är en webbplats med funktioner som i en native-app: den kan installeras på startskärmen, fungerar offline och kan ta emot pushnotiser. De tre grunddelarna är ett Web App Manifest, en Service Worker och HTTPS.
Manifestfilen
manifest.json (eller .webmanifest) är en JSON-fil som beskriver appens metadata. Webbläsare läser den för att aktivera ”Lägg till på startskärmen” och starta appen som en native-app.
Grundläggande manifest
Ett minimalt manifest innehåller name, icons, start_url och display-läge.
// 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" }
]
}Länka manifestet
Länka det från HTML-elementet <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">display-lägen
"display" styr appfönstrets webbläsargränssnitt: "standalone" (inget webbläsargränssnitt, app-liknande), "fullscreen" (uppslukande, döljer statusfältet), "minimal-ui" (vissa webbläsarkontroller), "browser" (vanlig flik).
Ikoner – flera storlekar
Ange ikoner i flera storlekar. Moderna Android-enheter vill ha 192 och 512; Apple behöver ytterligare storlekar. Använd "purpose": "maskable" för anpassningsbara Android-ikoner.
"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-specifika taggar
iOS har inte fullständigt stöd för manifestet. Lägg till Apple-specifika meta-taggar för iOS-funktionen ”Lägg till på hemskärmen”.
<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">Installationsprompt
Webbläsare utlöser händelsen beforeinstallprompt när kriterierna är uppfyllda (manifest + service worker + HTTPS + användarengagemang). Ni kan skjuta upp den och utlösa den från ert eget gränssnitt.
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;
}Genvägar (App Shortcuts)
Manifestet kan deklarera genvägar som visas när användaren trycker länge på ikonen för den installerade appen.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Kategorier och skärmbilder
Lägg till categories och screenshots för ett mer informativt installationsgränssnitt i Chrome på Android och i 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" }
]Testa manifestet
Öppna DevTools → Application → Manifest. Chrome visar tolkade manifestfält, förhandsvisningar av ikoner och varningar (saknade ikoner, låg kontrast och så vidare).
Ramverk förenklar detta
Next.js: lägg manifest.webmanifest i public/. Nuxt: installera modulen @vite-pwa/nuxt. Vite: vite-plugin-pwa genererar automatiskt manifest och 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' }]
}
})]
};Snabbkontroll
Vilket värde för display i ett Web App Manifest gör att en installerad PWA öppnas utan något webbläsargränssnitt, som en native-app?
Sammanfattning: Web App Manifest
En JSON-fil som beskriver PWA:ns metadata. Inkludera name, short_name, start_url, display, theme_color och icons (flera storlekar + maskable). Länka manifestet i HTML med rel=manifest. iOS behöver Apple-specifika meta-taggar. Händelsen beforeinstallprompt kan användas för ett anpassat installationsgränssnitt. shortcuts och screenshots ger en mer informativ installation. Ramverk (Vite PWA, Next, Nuxt PWA) automatiserar genereringen.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Webbappens manifest” gratis?
Ja – hela texten till ”Webbappens manifest” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Webbappens manifest”?
Skriv ett manifest.json med name, icons, start_url, display och theme_color så att webbläsare kan erbjuda alternativet Lägg till på startskärmen. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Webbappens manifest”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Webbappens manifest
- Registrering och livscykel för Service Worker
- Strategier för offlinecachning: CacheFirst och NetworkFirst
- Pushnotiser