Push-notifikationer
Anmod om tilladelse, abonnér på push med Push API, modtag meddelelser i Service Worker, og vis notifikationer med showNotification.
Push-notifikationer er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvorfor pushmeddelelser?
Pushmeddelelser får brugerne tilbage, når appen ikke er åben — for eksempel ved beskednotifikationer, nyhedsopdateringer og påmindelser om forladte indkøbskurve. De drives af Service Worker'en, så de fungerer, selv når siden er lukket.
Push API + Notifications API
To browser-API'er arbejder sammen. Push API modtager beskeder fra en server via et push-abonnement. Notifications API viser beskeden til brugeren.
Anmodning om tilladelse
Bed brugeren om tilladelse, før du opretter et abonnement — gør det kun som svar på en tydelig brugerhandling (klik på en knap), ikke ved indlæsning af siden.
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}Push-abonnement
Opret abonnementet via den aktive registrering af service worker'en. Serverens offentlige VAPID-nøgle godkender abonnementet.
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}VAPID-nøgler
VAPID (Voluntary Application Server Identification)-nøgler identificerer din server over for push-tjenester (FCM, Mozilla osv.). Generér dem én gang, og gem den private nøgle på din server.
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...Push fra serveren
Brug npm-biblioteket web-push til at sende en pushmeddelelse til et gemt abonnement.
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));Håndtering af push i Service Worker
SW'en modtager push-hændelsen og viser en meddelelse.
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});Håndtering af klik på meddelelser
Åbn appen, eller giv den fokus, når brugeren klikker på en meddelelse.
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});Indstillinger for meddelelser
Tilpas: icon, badge (lille ikon i meddelelsesområdet), image (stort), actions (knapper), tag (erstat ældre meddelelser med samme tag), requireInteraction (bliv vist, indtil meddelelsen afvises), silent.
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});Opsigelse af abonnement
Giv brugerne mulighed for at framelde sig — kald pushSubscription.unsubscribe(), og fjern abonnementet fra din server.
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}Understøttelse på iOS
iOS 16.4+ understøtter Web Push, men kun for PWA'er, der er installeret på startskærmen. Enheder før iOS 16.4 og Safari på iPhone understøtter slet ikke web push.
Bedste praksis
1) Bed kun om tilladelse efter en tydelig brugerhandling. 2) Send meningsfulde og sjældne meddelelser. 3) Vis altid en meddelelse ved en push-hændelse (browsere kan tilbagekalde tilladelsen, hvis du ikke gør det). 4) Gør det nemt at framelde sig. 5) Test med alle tre push-tjenester (FCM, Mozilla, WindowsPush).
Almindelige faldgruber
Push mislykkes lydløst, hvis: userVisibleOnly er false (Chrome kræver true), VAPID-nøglerne ikke stemmer overens, abonnementet er udløbet (opret abonnement igen), eller der ikke vises en meddelelse ved push-hændelsen (browseren tilbagekalder tilladelsen).
Hurtigt tjek
Hvorfor skal enhver pushbesked resultere i en synlig meddelelse (med userVisibleOnly: true)?
Opsummering: Pushmeddelelser
Bed kun om tilladelse efter en brugerhandling. Opret abonnement via reg.pushManager.subscribe med den offentlige VAPID-nøgle. Serveren bruger web-push-biblioteket til at sende. SW'ens push-hændelse kalder showNotification. notificationclick åbner eller fokuserer din app. Tilpas icon, badge, image, actions og tag. Vis altid en meddelelse (userVisibleOnly: true er påkrævet). iOS 16.4+ understøtter det, men kun for PWA'er, der er installeret på startskærmen.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Push-notifikationer” gratis?
Ja — hele teksten til “Push-notifikationer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Push-notifikationer”?
Anmod om tilladelse, abonnér på push med Push API, modtag meddelelser i Service Worker, og vis notifikationer med showNotification. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Push-notifikationer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Webappens manifest
- Registrering og livscyklus for Service Worker
- Strategier til offlinecaching: CacheFirst og NetworkFirst
- Push-notifikationer