Chapter 53: Web Notifications API & Native Push

Sound, Vibration & Silent Alerts

Harness multi-sensory feedback across platforms using silent alerts, custom haptic vibration arrays, and system Focus Assist / DND integration.

LEARNING OBJECTIVES ⌵

Silence native system audio chimes using the silent: true option.
Define custom haptic vibration patterns using the vibrate millisecond array ([vibrate, pause, vibrate, ...]).
Compare hardware vibration capabilities and limitations across Android, iOS, Windows, and macOS.
Understand how host operating system Focus Assist, Do Not Disturb (DND), and device mute switches override web notification sensory outputs.

🎬 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 (Intuitive Foundation)

Imagine sitting in a quiet university library or a packed boardroom presentation. If your phone suddenly blasts a loud trumpet fanfare when a new marketing email arrives, you will be deeply embarrassed. However, if your phone gives you a subtle, rhythmic "double-tap" vibration in your pocket—or if your laptop silently displays a notification banner in the corner without making a peep—you stay informed without disturbing anyone.

+─────────────────────────────────────────────────────────────────────────────+
|                         SENSORY FEEDBACK SPECTRUM                           |
+─────────────────────────────────────────────────────────────────────────────+
|                                                                             |
|  [ 1. Silent Toast ]          [ 2. Tactile Haptic ]     [ 3. Full Alert ]   |
|   { silent: true }             { vibrate: [100, 50, 100] } { renotify: true}|
|         │                                │                    │             |
|         ▼                                ▼                    ▼             |
|   Visual Banner Only           Subtle Pocket Rhythm       Chime + Haptic    |
|   (Night mode, background sync) (Urgent chats, reminders) (Alarms, 2FA)     |
|                                                                             |
+─────────────────────────────────────────────────────────────────────────────+

The Web Notifications API provides two primary sensory levers:

The silent toggle: Suppresses any audio chime or hardware buzz, presenting a purely visual notification.
The vibrate pattern array: Encodes custom haptic rhythms (like Morse code) directly into the device's physical vibration motor on supported mobile devices.

Technical Deep Dive & Specifications

The `silent` Boolean Option

The silent property instructs the host operating system to suppress all default notification sounds and vibrations:

const silentNotification = new Notification('Sync Complete', {
  body: '142 files synchronized in the background.',
  icon: 'https://example.com/icon.png',
  silent: true // No OS chime, no vibration!
});

Precedence Rule: If you provide both silent: true and a vibrate pattern in the same options dictionary, the W3C specification dictates that silent: true takes absolute precedence. The notification will remain completely quiet and motionless.

The `vibrate` Pattern Specification

The vibrate property accepts a sequence of unsigned integers representing millisecond durations. The array alternates between active vibration time and silent pause time:

vibrate: [ Buzz1, Pause1, Buzz2, Pause2, Buzz3 ]

// Example: SOS Morse Code in Haptics (... --- ...)
// Short: 100ms, Long: 300ms, Inter-element pause: 50ms, Letter pause: 200ms
const sosPattern = [
  // S (...)
  100, 50, 100, 50, 100, 
  200, // Pause between S and O
  // O (---)
  300, 50, 300, 50, 300, 
  200, // Pause between O and S
  // S (...)
  100, 50, 100, 50, 100
];

const urgentAlert = new Notification('🚨 Server Outage Detected', {
  body: 'Production database latency exceeded 5000ms.',
  vibrate: sosPattern,
  icon: 'https://example.com/alert.png'
});

Popular Haptic Vibration Presets

Preset Name	Vibration Array (`ms`)	Tactical Feel / Sensation	Best Use Case
Subtle Tap	`[50]`	Single crisp, light micro-haptic	Routine informational updates
Double Pulse	`[100, 100, 100]`	Two quick distinct vibrations	Incoming direct messages
Heartbeat	`[150, 150, 150, 600, 150, 150, 150]`	Thump-thump rhythm	Urgent alarms, critical alerts
Incoming Call	`[500, 250, 500, 250, 500]`	Long ringing pulses	VoIP incoming calls, video rings

