Web Notification Tester

Permission Status

DEFAULT

Request Permission

Customize Notification

Title

Body

This is a test notification to verify how it looks on your device.

Use Custom Icon URL?

Select Preset Icon

Send Test Notification

About Web Notification Tester

Web Notification Tester is an interactive tool for testing and debugging the Web Notification API in real-time. The Notification API allows websites to display system-level notifications to users, even when the browser tab is not in focus or the browser is minimized.

This tool is essential for:

• PWA Developers: Testing push notification appearance before deployment
• Web App Builders: Debugging notification behavior across platforms
• UX Designers: Previewing notification designs and copy
• QA Teams: Verifying notification functionality on different devices
• Product Managers: Demonstrating notification features to stakeholders

Web Notification API Overview

What Are Web Notifications?

Web notifications are system-level alerts that appear outside the browser window. Unlike in-page alerts or toasts, they:

• Appear in the operating system's notification center
• Persist even when the browser tab is closed (for service worker notifications)
• Can include images, icons, and action buttons
• Respect system-level notification settings (Do Not Disturb, Focus modes)

Key Characteristics

Display Location:

• Windows 10/11: Action Center (bottom-right corner)
• macOS: Notification Center (top-right corner)
• Android: Status bar dropdown
• iOS/iPadOS: Lock screen and notification center

Lifetime:

• Appear for 5-10 seconds by default
• Remain in notification center until dismissed
• Can be configured to auto-dismiss or require interaction

Interaction:

• Can be clicked to focus the browser tab/window
• Support action buttons for quick responses
• Can be dismissed individually or cleared in bulk

How to Use This Tool

Step 1: Request Permission

Click the "Request Permission" button to trigger the browser's permission prompt.

Permission States:

• Default: User hasn't decided yet (prompt will be shown)
• Granted: User previously allowed notifications
• Denied: User previously blocked notifications

Important: Browsers block repeated permission requests to prevent spam. If denied, users must manually re-enable in browser settings.

Step 2: Customize Your Notification

Title (Required)

• Main headline of the notification
• Best Practice: Keep under 40 characters
• Use clear, action-oriented language
• Example: "New Message from Sarah"

Body (Optional but recommended)

• Additional context or message content
• Best Practice: 2-4 lines of text (80-120 characters)
• Provide enough context to be actionable
• Example: "Hey! Are you free for coffee at 3pm?"

Icon (Optional)

• Visual identifier displayed with notification
• Recommended size: 192x192px or larger
• Should be recognizable at small sizes
• Use PNG with transparency for best results
• Falls back to default browser/site icon if not provided

Badge (Optional, limited support)

• Small monochrome icon for notification tray
• Recommended size: 96x96px
• Must be monochrome (transparency + single color)
• Used on Android notification badges

Step 3: Send Test Notification

Click "Send Test Notification" to trigger a real notification with your customized content.

What to Check:

• Does the notification appear?
• Is the text readable and properly formatted?
• Does the icon display correctly?
• Does clicking work as expected?
• How does it look in your system's notification center?

Browser Compatibility

Full Support

✅ Chrome/Edge 22+ (Desktop & Android)

• Complete Notification API support
• Action buttons supported
• Service Worker notifications supported
• Rich media support (images, badges)

✅ Firefox 22+ (Desktop & Android)

• Full API support
• Permission API integrated
• Service Worker notifications supported

✅ Safari 7+ (macOS)

• Desktop notifications supported
• Service Worker notifications (Safari 12.1+)
• Requires user interaction to request permission

Limited Support

⚠️ Safari on iOS/iPadOS 16.4+

• Only works in PWAs added to Home Screen
• Requires iOS 16.4 or later
• Must be installed as web app (not in Safari browser)
• Limited customization options

⚠️ Opera 25+

• Based on Chromium, full support
• May have vendor-specific behaviors

No Support

❌ Internet Explorer - Not supported ❌ Older mobile browsers - Check specific versions

Testing Matrix

Permission Management

Understanding Permission Flow

The Notification API follows a strict permission model to prevent abuse:

