Angular 15 PWA中navigator.setAppBadge调用问题及合规方案咨询

一、解决TypeScript类型报错问题 #

默认情况下TypeScript可能未识别navigator.setAppBadge和navigator.clearAppBadge的类型，这是Angular组件中直接调用报错的核心原因之一，可通过扩展全局类型解决：

1. 在项目根目录创建src/types/global.d.ts文件，添加类型声明：

interface Navigator {
  setAppBadge(count?: number): Promise<void>;
  clearAppBadge(): Promise<void>;
}

interface ServiceWorkerRegistration {
  setAppBadge(count?: number): Promise<void>;
  clearAppBadge(): Promise<void>;
}

2. 在tsconfig.json的include数组中加入该文件，确保TypeScript识别：

"include": [
  "src/**/*",
  "src/types/**/*"
]

二、封装Angular服务实现徽章操作 #

按Angular依赖注入规范封装服务，提升复用性与可维护性，同时做兼容性处理：

1. 生成徽章服务：

ng generate service core/badge

2. 在badge.service.ts中实现核心逻辑：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BadgeService {
  async setBadge(count?: number): Promise<void> {
    if (!this.isBadgeSupported()) {
      console.warn('应用徽章API当前不被浏览器支持');
      return;
    }

    try {
      if (typeof navigator !== 'undefined') {
        await navigator.setAppBadge(count);
      } else if (typeof self !== 'undefined' && 'registration' in self) {
        await (self as any).registration.setAppBadge(count);
      }
    } catch (error) {
      console.error('设置徽章失败:', error);
    }
  }

  async clearBadge(): Promise<void> {
    if (!this.isBadgeSupported()) {
      console.warn('应用徽章API当前不被浏览器支持');
      return;
    }

    try {
      if (typeof navigator !== 'undefined') {
        await navigator.clearAppBadge();
      } else if (typeof self !== 'undefined' && 'registration' in self) {
        await (self as any).registration.clearAppBadge();
      }
    } catch (error) {
      console.error('清除徽章失败:', error);
    }
  }

  private isBadgeSupported(): boolean {
    return (
      (typeof navigator !== 'undefined' && 'setAppBadge' in navigator) ||
      (typeof self !== 'undefined' && 'registration' in self && 'setAppBadge' in (self as any).registration)
    );
  }
}

3. 在组件中注入并使用：

import { Component, OnInit } from '@angular/core';
import { BadgeService } from './core/badge.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private badgeService: BadgeService) {}

  ngOnInit(): void {
    // 在Observable流程中调用示例
    new Observable(subscriber => {
      setTimeout(() => {
        subscriber.next(5);
        subscriber.complete();
      }, 1000);
    }).subscribe(count => {
      this.badgeService.setBadge(count);
    });
  }

  onClearBadge(): void {
    this.badgeService.clearBadge();
  }
}

三、Service Worker中处理后台徽章更新 #

若需在后台推送通知时更新徽章，直接在Service Worker脚本中处理：
在src/app/sw.ts（或你的Service Worker入口文件）添加：

self.addEventListener('push', async (event) => {
  const payload = event.data?.json() || {};
  const unreadCount = payload.unreadCount;

  if (unreadCount !== undefined) {
    event.waitUntil(
      self.registration.setAppBadge(unreadCount)
    );
  }
});

self.addEventListener('notificationclick', async () => {
  await self.registration.clearAppBadge();
});

四、兼容性说明 #

• 支持Chrome/Edge 81+、Firefox 110+、Safari 15.4+等现代浏览器
• iOS/iPadOS需将PWA添加到主屏幕才能显示徽章
• Android设备需确保浏览器支持PWA徽章功能（多数现代Chrome/Edge版本支持）

内容的提问来源于stack exchange，提问作者Valravn