JavaScript PushManager hasPermission() Method

What You’ll Learn

PushManager.hasPermission() is a deprecated, non-standard instance method that returned push permission as granted, denied, or default. Learn what it did, why MDN replaced it with permissionState(), how to feature-detect it, and modern alternatives—with five examples and try-it labs.

Introduction

Before subscribing to push, your app needs to know whether the user granted permission. Early Push API drafts exposed hasPermission() on PushManager for that check.

MDN now marks it deprecated and non-standard. The standardized replacement is permissionState(), which returns "prompt", "denied", or "granted". This tutorial explains the legacy method so you can read old code and migrate safely.

Understanding hasPermission()

A legacy instance method on PushManager that queried push permission state asynchronously.

• Parameters — none.
• Returns — Promise<PushPermissionStatus>.
• granted — push permission allowed.
• denied — push permission blocked.
• default — user has not decided yet.
• Superseded by — permissionState() (Baseline Widely available).
• Available in Web Workers per MDN (where still supported).

📝 Syntax

pushManager.hasPermission()

Return value

A Promise resolving to "granted", "denied", or "default".

Legacy pattern

// Legacy — do not use in new code
const registration = await navigator.serviceWorker.ready;

if (registration.pushManager.hasPermission) {
  const status = await registration.pushManager.hasPermission();
  console.log(status); // "granted" | "denied" | "default"
}

⚖️ hasPermission() vs Modern APIs

Examples Gallery

Examples explain legacy hasPermission() and show modern replacements. Use View Output or Try It Yourself.

navigator.serviceWorker.ready.then((registration) => {
  if (!registration.pushManager.hasPermission) {
    console.log("hasPermission not supported");
    return;
  }

  registration.pushManager
    .hasPermission()
    .then((status) => {
      console.log(status); // "granted" | "denied" | "default"
    });
});

default

const status = await registration.pushManager.hasPermission();
const btn = document.querySelector(".js-push-button");

if (status === "granted") {
  btn.textContent = "Disable Push Messages";
} else if (status === "denied") {
  btn.textContent = "Push Blocked";
  btn.disabled = true;
} else {
  btn.textContent = "Enable Push Messages";
}

Enable Push Messages

async function getPushPermissionLegacy(registration) {
  const pm = registration.pushManager;

  if (typeof pm.hasPermission === "function") {
    return pm.hasPermission();
  }
  if (typeof pm.permissionState === "function") {
    return pm.permissionState({ userVisibleOnly: true });
  }
  return Notification.permission;
}

prompt (via permissionState fallback)

const registration = await navigator.serviceWorker.ready;

const state = await registration.pushManager.permissionState({
  userVisibleOnly: true,
});

// "prompt" | "denied" | "granted"
console.log(state);

prompt

// Synchronous — no PushManager call needed
if (Notification.permission === "granted") {
  console.log("Notifications (and push) allowed");
} else if (Notification.permission === "denied") {
  console.log("Blocked");
} else {
  console.log("Not decided yet");
}

Not decided yet

🚀 Common Use Cases (Historical)

• Reading old push tutorials that call hasPermission().
• Maintaining legacy PWAs that still feature-detect the method.
• Understanding why default maps to prompt in modern APIs.
• Migrating permission UI to permissionState().
• Teaching the difference between permission checks and getSubscription().

🔧 How It Works

📝 Notes

• Deprecated & non-standard on MDN—not for new production code.
• Superseded by permissionState() (Baseline Widely available, Mar 2023).
• Not Experimental — it was standard-track once but removed from specs.
• Feature-detect before calling in legacy maintenance.
• Secure context required for Push API features.
• Related learning: getSubscription(), supportedContentEncodings, navigator.serviceWorker, JavaScript hub.

💡 Best Practices