Hardware & OS Compatibility Matrix

+─────────────────────────────────────────────────────────────────────────+
|                  SENSORY FEATURE SUPPORT BY PLATFORM                    |
+─────────────────────────────────────────────────────────────────────────+
|  Platform                  | `silent: true` | `vibrate` Array Pattern   |
|────────────────────────────┼────────────────┼───────────────────────────|
|  Android (Chrome / Edge)   |  ✅ Supported  |  ✅ Full Hardware Support |
|  Windows 10 / 11           |  ✅ Supported  |  ❌ Ignored (No Motor)    |
|  macOS (Chrome / Safari)   |  ✅ Supported  |  ❌ Ignored (No Web API)  |
|  iOS Safari (16.4+ PWA)    |  ⚠️ OS Governed|  ❌ Unsupported           |
|  Linux Desktop             |  ✅ Supported  |  ❌ Ignored               |
+─────────────────────────────────────────────────────────────────────────+

What Happened to the `sound` Property?

In the original 2012 drafts of the W3C Notifications API, there was a sound: 'alert.mp3' property. This property was deprecated and completely removed from all modern web browsers for the following reasons:

Autoplay Abuse: Malicious websites abused custom sound URLs to blast loud audio advertisements.
OS Sound Uniformity: Host operating systems (Windows Action Center, macOS, Android) enforce user-configured notification chimes so users can distinguish notification origins by their system themes.
Alternative Solution: If your application is active in the foreground and requires a custom chime, use the Web Audio API or new Audio('chime.mp3').play() inside your active page, paired with silent: true on the notification.

💻 Interactive Code Playground

Starter Code

Save this file as index.html and open it on your computer or Android mobile device:

Line-by-Line Code Breakdown

Lines 131–136: Defines structured haptic presets with exact millisecond vibration/pause ratios.
Lines 147–156: Dynamically computes visual widths for each vibration burst and pause gap using CSS flex weighting.
Lines 176–183: Builds the NotificationOptions dictionary. When silent: true is chosen, the vibrate property is omitted, adhering to spec precedence rules.
Line 185: Dispatches the configured multi-sensory notification instance.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lesson 53.6 - Haptic & Sensory Notification Studio</title>
  <style>
    :root {
      --bg: #090d16;
      --card-bg: #131b2e;
      --border: #233354;
      --accent: #38bdf8;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --text: #f1f5f9;
      --muted: #94a3b8;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 1.5rem;
    }
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 2rem;
      max-width: 620px;
      width: 100%;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }
    h1 { font-size: 1.4rem; color: var(--accent); margin-bottom: 0.5rem; }
    p.desc { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.4; }

