Unhandled Promise Rejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser).

[Nader-CS]

Operating System

macOS 12.7.6

Environment (if applicable)

safari Version 17.6 (17618.3.11.11.7, 17618)

Firebase SDK Version

11.10.0

Firebase SDK Product(s)

Messaging

Project Tooling

Next.js app router version 15

Detailed Problem Description

i want to push notificaion using safari

Steps and code to reproduce issue

'use client';

import {getToken, messaging, onMessage} from '@/lib/firebase';
import useAlerts from './useAlerts';
import {useLocale, useTranslations} from 'next-intl';
import {sendDeviceToken} from '@/services';

const useNotifications = () => {
  const t = useTranslations();
  const {infoAlert, errorAlert} = useAlerts();
  const locale = useLocale();

  const requestNotificationPermission = async () => {
    try {
      const permission = await Notification.requestPermission();

      if (permission !== 'granted') {
        infoAlert(
          t(
            'notifications_are_blocked_to_stay_updated_with_important_alerts_and_updates_please_enable_notifications_in_your_browser_settings',
          ),
        );
        return false;
      }

      let registration = await navigator.serviceWorker.getRegistration('/');

      if (!registration) {
        registration = await navigator.serviceWorker.register(
          '/firebase-messaging-sw.js',
          {
            scope: '/',
          },
        );
      }
      await navigator.serviceWorker.ready;

      const token = await getToken(messaging, {
        vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY,
        serviceWorkerRegistration: registration,
      });
      console.log('this is token :', token);
      if (!token) {
        errorAlert(t('something_went_wrong_while_generating_fcm_token'));
        return false;
      }

      const params = {
        registration_id: token,
        deviceable_type: 'User',
        locale: locale,
      };
      const response = await sendDeviceToken(params);
      if (response?.error || response?.errors) {
        errorAlert(response?.error || response?.errors?.[0]);
        return false;
      }
      return true;
    } catch (error) {
      console.log('this is error :', error);
      errorAlert('error_requesting_notification_permission');
      return false;
    }
  };
  const handleForegroundNotification = payload => {
    infoAlert(payload?.notification?.body, payload?.notification?.title);
  };

  const initializeNotification = async () => {
    const isGranted = await requestNotificationPermission();
    if (!isGranted) {
      return;
    }
    onMessage(messaging, handleForegroundNotification);
  };

  return {initializeNotification};
};
export default useNotifications;

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[Nader-CS]

any updates ?