JavaScript PushManager subscribe() Method

Beginner
5 min read
Updated: Nov 2026
4 examples
Method
Decorative image with the word SUBSCRIBE

Definition

PushManager.subscribe(options) subscribes to a push service and returns a Promise that resolves to a PushSubscription with an endpoint URL and encryption keys (MDN). If the service worker already has a subscription, that one is returned; otherwise a new one is created.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call pushManager.subscribe. Start with this line.

JavaScript
pushManager.subscribe(options?)
CallWhat it does
pushManager.subscribe(options?)Primary signature.
pushManager.subscribe(...)Call with the arguments your case needs.

Built into the browser. Call subscribe(...) on a PushManager — no import required.

Library declarations
JavaScript
pushManager.subscribe(options?)

Parameters

ParameterDescription
Service workerRequired. Host for pushManager
userVisibleOnlyRequired. Must be true or the Promise rejects

Return Value

Return ValueDescription
*Promise<PushSubscription>

JavaScript Examples

Example 1 — MDN subscribe() Pattern

Subscribe after serviceWorker.ready with VAPID options.

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

  return registration.pushManager.subscribe(options);
}).then((subscription) => {
  console.log(subscription.endpoint);
}).catch((error) => {
  console.error(error);
});
Try It Yourself

How It Works

  1. Wait for the worker. serviceWorker.ready ensures pushManager is usable.
  2. Pass options. userVisibleOnly: true satisfies Chrome/Edge; include your VAPID public key.
  3. Subscribe. The Promise resolves to a PushSubscription.
  4. Use the endpoint. Log or store subscription.endpoint (and keys) for your push server.

Example 2 — Subscribe from a User Gesture

MDN recommends calling subscribe() from a button click.

JavaScript
btn.addEventListener("click", async () => {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey,
  });
  console.log("Subscribed:", subscription.endpoint);
});
Try It Yourself

How It Works

  1. Wire a click. The handler runs only when the user opts in.
  2. Await ready. Same serviceWorker.ready step as Example 1.
  3. Subscribe inside the gesture. Browsers may block silent notification prompts.
  4. Confirm success. Log the endpoint so you know the subscription exists.

Example 3 — Check getSubscription() First

Avoid unnecessary subscribe prompts on repeat visits.

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

let subscription = await pm.getSubscription();
if (!subscription) {
  subscription = await pm.subscribe({
    userVisibleOnly: true,
    applicationServerKey,
  });
}
console.log("Active:", subscription.endpoint);
Try It Yourself

How It Works

  1. Read first. getSubscription() returns the current subscription or null.
  2. Subscribe only when needed. Call subscribe() if the result is null.
  3. Reuse when present. An existing subscription is enough — no second prompt.
  4. One endpoint. You always end with a single active PushSubscription for this worker.

Example 4 — Sync Subscription to Your Server

Your server needs the full subscription JSON to send pushes.

JavaScript
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey,
});

await fetch("/api/push-subscription", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription),
});
console.log("Subscription synced");
Try It Yourself

How It Works

  1. Create the subscription. Same subscribe() call as before.
  2. Serialize it. JSON.stringify(subscription) includes endpoint and keys.
  3. POST to your API. The server stores it for later Web Push sends.
  4. Confirm. Log success so the UI can show “Push Enabled”.
Compatibility

Browser Support

PushManager.subscribe() is Baseline Widely available (MDN, since March 2023). It requires a secure context and a service worker.

✓ Baseline · Widely available

PushManager.subscribe()

Create a PushSubscription with endpoint and encryption keys for web push.

Wide Modern browser support
Google Chrome Supported · userVisibleOnly required
Full support
Mozilla Firefox Supported · Desktop & Android
Full support
Apple Safari Supported · modern Safari / iOS
Full support
Microsoft Edge Supported · userVisibleOnly required
Full support
Opera Follow Chromium
Full support
Internet Explorer No Push API
Not supported
subscribe() Widely available

Bottom line: Supported in current Chrome, Firefox, Safari, and Edge. Always use HTTPS (or localhost), set userVisibleOnly: true for Chromium, and call from a user gesture.

Frequently Asked Questions

It subscribes to a push service and returns a Promise that resolves to a PushSubscription with an endpoint URL and encryption keys. A new subscription is created if the current service worker has none.
No. MDN marks PushManager.subscribe() as Baseline Widely available (since March 2023). It is not Deprecated, Experimental, or Non-standard.
An optional object with userVisibleOnly (boolean; Chrome and Edge require true) and applicationServerKey (your VAPID public key as a Base64 string or ArrayBuffer/Uint8Array).
After navigator.serviceWorker.ready, usually from a user gesture such as a button click. Browsers may block subscribe prompts that are not user-initiated.
subscribe() creates (or returns) a push subscription and may prompt the user. getSubscription() only reads the current subscription without creating one.
Yes. The Push API is a secure-context feature — use HTTPS or localhost. It is also available in Web Workers where supported.

Next: getSubscription()

Learn how to restore push UI by reading the current subscription.

getSubscription() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript PushManager getSubscription() Method JavaScript PushManager hasPermission() Method