.preset-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }
    .preset-card {
      background: #090d16;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
    }
    .preset-card:hover { border-color: var(--accent); background: rgba(56, 189, 248, 0.05); }
    .preset-name { font-weight: bold; font-size: 0.9rem; color: #fff; margin-bottom: 0.25rem; }
    .preset-array { font-family: monospace; font-size: 0.75rem; color: var(--accent); }
    .preset-desc { font-size: 0.75rem; color: var(--muted); margin-top: 0.35rem; }

/* Visual Haptic Rhythm Visualizer */
    .haptic-visualizer {
      background: #060911;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1.25rem;
      margin-bottom: 1.5rem;
      text-align: center;
    }
    .viz-track {
      height: 24px;
      background: #1e293b;
      border-radius: 6px;
      display: flex;
      gap: 3px;
      padding: 3px;
      overflow: hidden;
      margin-top: 0.75rem;
    }
    .viz-bar {
      height: 100%;
      border-radius: 3px;
      transition: background 0.1s;
    }
    .viz-vibe { background: var(--accent); }
    .viz-pause { background: rgba(255, 255, 255, 0.05); }

.btn-fire {
      background: var(--accent);
      color: #000;
      font-weight: bold;
      border: none;
      border-radius: 8px;
      padding: 0.85rem;
      width: 100%;
      cursor: pointer;
      font-size: 1rem;
    }
    .btn-fire:hover { background: #0284c7; color: #fff; }

.status-text {
      font-family: monospace;
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 1rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>📳 Haptic & Sensory Notification Studio</h1>
    <p class="desc">Select a sensory profile below to test silent notifications and mobile haptic vibration waveforms.</p>

<div class="preset-grid">
      <div class="preset-card" onclick="selectPreset('silent')">
        <div class="preset-name">🔇 Silent Mode</div>
        <div class="preset-array">silent: true</div>
        <div class="preset-desc">No sound, no vibration. Pure visual banner.</div>
      </div>
      <div class="preset-card" onclick="selectPreset('tap')">
        <div class="preset-name">⚡ Subtle Tap</div>
        <div class="preset-array">[60]</div>
        <div class="preset-desc">Quick single haptic pulse for micro-events.</div>
      </div>
      <div class="preset-card" onclick="selectPreset('double')">
        <div class="preset-name">💬 Double Pulse</div>
        <div class="preset-array">[120, 80, 120]</div>
        <div class="preset-desc">Standard incoming chat notification rhythm.</div>
      </div>
      <div class="preset-card" onclick="selectPreset('sos')">
        <div class="preset-name">🚨 Emergency SOS</div>
        <div class="preset-array">[100,50,100,50,100, 200, 300,50,300,50,300]</div>
        <div class="preset-desc">Urgent multi-stage Morse code tactile alert.</div>
      </div>
    </div>

<div class="haptic-visualizer">
      <span style="font-size: 0.85rem; color: var(--muted);" id="active-profile-label">Selected Profile: Double Pulse</span>
      <div class="viz-track" id="viz-track">
        
      </div>
    </div>

<button class="btn-fire" id="btn-dispatch">Dispatch Configured Notification</button>
    <div class="status-text" id="status-out">Ready. Click a profile and dispatch.</div>
  </div>

let currentPreset = presets.double;

function renderVisualizer(preset) {
      const track = document.getElementById('viz-track');
      const label = document.getElementById('active-profile-label');
      track.innerHTML = '';
      label.textContent = `Selected Profile: ${preset.name} (${preset.patternText})`;

if (preset.silent || preset.vibrate.length === 0) {
        track.innerHTML = '<div style="width:100%; color:#94a3b8; font-size:0.75rem; line-height:18px;">[ Silent - No Haptic Vibration ]</div>';
        return;
      }

preset.vibrate.forEach((ms, index) => {
        const isVibe = index % 2 === 0;
        const block = document.createElement('div');
        block.className = `viz-bar ${isVibe ? 'viz-vibe' : 'viz-pause'}`;
        block.style.flex = ms;
        block.title = `${isVibe ? 'Vibrate' : 'Pause'}: ${ms}ms`;
        track.appendChild(block);
      });
    }

function selectPreset(key) {
      currentPreset = presets[key];
      renderVisualizer(currentPreset);
      document.getElementById('status-out').textContent = `Loaded ${currentPreset.name}`;
    }

document.getElementById('btn-dispatch').addEventListener('click', async () => {
      if (!('Notification' in window)) {
        alert('Web Notifications not supported');
        return;
      }

if (Notification.permission === 'default') {
        await Notification.requestPermission();
      }

if (Notification.permission !== 'granted') {
        alert('Permission not granted');
        return;
      }

const options = {
        body: `Sensory test using ${currentPreset.name}`,
        icon: 'https://cdn-icons-png.flaticon.com/512/3602/3602145.png',
        silent: currentPreset.silent
      };

if (!currentPreset.silent && currentPreset.vibrate.length > 0) {
        options.vibrate = currentPreset.vibrate;
      }

const notif = new Notification(currentPreset.name, options);
      document.getElementById('status-out').textContent = `Dispatched "${currentPreset.name}" to OS.`;
    });

// Initialize visualizer
    renderVisualizer(currentPreset);
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+────────────────────────────────────────────────────────────+
| 📳 Haptic & Sensory Notification Studio                   |
| Select a sensory profile below to test silent notifications|
|                                                            |
| [ 🔇 Silent Mode ]              [ ⚡ Subtle Tap ]          |
|  silent: true                    [60]                      |
|                                                            |
| [ 💬 Double Pulse ]             [ 🚨 Emergency SOS ]       |
|  [120, 80, 120]                  [100,50,100,50,100...]    |
|                                                            |
| +────────────────────────────────────────────────────────+ |
| | Selected Profile: Double Pulse ([120, 80, 120])        | |
| | [█████████░░░░░░█████████]                             | |
| +────────────────────────────────────────────────────────+ |
|                                                            |
| [ Dispatch Configured Notification (Blue CTA) ]            |
| Status: Ready. Click a profile and dispatch.               |
+────────────────────────────────────────────────────────────+

🏋️ Hands-On Exercise

🎯 The Challenge: Critical Server Alert Dispatcher

Instructions:

Create a function dispatchServerMonitoringAlert(alertLevel, serverName, metricName, metricValue) where alertLevel can be 'info', 'warning', or 'critical'.
Configure sensory options based on alertLevel:
- 'info': Title "ℹ️ Server Info: " + serverName, silent: true, body: metricName + ": " + metricValue.
- 'warning': Title "⚠️ Server Warning: " + serverName, silent: false, vibrate: [150, 100, 150].
- 'critical': Title "🔥 CRITICAL ALERT: " + serverName, silent: false, vibrate: [300, 100, 300, 100, 500], requireInteraction: true.
Dispatch the notification and return the instance.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Exercise 53.6 - Server Sensory Dispatcher Solution</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: white; padding: 2rem; }
    .card { background: #1e293b; padding: 1.5rem; border-radius: 12px; max-width: 520px; border: 1px solid #334155; }
    .btn-group { display: flex; gap: 0.5rem; margin: 1rem 0; }
    button { padding: 0.75rem 1rem; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .btn-info { background: #38bdf8; color: #000; }
    .btn-warn { background: #f59e0b; color: #000; }
    .btn-crit { background: #ef4444; color: #fff; }
    .log { background: #090d16; padding: 0.75rem; border-radius: 6px; font-family: monospace; font-size: 0.85rem; color: #94a3b8; }
  </style>
</head>
<body>
  <div class="card">
    <h2>DevOps Infrastructure Monitor</h2>
    <p style="color: #94a3b8; font-size: 0.9rem;">Test tiered sensory dispatch levels.</p>

    <div class="btn-group">
      <button class="btn-info" id="btn-info">Info (Silent)</button>
      <button class="btn-warn" id="btn-warn">Warning (Vibrate)</button>
      <button class="btn-crit" id="btn-crit">Critical (Urgent Vibe)</button>
    </div>

    <div class="log" id="log-out">Status: Ready</div>
  </div>

  <script>
    const activeAlerts = new Set();

    function dispatchServerMonitoringAlert(alertLevel, serverName, metricName, metricValue) {
      if (!('Notification' in window) || Notification.permission !== 'granted') {
        throw new Error('Notifications not enabled');
      }

      let title = '';
      const options = {
        body: `${metricName}: ${metricValue}`,
        icon: 'https://cdn-icons-png.flaticon.com/512/2920/2920349.png',
        tag: `srv_${serverName}`,
        data: { serverName, alertLevel, timestamp: Date.now() }
      };

      switch (alertLevel) {
        case 'info':
          title = `ℹ️ Server Info: ${serverName}`;
          options.silent = true;
          break;

        case 'warning':
          title = `⚠️ Server Warning: ${serverName}`;
          options.silent = false;
          options.vibrate = [150, 100, 150];
          options.renotify = true;
          break;

        case 'critical':
          title = `🔥 CRITICAL ALERT: ${serverName}`;
          options.silent = false;
          options.vibrate = [300, 100, 300, 100, 500];
          options.requireInteraction = true;
          options.renotify = true;
          break;

        default:
          title = `Alert: ${serverName}`;
          options.silent = true;
      }

      const notif = new Notification(title, options);
      activeAlerts.add(notif);
      notif.onclose = () => activeAlerts.delete(notif);

      return notif;
    }

    async function init() {
      if (Notification.permission === 'default') {
        await Notification.requestPermission();
      }
    }
    init();

    const logEl = document.getElementById('log-out');

    document.getElementById('btn-info').addEventListener('click', () => {
      dispatchServerMonitoringAlert('info', 'prod-db-01', 'Backup Status', 'Completed successfully');
      logEl.textContent = 'Dispatched Info Alert: Silent mode active.';
    });

    document.getElementById('btn-warn').addEventListener('click', () => {
      dispatchServerMonitoringAlert('warning', 'prod-db-01', 'Memory Usage', '88.4% capacity');
      logEl.textContent = 'Dispatched Warning Alert: Double pulse vibration sent.';
    });

    document.getElementById('btn-crit').addEventListener('click', () => {
      dispatchServerMonitoringAlert('critical', 'prod-db-01', 'Disk Space', '0.2% remaining (FAILOVER IMMINENT)');
      logEl.textContent = 'Dispatched Critical Alert: High-urgency haptic pattern + Sticky toast.';
    });
  </script>
</body>
</html>

Why this works:

Dynamically maps sensory attributes (silent: true, custom vibrate arrays, and requireInteraction) to operational severity levels.
Uses tag: 'srv_' + serverName with renotify: true to prevent screen clutter while alerting on escalating severity.

⚠️ Common Pitfalls

Passing Audio URLs to sound: The sound option is deprecated and non-functional in all modern browsers. Do not attempt sound: '/audio/alert.mp3'.
Combining silent: true with vibrate: If both are set, silent: true overrides vibrate, muting the haptic motor entirely.
Assuming Desktop Vibration: Laptops and desktop monitors do not have vibration motors. Vibration arrays only execute on mobile/tablet devices with haptic actuators.

💡 Pro Tips

Foreground Custom Chimes via Web Audio API: When document.visibilityState === 'visible', dispatch a silent: true desktop notification and play a rich spatial audio chime inside the page using the Web Audio API (AudioContext).
Respecting System DND & Focus Assist: Never attempt to "work around" operating system Focus Modes. If Windows Focus Assist or macOS Do Not Disturb is active, the OS intentionally suppresses alerts for user productivity.

📌 Key Takeaways

silent: true suppresses all audio chimes and vibrations for unobtrusive visual notifications.
vibrate accepts an array of alternating vibration and pause durations in milliseconds ([vibe, pause, vibe, ...]).
If both silent: true and vibrate are supplied, silent: true takes precedence.
Hardware vibration is supported on Android devices, while desktop platforms safely ignore the vibrate array.
The legacy sound property is deprecated and removed; custom foreground audio should be handled via the Web Audio API.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

What is the effect of setting `vibrate: [200, 100, 400]` on a mobile Android device?

Topic: HTML Fundamentals

? Question 2 / 3

What happens if a developer specifies both `silent: true` and `vibrate: [500, 500, 500]` in the notification options?

Topic: HTML Fundamentals

? Question 3 / 3

Why is the `sound` property (e.g. `sound: 'bell.mp3'`) no longer used in modern Web Notifications?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The silent Boolean Option

The vibrate Pattern Specification

Popular Haptic Vibration Presets

Hardware & OS Compatibility Matrix

What Happened to the sound Property?

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Critical Server Alert Dispatcher

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What is the effect of setting vibrate: [200, 100, 400] on a mobile Android device?

What happens if a developer specifies both silent: true and vibrate: [500, 500, 500] in the notification options?

Why is the sound property (e.g. sound: 'bell.mp3') no longer used in modern Web Notifications?

The `silent` Boolean Option

The `vibrate` Pattern Specification

What Happened to the `sound` Property?

What is the effect of setting `vibrate: [200, 100, 400]` on a mobile Android device?

What happens if a developer specifies both `silent: true` and `vibrate: [500, 500, 500]` in the notification options?

Why is the `sound` property (e.g. `sound: 'bell.mp3'`) no longer used in modern Web Notifications?