如何通过JavaScript为PWA web应用图标显示计数？已集成FCM推送

Great question! Adding a notification count badge to your PWA's launcher icon is straightforward using the Web Badging API—and it integrates smoothly with your existing FCM setup. Here's how to implement it step by step:

1. Check for Browser/Platform Support #

First, verify that the user's environment supports the Badging API (it works on most modern browsers and PWA-enabled platforms like Android, iOS 16.4+, and desktop Chrome):

if ('setAppBadge' in navigator) {
  // Badge functionality is supported
  console.log("App badge support detected");
} else {
  console.log("App badges aren't supported on this platform/browser");
}

2. Update Badge Count When Receiving FCM Notifications #

When a new FCM push arrives, increment your unread count and set the badge. Note: If you're handling pushes in a Service Worker, you'll need to target active client windows since Service Workers don't have direct access to navigator:

Example in Service Worker: #

// Initialize unread count (persist this in IndexedDB if you want it to survive restarts)
let unreadNotificationCount = 0;

self.addEventListener('push', (event) => {
  // Increment unread count
  unreadNotificationCount++;

  // Update badge for all active PWA clients
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        clientList.forEach((client) => {
          if ('setAppBadge' in client.navigator) {
            client.navigator.setAppBadge(unreadNotificationCount)
              .catch((err) => console.error("Failed to set badge:", err));
          }
        });
      })
  );
});

Example in Main App JS (for foreground FCM messages): #

let unreadCount = 0;

// Listen for foreground FCM messages
messaging.onMessage((payload) => {
  unreadCount++;
  if ('setAppBadge' in navigator) {
    navigator.setAppBadge(unreadCount)
      .catch((err) => console.error("Badge update failed:", err));
  }
});

3. Clear the Badge When User Interacts with the App #

When the user opens the app or marks notifications as read, reset the badge and count:

// Clear badge when app gains focus
window.addEventListener('focus', () => {
  if ('clearAppBadge' in navigator) {
    navigator.clearAppBadge()
      .catch((err) => console.error("Failed to clear badge:", err));
    unreadNotificationCount = 0; // Reset your count variable
  }
});

// Or clear when user clicks a "mark all as read" button
document.getElementById('mark-all-read').addEventListener('click', () => {
  if ('clearAppBadge' in navigator) {
    navigator.clearAppBadge();
    unreadNotificationCount = 0;
  }
});

Key Notes for FCM + PWA Badging #

• PWA Installation Requirements: Your app must be installed (not just visited in the browser) for the badge to appear on the launcher icon. Ensure you have a valid manifest.json with name, short_name, icons, and display: standalone or fullscreen.
• Permission Checks: Users need to grant notification permissions for the badge to work (since FCM notifications rely on this too). Request permissions upfront if needed:

  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log("Notifications and badges are enabled");
    }
  });
  

• Platform Limitations: iOS Safari (16.4+) supports badging but requires the app to be in the background. Some older Android browsers might have limited support—always test on your target platforms.
• Count Persistence: If you want the unread count to survive app restarts, store it in IndexedDB or localStorage and load it when the app launches.

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