1. Default State (First Visit)

• User hasn't made a decision
• Permission prompt can be shown once per session
• Best practice: Request only after user interaction

2. Granted State

• User previously allowed notifications
• Can send notifications without prompting
• Permission persists across sessions

3. Denied State

• User explicitly blocked notifications
• Cannot show permission prompt again
• User must manually reset in browser settings

Best Practices for Requesting Permission

DO: ✅ Request after user interaction (button click, form submission) ✅ Explain WHY notifications are valuable before requesting ✅ Provide clear context for the request ✅ Offer notifications as an optional enhancement ✅ Request at a natural point in user journey

DON'T: ❌ Request permission on page load ❌ Request repeatedly if denied ❌ Trick users into granting permission ❌ Request without explanation ❌ Block functionality if permission denied

Example Permission Flow

Good Example:

User signs up for an account
→ Welcome tour explains features
→ "Get notified of new messages?" prompt
→ Click "Yes, notify me" button
→ Browser permission prompt appears

Bad Example:

User visits homepage
→ Immediate permission prompt
→ No context provided
→ Confusing for user

Resetting Permissions

If you blocked notifications and want to re-enable:

Chrome/Edge:

1. Click the lock/info icon in address bar
2. Find "Notifications" setting
3. Change to "Allow"
4. Reload the page

Firefox:

1. Click the shield/lock icon in address bar
2. Click on blocked notifications
3. Select "Allow" from dropdown
4. Reload the page

Safari (macOS):

1. Safari → Settings → Websites → Notifications
2. Find the site in the list
3. Change permission to "Allow"
4. Reload the page

Safari (iOS PWA):

1. Settings → Notifications
2. Find the web app
3. Enable "Allow Notifications"
4. Reopen the app

Troubleshooting Guide

"Permission Denied" Error

Cause: User previously blocked notifications for this site.

Solutions:

1. Check browser permission settings (see Resetting Permissions above)
2. Try in an incognito/private window for fresh permissions
3. Clear site data and reload (will reset other settings too)
4. Check if system-level notifications are enabled
5. Verify no browser extensions are blocking notifications

Notifications Not Appearing

Possible Causes & Solutions:

1. System Do Not Disturb Mode

• Windows: Check Focus Assist settings (Action Center)
• macOS: Check Do Not Disturb in Control Center
• Android: Check notification settings and app permissions
• iOS: Check Focus modes in Settings

2. Browser in Background

• Some OS/browser combinations queue notifications
• Bring browser to foreground to trigger pending notifications
• Check notification center for queued notifications

3. Browser Settings

• Verify notifications are enabled at browser level
• Check if site has notification permission
• Disable browser extensions that might interfere

4. Security Context

• Notifications only work on HTTPS sites
• Exception: localhost for development
• Check browser console for security errors

iOS/Safari Issues

"Not Supported" on iOS Browser

• Reason: iOS Safari doesn't support notifications in browser
• Solution: Create a PWA (Add to Home Screen)
• Requirements: iOS 16.4+, manifest.json, service worker

Notifications Work in Safari Desktop but Not Mobile

• Expected behavior - iOS requires PWA installation
• Test on desktop Safari or create installable PWA
• Use progressive enhancement approach

Permission Prompt Not Showing

Possible Causes:

1. Already Decided: User previously granted/denied permission
2. Too Many Requests: Browser blocked repeated prompts
3. Non-User Gesture: Request not triggered by user action
4. Browser Policy: Some browsers limit permission prompts

Solutions:

• Check current permission state in browser settings
• Wait before requesting again (session-based cooldown)
• Always request from user interaction (button click)
• Provide clear UI to manually enable in settings

Click Events Not Working

Cause: Event listener not properly attached or notification dismissed.

Solutions:

• Verify notification.onclick handler is set
• Check browser console for JavaScript errors
• Test with simple console.log first
• Ensure notification hasn't auto-dismissed before click

Advanced Features

Notification Options

Beyond basic title and body, the API supports many options:

Visual Customization:

