Vue Academy · Lesson

Push Notifications in Vue PWA

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

Lesson 4 of 413 steps

Push Notifications in Vue PWA is a free Vue Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Vue Academy learning path, including “Push Notifications in Vue PWA”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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