JavaScript PushManager getSubscription() Method

What You’ll Learn

The getSubscription() method on PushManager retrieves an existing push subscription—or null if the user has not subscribed. Learn the MDN serviceWorker.ready pattern, updating subscribe/unsubscribe UI, syncing PushSubscription to your server, and async/await—with five examples and try-it labs.

Introduction

Web push needs a PushSubscription—endpoint URL plus encryption keys—before your server can send messages. Users may subscribe once and return later. On each visit you need to know: is there already a subscription?

registration.pushManager.getSubscription() answers that. MDN: it returns a Promise resolving to a PushSubscription or null. Use it on page load to restore UI state and keep your backend in sync.

Understanding getSubscription()

An instance method on PushManager that reads the current subscription without creating a new one.

• Parameters — none.
• Returns — Promise<PushSubscription | null>.
• PushSubscription — includes endpoint and keys via getKey().
• null — no subscription exists for this registration.
• vs subscribe() — subscribe() creates; getSubscription() only reads.
• Secure context — HTTPS or localhost required.
• Baseline Widely available on MDN (since March 2023).

📝 Syntax

pushManager.getSubscription()

Return value

A Promise that resolves to a PushSubscription object, or null if no subscription exists.

Typical pattern (MDN)

navigator.serviceWorker.ready.then((registration) => {
  registration.pushManager
    .getSubscription()
    .then((subscription) => {
      if (!subscription) {
        // Not subscribed — show enable UI
        return;
      }
      // Subscribed — sync server, update UI
      sendSubscriptionToServer(subscription);
    });
});

⚖️ getSubscription() vs Related APIs

Examples Gallery

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

navigator.serviceWorker.ready.then((registration) => {
  registration.pushManager
    .getSubscription()
    .then((subscription) => {
      const pushButton = document.querySelector(".js-push-button");
      pushButton.disabled = false;

      if (!subscription) {
        // Not subscribed — show enable UI
        return;
      }

      sendSubscriptionToServer(subscription);
      pushButton.textContent = "Disable Push Messages";
    })
    .catch((err) => {
      console.error(`Error during getSubscription(): ${err}`);
    });
});

null — show "Enable Push" UI

const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.getSubscription();

if (subscription === null) {
  console.log("User is not subscribed to push");
} else {
  console.log("User is subscribed");
}

User is not subscribed to push

async function checkPushSubscription() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.getSubscription();
  return subscription !== null;
}

const isSubscribed = await checkPushSubscription();
console.log(isSubscribed); // false until user subscribes

false

const subscription = await registration.pushManager.getSubscription();

if (subscription) {
  console.log(subscription.endpoint);
  // e.g. "https://fcm.googleapis.com/fcm/send/…"
}

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

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

const sub = await registration.pushManager.getSubscription();
if (sub) {
  await sendSubscriptionToServer(sub);
}

POST /api/push-subscription — subscription synced

🚀 Common Use Cases

• On page load, show “Enable push” vs “Disable push” button text.
• Re-sync PushSubscription to your backend on every visit.
• Skip subscribe() if user is already subscribed.
• Debug push setup by logging endpoint in DevTools.
• Gate push features behind getSubscription() !== null.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since March 2023).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only — does not prompt the user or create subscriptions.
• Secure context — HTTPS or localhost.
• Available in Web Workers per MDN.
• Related learning: supportedContentEncodings, PushEvent.data, navigator.serviceWorker, JavaScript hub.

💡 Best Practices