{
  title: "Message Title",
  body: "Notification body text",
  icon: "https://example.com/icon.png",      // Large icon
  badge: "https://example.com/badge.png",    // Small monochrome icon
  image: "https://example.com/image.jpg",    // Large preview image
  tag: "message-123",                         // Identifier for replacing notifications
  renotify: true,                             // Alert again for same tag
}

Behavioral Options:

{
  requireInteraction: false,    // Auto-dismiss or persist?
  silent: false,                // Vibrate/sound or silent?
  vibrate: [200, 100, 200],    // Vibration pattern (mobile)
  timestamp: Date.now(),        // When event occurred
  data: { userId: 123 },       // Custom data payload
}

Action Buttons (Service Worker required):

{
  actions: [
    {
      action: "reply",
      title: "Reply",
      icon: "/icons/reply.png",
    },
    {
      action: "dismiss",
      title: "Dismiss",
    },
  ];
}

Service Worker Notifications

For persistent notifications that work even when the page is closed:

// In service worker
self.registration.showNotification("Title", {
  body: "Body text",
  icon: "/icon.png",
  actions: [
    { action: "open", title: "Open App" },
    { action: "close", title: "Close" },
  ],
});

// Handle notification click
self.addEventListener("notificationclick", (event) => {
  event.notification.close();

  if (event.action === "open") {
    clients.openWindow("/app");
  }
});

Notification Grouping

Use the tag property to replace notifications instead of stacking:

// First notification
new Notification("New Message", {
  tag: "messages",
  body: "1 new message",
});

// This replaces the first one (same tag)
new Notification("New Messages", {
  tag: "messages",
  body: "5 new messages",
  renotify: true, // Alert user about the update
});

Use Cases & Examples

1. Chat Application

Scenario: Notify users of new messages

function notifyNewMessage(sender, message) {
  if (Notification.permission === "granted") {
    new Notification(`New message from ${sender}`, {
      body: message.substring(0, 100),
      icon: sender.avatarUrl,
      tag: `chat-${sender.id}`,
      data: { chatId: sender.id },
    }).onclick = () => {
      window.focus();
      openChat(sender.id);
    };
  }
}

2. E-commerce Order Updates

Scenario: Alert customers about order status changes

function notifyOrderUpdate(order) {
  new Notification(`Order ${order.id} Update`, {
    body: `Your order has been ${order.status}`,
    icon: "/order-icon.png",
    tag: `order-${order.id}`,
    requireInteraction: true,
    actions: [
      { action: "track", title: "Track Package" },
      { action: "view", title: "View Order" },
    ],
  });
}

3. Task Reminders

Scenario: Remind users about upcoming tasks

function scheduleTaskReminder(task, delay) {
  setTimeout(() => {
    if (Notification.permission === "granted") {
      new Notification("Task Reminder", {
        body: `"${task.title}" is due soon`,
        icon: "/task-icon.png",
        requireInteraction: true,
        vibrate: [200, 100, 200],
      });
    }
  }, delay);
}

4. Live Event Updates

Scenario: Notify sports fans of score changes

function notifyScoreUpdate(game) {
  new Notification(`${game.homeTeam} vs ${game.awayTeam}`, {
    body: `Score: ${game.homeScore} - ${game.awayScore}`,
    icon: game.leagueIcon,
    tag: `game-${game.id}`,
    renotify: true,
    badge: "/sport-badge.png",
  });
}

Privacy & Security

User Privacy Protections

Browser Safeguards:

• Permission required before any notifications
• Can be revoked at any time
• No notification history accessible to websites
• Respects system-level Do Not Disturb modes

Data Privacy:

• All testing happens locally in your browser
• No notification data is sent to external servers
• Custom icons are loaded from URLs you provide
• No tracking or analytics in this tool

Security Considerations

HTTPS Requirement:

• Notification API only works on secure contexts (HTTPS)
• Exception: localhost for development
• Prevents malicious HTTP sites from spamming notifications

Origin-Based Permissions:

• Permissions are granted per origin (domain)
• Subdomains need separate permissions
• Prevents cross-site notification abuse

Content Security Policy:

