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. Native apps follow the same idea before calling the platform's permission API.

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' } });
});

# 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

# 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.