When to Ask for Notification Permission: Complete Guide

When to Ask vs. When Not to Ask

The right moment ties the request to a feature the user just expressed interest in. The wrong moment is anything that interrupts a stranger.

How to Implement the Pre-Prompt Pattern

1. Remove any auto-prompt on page load, in DOMContentLoaded, or inside analytics scripts.
2. Add a feature entry point — a button like "Get an alert when this drops in price".
3. On click, show a custom modal explaining what notifications will contain and how often.
4. Only after the user accepts the pre-prompt, call Notification.requestPermission().
5. Record dismissals in localStorage and suppress the pre-prompt for at least 30 days.
6. Handle the three return states: granted, denied, default (dismissed).

Pre-prompt then native prompt

// Bind to a real user gesture, never to page load
document.querySelector('#notify-btn').addEventListener('click', async () => {
  // 1. Custom pre-prompt — a denial here is recoverable
  const userAccepted = await showPrePrompt({
    title: 'Get notified when this ships',
    body: 'We will send one notification per shipping update. Nothing else.',
  });
  if (!userAccepted) {
    localStorage.setItem('notify-dismissed', Date.now());
    return;
  }

  // 2. Only now trigger the native dialog
  const result = await Notification.requestPermission();
  if (result === 'granted') {
    await subscribeToPush();
  }
});

Suppress re-asks for 30 days

function canShowPrePrompt() {
  if (Notification.permission !== 'default') return false;
  const dismissed = Number(localStorage.getItem('notify-dismissed') || 0);
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  return Date.now() - dismissed > THIRTY_DAYS;
}

Common Mistakes

• Calling Notification.requestPermission() in window.onload or a top-level script — instant audit fail and triggers Chrome's quieter UI.
• Wiring the prompt to a generic "Subscribe" button without explaining frequency or content.
• Re-asking after every visit — once the user has dismissed, wait at least 30 days.
• Treating default (dismissed) as a denial; the user can still be re-prompted.
• Skipping the pre-prompt and going straight to the native dialog, burning the one chance you have.
• Forgetting that Safari and Firefox require a transient user gesture — programmatic calls outside a click handler silently fail.

How to Test Notification Permission UX

1. Run an automated audit and confirm the check "Avoids requesting the notification permission on page load" passes.
2. In Chrome, open chrome://settings/content/notifications, reset the site, and reload to verify no prompt appears unprompted.
3. Test on Firefox and Safari to confirm the request only fires inside a click handler.
4. Track grant rate, denial rate, and pre-prompt acceptance separately in analytics.
5. Watch for Chrome's "quieter UI" bell icon, which signals your site has a high block rate that needs fixing.

See also our guides on geolocation permission timing and passive event listeners for related UX patterns.

FAQ

Why does an automated audit fail my page for asking on load?

The audit "Avoids requesting the notification permission on page load" fails when Notification.requestPermission() runs without a user gesture, because users overwhelmingly deny these prompts and a denial is permanent.

What is Chrome's "quieter notification UI"?

Introduced in Chrome 80 (2020), it replaces the prompt with a small bell icon for sites that show a high block rate or that auto-prompt. Most users never click the bell, effectively suppressing your prompt entirely.

Can I re-ask after a denial?

No. Once the user clicks "Block" in the native dialog, the browser will not show the prompt again. The user must manually re-enable notifications in site settings, which almost never happens.

What is the difference between denied and dismissed?

Notification.permission returns denied when the user explicitly blocked, and default when they closed the prompt without choosing. default is recoverable, denied is not.

Do I still need a pre-prompt if I only ask after a click?

Yes. The pre-prompt explains the value before the irreversible native dialog. Sites using a pre-prompt typically see grant rates 2 to 4 times higher than going straight to the native prompt.

How often can I re-show the pre-prompt?

If the user dismisses the pre-prompt (not the native one), wait at least 30 days. The pre-prompt is yours to control; the native one is not.

Does Safari support the Notifications API on the web?

Yes, since Safari 16 on macOS and Safari 16.4 on iOS for installed web apps. It still requires a transient user gesture and keeps denials sticky.

Does this affect AI search engines like ChatGPT and Perplexity?

Yes, indirectly. Aggressive permission prompts on page load drive sharp bounce rates and short sessions, which feed user-engagement signals that show up in Page Experience and in the third-party usage data AI search engines like ChatGPT, Perplexity, and Google AI Overviews use to weight a source. A page that visitors abandon within seconds is far less likely to be cited as a credible answer, regardless of how good the underlying content is.