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

Question

我有一个小的Nuxt SSR网站，其中包含通过FCM进行推送的通知。对于推送通知（Push-API），我使用nuxt-fire。在Windows和Android的Chrome（闪烁引擎）或FireFox（Gecko引擎）中，效果很好。现在，一个朋友有一个问题，该网站不显示任何内容。他正在使用Apple设备。苹果有WebKit的要求，因此Chrome也将WebKit用作Apple的引擎。 WebKit不支持Push-API，但是有其自己的解决方案APN（Apple Push Notifications）。

WebKit下的错误消息如下：“ FirebaseError：消息传递：此浏览器不支持使用Firebase SDK所需的API。（消息/不支持的浏览器）”

现在，我正在寻找一种方法，以不将nuxt-fire中的firebase消息加载到不受支持的设备/引擎上的Nuxt.js中（Internet Explorer也不支持Push API）。这是JS中检查支持的设备/引擎的可能性：

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中是否可以执行此操作？还是作为插件/中间件？

非常感谢您，

雅各布

Answer 1

这里来自nuxt-fire的帕斯卡。

您可以看到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的帕斯卡。

您可以看到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上创建问题，我们很乐意对此进行调查。

希望有所帮助。

更新-解决方案

结果可以通过重新安装模块解决。为确保其正确安装，请删除node_modules文件夹，删除package-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），这可能是部署应用程序的另一个原因坏了。