• Notification icons respect CSP directives
• External images may be blocked by CSP
• Test with your site's CSP configuration

Best Practices for User Trust

1. Be Transparent

• Clearly explain what notifications will contain
• Show examples before requesting permission
• Provide opt-out mechanisms

2. Respect Frequency

• Don't spam users with notifications
• Implement user-configurable frequency settings
• Batch related notifications when possible

3. Provide Value

• Only notify for important, actionable information
• Make notifications relevant to user interests
• Allow granular control over notification types

4. Easy Management

• Provide in-app notification preferences
• Allow disabling specific notification categories
• Include unsubscribe links where appropriate

Performance Considerations

Impact on Battery Life

Notifications themselves have minimal battery impact, but be mindful of:

• Frequent permission checks (cache permission state)
• Excessive notification creation (implement rate limiting)
• Large icon/image files (optimize images)
• Background service worker activity

Best Practices

Optimize Images:

• Use appropriate image formats (PNG for transparency, JPEG for photos)
• Compress images to reduce size
• Serve responsive images based on device
• Typical sizes: 192x192px (icon), 360x240px (image)

Cache Permission State:

// Check once, store result
let notificationPermission = Notification.permission;

// Use cached value
if (notificationPermission === "granted") {
  // Send notification
}

Rate Limiting:

// Prevent notification spam
const lastNotification = {};

function notifyWithRateLimit(tag, options) {
  const now = Date.now();
  const lastTime = lastNotification[tag] || 0;

  if (now - lastTime > 60000) {
    // 1 minute minimum
    new Notification(options.title, options);
    lastNotification[tag] = now;
  }
}

Testing Checklist

Before deploying notification features:

Functionality:

• [ ] Permission request works correctly
• [ ] Notifications appear on all target platforms
• [ ] Click handlers work as expected
• [ ] Notification icons load properly
• [ ] Text is readable and properly formatted

Permissions:

• [ ] Default state prompts correctly
• [ ] Granted state sends notifications
• [ ] Denied state handles gracefully
• [ ] Re-permission flow works

Cross-Platform:

• [ ] Test on Windows (Chrome, Edge, Firefox)
• [ ] Test on macOS (Safari, Chrome, Firefox)
• [ ] Test on Android (Chrome, Firefox)
• [ ] Test iOS PWA (if applicable)

Edge Cases:

• [ ] Do Not Disturb mode behavior
• [ ] Background tab behavior
• [ ] Closed browser behavior (service worker)
• [ ] Multiple notifications handling
• [ ] Long text truncation

User Experience:

• [ ] Clear permission request messaging
• [ ] Settings page for preferences
• [ ] Unsubscribe mechanism
• [ ] Notification frequency is reasonable

Developer Resources

API Documentation

• MDN Web Docs - Notification API
• W3C Notification Specification
• Google Web Push Documentation

Testing Tools

• Chrome DevTools - Application → Notifications
• Firefox Developer Tools - Storage → Notifications
• Safari Web Inspector - Storage → Notifications

Related APIs

• Push API: Server-triggered notifications
• Service Worker API: Background notifications
• Permissions API: Check permission state
• Vibration API: Haptic feedback

Libraries & Frameworks

• OneSignal: Comprehensive push notification service
• Firebase Cloud Messaging: Google's push notification platform
• web-push: Node.js library for web push
• Pushpad: Simple push notification service

Quick Reference

Permission Check

if ("Notification" in window) {
  console.log(Notification.permission); // 'default', 'granted', or 'denied'
}

Request Permission

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    console.log("Notification permission granted");
  }
});

Send Notification

new Notification("Title", {
  body: "Message body",
  icon: "/icon.png",
});

Handle Click

const notification = new Notification("Title", options);
notification.onclick = () => {
  window.focus();
  notification.close();
};

Service Worker Notification

self.registration.showNotification("Title", {
  body: "Body text",
  icon: "/icon.png",
});

Related Tools

• Browser Detector
• Clipboard Manager & Tester
• Device & Network Info
• Meta Tag Generator
• URL Parser & Builder
• Viewport & Screen Info