Pushnotifikationer i Vue PWA
Push API, Notification API, VAPID-nøgler, abonnement af brugere og afsendelse fra serveren
Pushnotifikationer i Vue PWA er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Push-notifikationer i en PWA
Web Push lader din server sende notifikationer til en bruger, selv når appen er lukket. Det kombinerer Notification API, Push API og en service worker, som alle bygger på brugerens udtrykkelige tilladelse.
Anmodning om tilladelse
Du skal bede om tilladelse, før du opretter et abonnement. Notification.requestPermission() returnerer et promise, der løses til "granted", "denied" eller "default".
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Udløs fra en brugerhandling
Browsere kræver, at tilladelsesdialogen følger efter en brugerhandling som et klik på en knap. Anmod aldrig om tilladelse ved indlæsning af siden – det bliver ignoreret eller irriterer brugerne.
<button @click="enableNotifications">
Enable notifications
</button>Hent service worker-registreringen
Push-abonnementer ligger på den aktive service worker-registrering. Vent på navigator.serviceWorker.ready for at hente den.
const registration = await navigator.serviceWorker.ready;Feltet applicationServerKey
Push bruger VAPID-nøgler. Serveren opbevarer den private nøgle, mens klienten opretter abonnementet med den offentlige nøgle, som konverteres til en Uint8Array.
function urlBase64ToUint8Array(base64) {
const padding = "=".repeat((4 - base64.length % 4) % 4);
const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}pushManager.subscribe
Opret abonnementet via registreringens pushManager. Angiv userVisibleOnly: true, og giv den konverterede applicationServerKey som argument.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Hvorfor userVisibleOnly
userVisibleOnly: true garanterer, at hvert push viser en synlig notifikation. Browsere kræver det for at forhindre lydløs sporing i baggrunden.
Send abonnementet til din server
Abonnementsobjektet indeholder endpointet og de nøgler, serveren skal bruge. Send det med POST til din backend, så det kan gemmes til senere afsendelser.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Serveren sender et push
Din backend bruger et Web Push-bibliotek og den private VAPID-nøgle til at sende en payload til det gemte endpoint.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Modtag push i service workeren
Service workeren håndterer push-hændelsen og kalder showNotification for at vise notifikationen.
// service worker
self.addEventListener("push", (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/pwa-192.png"
})
);
});Håndtering af klik på notifikationer
Reagér på klik med notificationclick-hændelsen for at fokusere på eller åbne appen på den rigtige side.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Hurtigt tjek
Hvorfor kræves userVisibleOnly: true, når du opretter et push-abonnement?
Opsummering
Web Push begynder med Notification.requestPermission() fra en brugerhandling og fortsætter derefter med registration.pushManager.subscribe ved hjælp af userVisibleOnly: true og en applicationServerKey. Send abonnementet til din server, som sender payloads, service workeren modtager i sin push-hændelse og viser med showNotification.
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
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Pushnotifikationer i Vue PWA” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Pushnotifikationer i Vue PWA”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Pushnotifikationer i Vue PWA”?
Push API, Notification API, VAPID-nøgler, abonnement af brugere og afsendelse fra serveren Du øver dig i Vue 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å Vue Academy?
Der kræves ingen tidligere erfaring. Vue 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 “Pushnotifikationer i Vue PWA”?
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 Vue Academy-lektion?
Ja. Alle Vue 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
- Opsætning af vite-plugin-pwa
- Strategier for service workers
- Offline-understøttelse og baggrundssynkronisering
- Pushnotifikationer i Vue PWA