Vue Academy · Lesson

Push Notifications in Vue PWA

Push API, Notification API, VAPID keys, subscribing users, sending from server.

Push Notifications in Vue PWA is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Push Notifications in a PWA

Web Push lets your server send notifications to a user even when the app is closed. It combines the Notification API, the Push API, and a service worker, all built on the user's explicit permission.

Requesting Permission

You must ask for permission before subscribing. Notification.requestPermission() returns a promise resolving to "granted", "denied", or "default".

const permission = await Notification.requestPermission();
if (permission === "granted") {
  // proceed to subscribe
}

Trigger from a User Gesture

Browsers require the permission prompt to follow a user action like a button click. Never request on page load - it will be ignored or annoy users.

<button @click="enableNotifications">
  Enable notifications
</button>

Getting the Service Worker Registration

Push subscriptions live on the active service worker registration. Await navigator.serviceWorker.ready to get it.

const registration = await navigator.serviceWorker.ready;

The applicationServerKey

Push uses VAPID keys. The server holds the private key; the client subscribes with the public key, converted to a 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

Subscribe through the registration's pushManager. Set userVisibleOnly: true and pass the converted applicationServerKey.

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});

Why userVisibleOnly

userVisibleOnly: true promises that every push will show a visible notification. Browsers require it to prevent silent background tracking.

Sending the Subscription to Your Server

The subscription object contains the endpoint and keys the server needs. POST it to your backend to store for later sends.

await fetch("/api/subscribe", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription)
});

The Server Sends a Push

Your backend uses a Web Push library and the VAPID private key to push a payload to the stored endpoint.

// Node backend (web-push library)
webpush.sendNotification(
  subscription,
  JSON.stringify({ title: "Hello", body: "New message" })
);

Receiving Push in the Service Worker

The service worker handles the push event and calls showNotification to display it.

// 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"
    })
  );
});

Handling Notification Clicks

Respond to clicks with the notificationclick event to focus or open the app at the right page.

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/inbox"));
});

Quick Check

Why is userVisibleOnly: true required when subscribing to push?

Recap

Web Push starts with Notification.requestPermission() from a user gesture, then registration.pushManager.subscribe with userVisibleOnly: true and an applicationServerKey. Send the subscription to your server, which pushes payloads that the service worker receives in its push event and displays with showNotification.

Frequently asked questions

Is the “Push Notifications in Vue PWA” lesson free?

Yes — the full text of “Push Notifications in Vue PWA” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Push Notifications in Vue PWA”?

Push API, Notification API, VAPID keys, subscribing users, sending from server. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Push Notifications in Vue PWA” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy