Notifiche push in una PWA Vue
Push API, Notification API, chiavi VAPID, sottoscrizione degli utenti, invio dal server.
Notifiche push in una PWA Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Notifiche push in una PWA
Web Push consente al server di inviare notifiche a un utente anche quando l'app è chiusa. Combina la Notification API, la Push API e un service worker, il tutto basato sull'autorizzazione esplicita dell'utente.
Richiedere l'autorizzazione
È necessario chiedere l'autorizzazione prima di effettuare la sottoscrizione. Notification.requestPermission() restituisce una promise che si risolve in "granted", "denied" o "default".
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Attivare da un gesto dell'utente
I browser richiedono che la richiesta di autorizzazione segua un'azione dell'utente, come il clic su un pulsante. Non richieda mai l'autorizzazione al caricamento della pagina: la richiesta verrà ignorata oppure infastidirà gli utenti.
<button @click="enableNotifications">
Enable notifications
</button>Ottenere la registrazione del service worker
Le sottoscrizioni push vengono associate alla registrazione attiva del service worker. Attenda navigator.serviceWorker.ready per ottenerla.
const registration = await navigator.serviceWorker.ready;The applicationServerKey
Il push utilizza chiavi VAPID. Il server conserva la chiave privata; il client effettua la sottoscrizione con la chiave pubblica, convertita in una 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
Effettui la sottoscrizione tramite il pushManager della registrazione. Imposti userVisibleOnly: true e passi il valore applicationServerKey convertito.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Perché userVisibleOnly
userVisibleOnly: true garantisce che ogni push mostri una notifica visibile. I browser lo richiedono per impedire il tracciamento silenzioso in background.
Inviare la sottoscrizione al server
L'oggetto della sottoscrizione contiene l'endpoint e le chiavi di cui il server ha bisogno. Lo invii al backend con una richiesta POST per archiviarlo e utilizzarlo negli invii successivi.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Il server invia una notifica push
Il backend utilizza una libreria Web Push e la chiave privata VAPID per inviare un payload all'endpoint archiviato.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Ricevere una notifica push nel service worker
Il service worker gestisce l'evento push e chiama showNotification per visualizzarlo.
// 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"
})
);
});Gestire i clic sulle notifiche
Risponda ai clic con l'evento notificationclick per portare l'app in primo piano o aprirla nella pagina corretta.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Verifica rapida
Perché userVisibleOnly: true è obbligatorio quando si effettua una sottoscrizione push?
Riepilogo
Web Push inizia con Notification.requestPermission() eseguito in risposta a un gesto dell'utente, quindi prosegue con registration.pushManager.subscribe usando userVisibleOnly: true e una applicationServerKey. Invii la sottoscrizione al server, che trasmette payload ricevuti dal service worker nel suo evento push e visualizzati con showNotification.
Domande Frequenti
La lezione «Notifiche push in una PWA Vue» è gratuita?
Sì — il testo completo di «Notifiche push in una PWA Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Notifiche push in una PWA Vue»?
Push API, Notification API, chiavi VAPID, sottoscrizione degli utenti, invio dal server. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Notifiche push in una PWA Vue»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di vite-plugin-pwa
- Strategie per i service worker
- Supporto offline e sincronizzazione in background
- Notifiche push in una PWA Vue