Firebase Cloud Messaging浏览器兼容问题求助：Edge与Safari无法运行

Hey there, let's break down why you're seeing that messaging/unsupported-browser error in Microsoft Edge and Safari, and how to fix it.

Why This Happens #

Firebase Messaging relies on Web Push API and Service Worker support, which isn't universal across all browser versions:

• Legacy Edge (EdgeHTML-based): Before Microsoft switched to Chromium for Edge, the old EdgeHTML engine didn't support the APIs Firebase needs to deliver push notifications.
• Safari: Web Push API support only landed in Safari 16.4+. Any version older than that will throw this error outright.

Step-by-Step Solutions #

1. Verify Browser Versions

• Edge: Make sure you're running the Chromium-based Edge (released in 2020). If you're stuck on the old EdgeHTML version, upgrade to the latest Edge from Microsoft's official channels.
• Safari: Update Safari to version 16.4 or later. You can do this via macOS System Settings > General > Software Update.

2. Add Browser Compatibility Checks to Your Code

Before initializing Firebase Messaging, use Firebase's built-in isSupported() method to avoid crashes on unsupported browsers. Here's how to modify your existing code:

var config = { 
  apiKey: "xxx", 
  authDomain: "xxx.firebaseapp.com", 
  databaseURL: "https://xxx.firebaseio.com", 
  projectId: "xxx", 
  storageBucket: "xx.appspot.com", 
  messagingSenderId: "xxxxx" 
};
firebase.initializeApp(config);

// Check if Firebase Messaging is supported before proceeding
firebase.messaging.isSupported().then(isSupported => {
  if (isSupported) {
    const messaging = firebase.messaging();
    messaging.onMessage(function(payload){
      var resp = JSON.parse(payload.data.notification);
      var board_id = resp.boardId;
      var notificationTitle = resp.title;
      var notificationOptions = { body: resp.body, icon: resp.icon };
      // Don't forget to actually display the notification to the user!
      new Notification(notificationTitle, notificationOptions);
    });
  } else {
    console.log("Firebase Messaging isn't supported in this browser.");
    // Add fallback logic here (e.g., show a message to the user, use email notifications as an alternative)
  }
});

3. Additional Critical Checks

• Ensure your site is served over HTTPS (localhost is exempted for testing). Web Push API won't work on HTTP sites.
• For Safari 16.4+, double-check that your Service Worker is properly configured and that users have granted notification permissions in their browser settings.

Fallback for Unsupported Browsers #

If you need to support users on older Safari versions or legacy Edge, consider alternative notification methods:

• Email notifications triggered by your backend when events occur
• Custom in-app notifications using WebSockets
• A clear, user-friendly message prompting them to upgrade their browser to access push notifications

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