JavaScript PushManager subscribe() Method

What You’ll Learn

The subscribe() method on PushManager creates a push subscription and returns a PushSubscription with endpoint and encryption keys. Learn the MDN serviceWorker.ready pattern, userVisibleOnly and VAPID applicationServerKey, user-gesture best practices, and syncing to your server—with five examples and try-it labs.

Introduction

Web push lets your server send messages to users even when your PWA is closed. To enable that, the browser needs a PushSubscription—an endpoint URL plus encryption keys your server uses to deliver encrypted payloads.

pushManager.subscribe() requests that subscription from the push service. MDN marks it Baseline Widely available (since March 2023). It may prompt the user for notification permission and should be called after navigator.serviceWorker.ready, ideally from a button click.

Understanding subscribe()

An instance method on PushManager that subscribes to a push service and returns subscription details.

• Parameters — optional options object.
• userVisibleOnly — must be true in Chrome and Edge.
• applicationServerKey — VAPID public key (Uint8Array or base64).
• Returns — Promise<PushSubscription>.
• Creates or reuses — new subscription if none exists for this SW.
• User gesture — call from button click per MDN best practice.
• Secure context — HTTPS or localhost required.
• Available in Web Workers per MDN.

📝 Syntax

pushManager.subscribe(options)

Return value

A Promise resolving to a PushSubscription object with endpoint and key material for your push server.

MDN pattern

const registration = await navigator.serviceWorker.ready;

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

console.log(subscription.endpoint);

⚖️ subscribe() vs Related APIs

Examples Gallery

Examples follow MDN subscribe() patterns. Use View Output or Try It Yourself.

navigator.serviceWorker.ready.then((registration) => {
  const options = {
    userVisibleOnly: true,
    applicationServerKey,
  };

  registration.pushManager.subscribe(options).then(
    (pushSubscription) => {
      console.log(pushSubscription.endpoint);
      // Send pushSubscription to your application server
    },
    (error) => {
      console.error(error);
    }
  );
});

https://fcm.googleapis.com/fcm/send/…

btn.addEventListener("click", async () => {
  const registration = await navigator.serviceWorker.ready;

  try {
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: vapidKey,
    });
    console.log("Subscribed:", subscription.endpoint);
  } catch (error) {
    console.error("Subscribe failed:", error);
  }
});

Subscribed: https://fcm.googleapis.com/fcm/send/…

function urlBase64ToUint8Array(base64String) {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
  const raw = atob(base64);
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

const VAPID_PUBLIC_KEY = "BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U";

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

PushSubscription with VAPID-authenticated endpoint

const registration = await navigator.serviceWorker.ready;
const pm = registration.pushManager;

let subscription = await pm.getSubscription();

if (!subscription) {
  subscription = await pm.subscribe({
    userVisibleOnly: true,
    applicationServerKey: vapidKey,
  });
}

console.log("Active subscription:", subscription.endpoint);

Active subscription: https://fcm.googleapis.com/fcm/send/…

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

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

console.log("Subscription synced to server");

POST /api/push-subscription — subscription synced

🚀 Common Use Cases

• Enabling push notifications when the user clicks “Subscribe”.
• Creating a PushSubscription for a new PWA install.
• Re-subscribing after the user clears site data.
• Pairing with permissionState() to gate the subscribe button.
• Replacing deprecated register() in legacy migrations.
• Syncing subscription JSON to your backend for server-side push.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since March 2023).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• userVisibleOnly: true required in Chrome and Edge.
• Secure context — HTTPS or localhost.
• User gesture — call from click handler, not on page load.
• Related learning: getSubscription(), permissionState(), PushEvent.data, navigator.serviceWorker, JavaScript hub.

💡 Best Practices