Notifications push dans une PWA Vue
Push API, Notification API, clés VAPID, abonnement des utilisateurs et envoi depuis le serveur
Notifications push dans une PWA Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Notifications push dans une PWA
Web Push permet à votre serveur d’envoyer des notifications à un utilisateur même lorsque l’application est fermée. Cette technologie associe l’API Notification, l’API Push et un service worker, le tout reposant sur l’autorisation explicite de l’utilisateur.
Demander l’autorisation
Vous devez demander l’autorisation avant de vous abonner. Notification.requestPermission() renvoie une promesse qui se résout par « granted », « denied » ou « default ».
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Déclencher avec une action de l’utilisateur
Les navigateurs exigent que la demande d’autorisation fasse suite à une action de l’utilisateur, comme un clic sur un bouton. Ne la demandez jamais au chargement de la page : elle sera ignorée ou risque d’agacer les utilisateurs.
<button @click="enableNotifications">
Enable notifications
</button>Récupérer l’enregistrement du service worker
Les abonnements push sont associés à l’enregistrement actif du service worker. Attendez navigator.serviceWorker.ready pour le récupérer.
const registration = await navigator.serviceWorker.ready;The applicationServerKey
Push utilise des clés VAPID. Le serveur conserve la clé privée ; le client s’abonne avec la clé publique, convertie 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
Abonnez-vous via le pushManager de l’enregistrement. Définissez userVisibleOnly: true et transmettez la valeur applicationServerKey convertie.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Pourquoi userVisibleOnly
userVisibleOnly: true garantit que chaque notification push affichera une notification visible. Les navigateurs l’exigent pour empêcher le suivi silencieux en arrière-plan.
Envoyer l’abonnement à votre serveur
L’objet d’abonnement contient le point de terminaison et les clés dont le serveur a besoin. Envoyez-le avec POST à votre serveur dorsal afin de le conserver pour des envois ultérieurs.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Le serveur envoie une notification push
Votre serveur utilise une bibliothèque Web Push et la clé privée VAPID pour envoyer une charge utile au point de terminaison enregistré.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Recevoir une notification push dans le service worker
Le service worker gère l’événement push et appelle showNotification pour l’afficher.
// 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"
})
);
});Gérer les clics sur les notifications
Réagissez aux clics avec l’événement notificationclick afin de donner le focus à l’application ou de l’ouvrir sur la page appropriée.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Vérification rapide
Pourquoi userVisibleOnly: true est-il requis lors d’un abonnement push ?
Récapitulatif
Web Push commence par Notification.requestPermission(), déclenché par une action de l’utilisateur, puis se poursuit avec registration.pushManager.subscribe, userVisibleOnly: true et une applicationServerKey. Envoyez l’abonnement à votre serveur, qui transmet les charges utiles que le service worker reçoit dans son événement push et affiche avec showNotification.
Questions Fréquemment Posées
La leçon « Notifications push dans une PWA Vue » est-elle gratuite ?
Oui — le texte complet de « Notifications push dans une PWA Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Notifications push dans une PWA Vue » ?
Push API, Notification API, clés VAPID, abonnement des utilisateurs et envoi depuis le serveur Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Notifications push dans une PWA Vue » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer vite-plugin-pwa
- Stratégies de Service Worker
- Prise en charge hors ligne et synchronisation en arrière-plan
- Notifications push dans une PWA Vue