Fix Notification Permission Denied in Angular

Notification Permission Denied in Angular

When users deny the browser notification permission, Notification.requestPermission() returns 'denied'. Your Angular app needs to handle this gracefully — you can't ask again, and attempting to create a notification throws an error.

Check Permission Before Requesting

@Injectable({ providedIn: 'root' })
export class NotificationService {
  async requestPermission(): Promise<'granted' | 'denied' | 'default'> {
    if (!('Notification' in window)) {
      console.warn('Notifications not supported');
      return 'denied';
    }

    if (Notification.permission === 'granted') {
      return 'granted';
    }

    if (Notification.permission === 'denied') {
      // Can't re-request — browser blocks the prompt
      return 'denied';
    }

    // Only prompt if permission is 'default'
    return await Notification.requestPermission();
  }

  async notify(title: string, options?: NotificationOptions): Promise<void> {
    const permission = await this.requestPermission();
    if (permission !== 'granted') {
      this.showInAppNotification(title, options?.body);
      return;
    }
    new Notification(title, options);
  }

  private showInAppNotification(title: string, body?: string): void {
    // Fallback: show a toast or in-app notification
    this.snackBar.open(`${title}: ${body}`, 'Close', { duration: 5000 });
  }
}

Best Practices

1. Don't request on page load — ask after a user action
2. Explain why before prompting:

@Component({ ... })
export class NotificationPromptComponent {
  showPrompt = Notification.permission === 'default';

  async enable() {
    const result = await this.notificationService.requestPermission();
    this.showPrompt = false;
  }
}

1. Always have a fallback — in-app toasts, email notifications, or badge indicators

SSR Safety

import { isPlatformBrowser } from '@angular/common';

const supported = isPlatformBrowser(this.platformId) && 'Notification' in window;

Bugsly tracks notification permission states across your user base, helping you understand what percentage of users have denied notifications and optimize your fallback experience.