如何在不触发权限提示的情况下检查 FCM 是否允许通知答案

【问题标题】：how t check if notifications are allowed with FCM without triggering a permission prompt如何在不触发权限提示的情况下检查 FCM 是否允许通知
【发布时间】：2021-07-18 14:56:46
【问题描述】：

我想知道用户是否在当前浏览器上允许通知，以便我可以在 UI 上显示该状态，但我不想触发请求权限，除非用户执行启用通知的操作。这是一种鸡蛋问题，因为我没有可靠的方法来识别当前用户浏览器。我可以将 FCM 令牌存储在 firebase 数据库中并在 FE 上获取它。但是每个浏览器的每个令牌都是唯一的，我无法将它与任何东西进行比较，我必须检查现有令牌之一是否适用于当前浏览器的唯一方法是使用 firebase FCM 中的 getToken 方法并检查返回的令牌在令牌列表中，但这可能会触发请求权限提示，除非用户要求，否则我不希望这样做。

一种可能的解决方案可能涉及在本地存储中存储一个标志，但如果用户清除它，当用户仍订阅 FCM 主题时，UI 将显示通知为禁用。我知道Notification API has a property that indicates，如果用户已授予通知权限，但这可能已经发生，并且由于某些随机网络错误而未检索到令牌，所以我不能仅仅依靠这个。此外，它仅指示用户是否已授予权限，但在我的应用程序逻辑通知可能被禁用（因为用户选择）并且不会撤销权限。

如果用户想要禁用通知，事情也不好：为了从数据库中删除令牌，我需要当前浏览器令牌，而知道当前浏览器令牌的唯一可靠方法是使用 getToken 询问它如果用户禁用了通知，可能会触发请求权限，我永远不会获得实际的令牌，我需要它从数据库中删除它

是否有关于如何处理此问题的指南？ FCM 文档非常稀少

【问题讨论】：

标签： firebase firebase-cloud-messaging progressive-web-apps

【解决方案1】：

这是一个我不确定它是否超级健壮的解决方案，但它很简单并且可能满足大多数情况。

首先，检查当前浏览器是否允许通知。如果没有，只需在 UI 上显示该值，因为即使在后端订阅用户也不会收到通知。

如果已经允许通知，您可以安全地运行 getToken（不会触发权限请求）并将值与用户/配置文件数据库中的值进行比较。

因为我在这里使用 react 是一个钩子上的实现：

  const areNotificationsAllowed =
    Notification && Notification.permission === "granted";

  useEffect(() => {
    // because we don't want to trigger a permission request
    if (!areNotificationsAllowed) return;
    // Notifications are allowed, we can safely run getToken to see if they are activated on this browser
    messaging.getToken({ vapidKey }).then((token?: string) => {
      if (!token) return setNotificationsEnabled(false);
      if (notificationsCfg[token]) setNotificationsEnabled(true);
    });
  }, [areNotificationsAllowed])

【讨论】：