网络推送通知 FCM 可以在 iPhone 和 iPad 设备上使用吗？

Question

我有一个网站，我必须向所有设备和所有浏览器发送网络推送通知。根据我的搜索，我得到了一些答案：Web 推送通知在 iPad 和 iPhone 设备上不起作用。现在我正在使用 Firebase 云消息服务进行通知。这是我的代码。

 firebase.initializeApp({
apiKey: "AIzaSy.....................KvPTQ",
authDomain: "dro.......firebaseapp.com",
databaseURL: "https://dsadasdasda-default-rtdb.firebaseio.com",
projectId: "xyz",
storageBucket: "xyz.appspot.com",
messagingSenderId: "18........55",
appId: "1:183....6955:web:0a3.......5e",
measurementId: "G-L....31"
 });

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
  const messaging = firebase.messaging();

那么可以用APN证书吗？

Answer 1

无法向 iPhone 设备上的浏览器发送推送通知（使用 Firebase Cloud Messaging），因为它们不支持 Push API，https://caniuse.com/push-api。至于 Firebase 之外的其他服务，我很确定它也不起作用。我自己也查了很多资料，但不幸的是到目前为止还没有找到任何解决方案。

即使您使用 APN 证书，我认为您也必须采取让用户安装处理推送通知的本机应用程序的方式，这通常是您决定开发 Web 应用程序时想要避免的做法。 :)

Answer 2

根据 iOS 严格的隐私政策，为 Web 推送通知启用 Firebase Cloud Messaging (FCM) 需要两个关键步骤：

1 .手动用户交互：只能通过明确的用户操作（例如单击确认按钮）启用通知。

2 .添加到主屏幕：仅当使用 Safari 将网站添加到 iOS 主屏幕时，通知才会起作用。

以下是如何在 React 应用程序中实现此功能。

const requestFirebaseNotificationPermission = async () => {
setIsLoading(true);
const messaging = firebase.messaging();

try {
  console.log("Requesting notification permission...");
  const permission = await Notification.requestPermission();
  console.log("Permission result:", permission);
  setIsLoading(false);

  if (permission === "granted") {
    setIsLoading(true);
    const token = await messaging.getToken({
      vapidKey: process.env.REACT_APP_FIREBASE_VAPIED_KEY,
    });
    console.log("FCM Token:", token);

    if (token) {
      localStorage.setItem("firebase-token", token);
      setIsLoading(false);
    } else {
      console.warn("Token generation failed: No registration token available.");
    }
  } else {
    console.warn("Notification permission denied.");
  }
} catch (error) {
  console.error("Error during notification setup:", error);
}

setIsModalOpen(false);

};

return (
<div>
  <Confirmation
    isModalOpen={isModalOpen}
    setIsModalOpen={setIsModalOpen}
    onClick={() => requestFirebaseNotificationPermission()}
    titleHead="Notification Permission"
    message="Get real-time updates and notifications directly on your device. Enable notifications now!"
    buttonText={!isLoading ? "Allow" : ""}
    loading={isLoading}
    width={400}
  />
  <Notifications data={notification} setNotification={setNotification} />
  <MessageManager />
  <Index />
</div>

）； };

导出默认应用程序；