Chapter 53: Web Notifications API & Native Push

Notification Best Practices & Anti-Fatigue

**Part 11: HTML5 APIs Part 2** — Chapter 53: Notifications API

LEARNING OBJECTIVES ⌵
  • Understand permission prompt timing heuristics (Never prompt on page load).
  • Implement Frequency Capping and Quiet Hours to prevent notification fatigue.
  • Group and replace related alerts using the tag attribute.
  • Design user preference dashboards with category opt-ins.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story

Imagine arriving at a new restaurant, and before you can even look at the menu or sit down, the waiter jumps out and demands your phone number so they can text you daily lunch specials. You would immediately walk out!

Prompting for notification permission on initial page load has a >90% rejection rate and causes browsers (like Chrome) to automatically silence future prompts for your domain.

The FAANG gold standard is the Contextual Double-Opt-In pattern: explain why the user needs notifications first (e.g. "Get notified when your ride arrives"), and only invoke Notification.requestPermission() after an explicit user gesture.

💻 Interactive Code Playground

// Good UX: In-App Soft Prompt before native browser dialog
function promptForNotifications() {
  const modal = document.createElement('div');
  modal.innerHTML = `
    <div class="a11y-modal" role="dialog" aria-labelledby="notif-title">
      <h3 id="notif-title">Turn on Instant Order Updates?</h3>
      <p>Receive real-time notifications when the courier picks up your delivery.</p>
      <button id="btn-allow">Yes, Keep Me Updated</button>
      <button id="btn-later">Maybe Later</button>
    </div>
  `;
  document.body.appendChild(modal);

  document.getElementById('btn-allow').onclick = async () => {
    modal.remove();
    // User interacted -> Safe to trigger native OS prompt
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      subscribeUserToPush();
    }
  };

  document.getElementById('btn-later').onclick = () => modal.remove();
}

📌 Key Takeaways

  • Never prompt on page load: Prompt only after a relevant user action (booking a flight, joining a chat).
  • Use tag attributes to replace existing notifications instead of flooding the OS notification center.
  • Always provide an in-app toggle to let users manage notification categories (Marketing, Security, Direct Messages).
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?