Ask for permission after a clear action

How to do it

Show your own button first, such as "Tell me when my order ships". Call Notification.requestPermission() inside its click handler. Firefox and Safari ignore the call without a user action, and Chrome shows a muted prompt to sites that ask too early. A "Block" is close to permanent, because only the person can undo it in browser settings. On iPhone and iPad, web push works only after the site is added to the Home Screen, from iOS 16.4. Show the button only when 'PushManager' in window is true, and otherwise explain how to add the site to the Home Screen. Native apps follow Request the system notification permission before you rely on notifications. Then subscribe as Send web push with VAPID and an encrypted payload says.

Examples

JavaScript example

document.querySelector('#notify-shipping').addEventListener('click', async () => {
  if (await Notification.requestPermission() !== 'granted') return showSettingsHint();
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: VAPID_PUBLIC_KEY,
  });
  await fetch('/push/subscriptions', { method: 'POST', body: JSON.stringify(subscription), headers: { 'Content-Type': 'application/json' } });
});

Python example

# Server side: store the subscription against the signed-in user, once per endpoint
@app.post("/push/subscriptions")
@login_required
def save_push_subscription():
    body = request.get_json()
    db.push_subscriptions.upsert(endpoint=body["endpoint"], keys=body["keys"], user_id=current_user.id)
    return "", 201

Shell example

# Fails when the permission call sits outside a click or submit handler
grep -rn "requestPermission" src/ | grep -v -E "click|submit" && exit 1 || echo PASS

How to check

A browser test loads every page with a fresh profile and records permission prompts. None appear before a click. A grep finds requestPermission only inside click handlers.

Sources

• Notifications API Standard

Related rules

• MOB-51 Request the system notification permission before you rely on notifications in Mobile apps
• NTF-10 Send web push with VAPID and an encrypted payload in Notifications