Pushnotiser i Vue PWA
Push API, Notification API, VAPID-nycklar, prenumerera användare och skicka från servern.
Pushnotiser i Vue PWA är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Pushnotiser i en PWA
Web Push låter servern skicka notiser till en användare även när appen är stängd. Det kombinerar Notification API, Push API och en service worker, och allt bygger på användarens uttryckliga behörighet.
Begära behörighet
Ni måste begära behörighet innan ni prenumererar. Notification.requestPermission() returnerar ett löfte som uppfylls med värdet "granted", "denied" eller "default".
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Utlösa med en användaråtgärd
Webbläsare kräver att dialogrutan för behörighet följer efter en användaråtgärd, till exempel ett knapptryck. Begär aldrig behörighet när sidan laddas – det ignoreras eller irriterar användarna.
<button @click="enableNotifications">
Enable notifications
</button>Hämta service worker-registreringen
Push-prenumerationer hör till den aktiva service worker-registreringen. Vänta på navigator.serviceWorker.ready för att hämta den.
const registration = await navigator.serviceWorker.ready;applicationServerKey
Push använder VAPID-nycklar. Servern lagrar den privata nyckeln, medan klienten prenumererar med den offentliga nyckeln, konverterad till 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
Prenumerera via registreringens pushManager. Ange userVisibleOnly: true och skicka med den konverterade applicationServerKey.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Varför userVisibleOnly
userVisibleOnly: true lovar att varje push ska visa en synlig notis. Webbläsare kräver detta för att förhindra tyst spårning i bakgrunden.
Skicka prenumerationen till servern
Prenumerationsobjektet innehåller den endpoint och de nycklar som servern behöver. Skicka det med POST till backend för att lagra det inför senare utskick.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Servern skickar en pushnotis
Er backend använder ett Web Push-bibliotek och den privata VAPID-nyckeln för att skicka en nyttolast till den lagrade endpointen.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Ta emot pushnotiser i service workern
Service workern hanterar händelsen push och anropar showNotification för att visa notisen.
// 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"
})
);
});Hantera klick på notiser
Svara på klick med händelsen notificationclick för att fokusera på eller öppna appen på rätt sida.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Snabb kontroll
Varför krävs userVisibleOnly: true när ni prenumererar på push?
Sammanfattning
Web Push börjar med Notification.requestPermission() från en användaråtgärd och fortsätter sedan med registration.pushManager.subscribe med userVisibleOnly: true och en applicationServerKey. Skicka prenumerationen till servern, som skickar nyttolaster som service workern tar emot i sin push-händelse och visar med showNotification.
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
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Pushnotiser i Vue PWA” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Pushnotiser i Vue PWA”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Pushnotiser i Vue PWA”?
Push API, Notification API, VAPID-nycklar, prenumerera användare och skicka från servern. Ni övar på Vue 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 Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue 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 4 av 4.
Hur lång tid tar lektionen ”Pushnotiser i Vue PWA”?
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 Vue Academy-lektionen?
Ja. Varje Vue 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
- Konfigurera vite-plugin-pwa
- Strategier för service workers
- Offline-stöd och bakgrundssynkronisering
- Pushnotiser i Vue PWA