如何在不受支持的设备（如 WebKit Safari）上禁用 nuxt-fire 消息传递（fcm）？

Question

我有一个小型 Nuxt SSR 网站，通过 FCM 推送通知。对于推送通知 (Push-API)，我使用 nuxt-fire。在 Windows 和 Android 中的 Chrome（Blink 引擎）或 FireFox（Gecko 引擎）这很有效。现在有个朋友遇到一个问题，就是网站不显示任何内容。他正在使用 Apple 设备。 Apple 有 WebKit 要求，所以 Chrome 也使用 WebKit 作为 Apple 下的引擎。 WebKit 不支持 Push-API 但有自己的解决方案，即 APN (Apple Push Notifications)。

WebKit下的报错信息如下："FirebaseError: Messaging: This browser doesn't support the API's required to user the firebase SDK. (messaging/unsupported-browser)"

现在我正在寻找一种方法，在不支持的 devices/engines 上不将 nuxt-fire 中的 firebase 消息加载到 Nuxt.js（Internet Explorer 不支持推送 API任何一个）。这是 JS 中检查支持的 devices/engines:

的可能性

if (firebase.messaging.isSupported())
    const messaging = firebase.messaging();
}

但是在 Nuxt.js 和 nuxt-fire 中，我如何以及在哪里使用它？

在 nuxt.config.js 中，我这样配置 nuxt-fire 模块：

    [
      'nuxt-fire',
      {
        config: {
          development: {
            ...
          },
          production: {
            ...
          }
        },
        useOnly: ['storage', 'messaging'],
        customEnv: false,
      }
    ]

在nuxt.config.js这里有办法做到这一点吗？或 plugin/middleware?

非常感谢，并致以最诚挚的问候，

雅各布

Answer 1

更新 - 解决方案

原来这个问题可以通过重新安装模块来解决。为确保安装正确，删除 node_modules 文件夹、删除包-lock.json，然后重新运行 npm i - 应该可以解决它。

可能原因：

在 v2.4.0 中，我们重新安排了插件的文件夹结构，请参阅 Release Notes。如果 Template src not found 出现，我们在发行说明中提到重新安装软件包。出于某种原因，您的应用需要 2 npm install 时间才能修复？也许 package-lock.json 没有被删除，我能想到的另一个原因是你的主机上可能已经完成了 node_modules 的缓存（例如，在 Netlify 上你应该做 Clear Cache and trigger deploy）这可能是部署的应用程序崩溃的另一个原因。

旧答案

这里是 nuxt-fire 的 Pascal。

如您所见here，我们在为您设置$fireMess 时已经进行了if firebase.messaging.isSupported()检查。如果浏览器不支持 Firebase Messaging，$fireMess 将为 undefined.

因此，在调用 $fireMess.requestPermission() 或 getToken() 之前（例如，在您的消息插件中，或在任何地方调用？），您必须做的是检查 $fireMess 是否存在，像这样：

if (!this.$fireMess) {
   // No browser support
   return
}

由于我不知道您是如何实施 Firebase Messaging 的，因此很难说出问题的确切位置 - 但可能就是这样。

请注意，nuxt-fire 所做的只是将 $fireMess 注入全局上下文，我们不进行任何初始化。

如果您认为这不能解决您的问题，请随时在我们的 GitHub issues page 上创建问题，我们很乐意调查。

希望对您有所帮助。

这里是 nuxt-fire 的 Pascal。

如您所见here，我们在为您设置$fireMess 时已经进行了if firebase.messaging.isSupported()检查。如果浏览器不支持 Firebase Messaging，$fireMess 将为 undefined.

因此，在调用 $fireMess.requestPermission() 或 getToken() 之前（例如，在您的消息插件中，或在任何地方调用？），您必须做的是检查 $fireMess 是否存在，像这样：

if (!this.$fireMess) {
   // No browser support
   return
}

由于我不知道您是如何实施 Firebase Messaging 的，因此很难说出问题的确切位置 - 但可能就是这样。

请注意，nuxt-fire 所做的只是将 $fireMess 注入全局上下文，我们不进行任何初始化。

如果您认为这不能解决您的问题，请随时在我们的 GitHub issues page 上创建问题，我们很乐意调查。

希望对您有所帮助。

如何在不受支持的设备（如 WebKit Safari）上禁用 nuxt-fire 消息传递（fcm）？

How to disable nuxt-fire messaging (fcm) on not supported devices (like WebKit Safari)?

webkit

firebase

firebase-cloud-messaging

vuejs2

nuxt.js

更新 - 解决方案

可能原因：

旧答案