JavaScript PushManager permissionState() Method

What You’ll Learn

The permissionState() method on PushManager returns the push permission state as prompt, denied, or granted. Learn the MDN serviceWorker.ready pattern, the userVisibleOnly option, replacing deprecated hasPermission(), and updating subscribe UI—with five examples and try-it labs.

Introduction

Before calling subscribe(), your PWA should know whether push is allowed, blocked, or not yet decided. The Push API exposes permissionState() on PushManager for that check—the modern, standardized way to read push permission.

MDN marks it Baseline Widely available (since March 2023). It superseded the deprecated hasPermission() method and maps legacy default to prompt. In Firefox, notification and push permissions are merged—granting notifications also enables push.

Understanding permissionState()

An instance method on PushManager that queries push permission asynchronously for the given subscribe options.

• Parameters — optional options object.
• userVisibleOnly — boolean; push messages must be user-visible.
• applicationServerKey — VAPID public key (same as for subscribe()).
• Returns — Promise<string>.
• granted — push permission allowed.
• denied — push permission blocked.
• prompt — user has not decided yet.
• Available in Web Workers per MDN (secure context).

📝 Syntax

pushManager.permissionState()
pushManager.permissionState(options)

Return value

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

MDN pattern

const registration = await navigator.serviceWorker.ready;

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

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

⚖️ permissionState() vs Related APIs

Examples Gallery

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

navigator.serviceWorker.ready.then((registration) => {
  return registration.pushManager.permissionState({
    userVisibleOnly: true,
  });
}).then((state) => {
  console.log(state); // "prompt" | "denied" | "granted"
});

prompt

const state = await registration.pushManager.permissionState({
  userVisibleOnly: true,
});
const btn = document.querySelector(".js-push-button");

if (state === "granted") {
  btn.textContent = "Push Enabled";
} else if (state === "denied") {
  btn.textContent = "Push Blocked";
  btn.disabled = true;
} else {
  btn.textContent = "Enable Push";
}

Enable Push

async function getPushPermissionState() {
  const registration = await navigator.serviceWorker.ready;
  return registration.pushManager.permissionState({
    userVisibleOnly: true,
  });
}

const state = await getPushPermissionState();
console.log("Push permission:", state);

Push permission: prompt

// Convert URL-safe base64 VAPID public key to Uint8Array
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 vapidPublicKey = "BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U";
const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);

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

prompt (with VAPID key in options)

// Sync — maps "default" to permissionState's "prompt"
const notifPerm = Notification.permission;

if (notifPerm === "granted") {
  console.log("Notifications allowed (push likely enabled in Firefox)");
} else if (notifPerm === "denied") {
  console.log("Blocked");
} else {
  console.log("Not decided yet (like permissionState prompt)");
}

Not decided yet (like permissionState prompt)

🚀 Common Use Cases

• Showing or hiding an “Enable Push” button on page load.
• Disabling subscribe UI when permission is denied.
• Checking permission before calling subscribe().
• Migrating from deprecated hasPermission() to the modern API.
• Pairing with getSubscription() to restore full push state.
• Validating VAPID key options before subscription setup.

🔧 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.
• Supersedes deprecated hasPermission().
• Related learning: getSubscription(), supportedContentEncodings, navigator.serviceWorker, JavaScript hub.

💡 Best Practices