设置 Firebase 消息传递问题 messaging/only-available-in-sw

Question

我正在尝试在我的 angularJS 项目中设置 firebase 以使用后台通知和应用程序通知。

我做了什么：

通过 npm install --save firebase
将 manifest.json 和发件人 ID 添加到根目录
将此脚本放入 <head>：
- <script src="node_modules/firebase/firebase-app.js"></script>
- <script src="node_modules/firebase/firebase-messaging.js"></script>

在 <body> 打开后添加此脚本：

<script>
    var config = {
        apiKey: "AIzaSyDAVuWKUL-aPoGasdEi-EMR7uFN1gtgk0s",
        authDomain: "testproject-d71.firebaseapp.com",
        databaseURL: "https://testproject-12d71.firebaseio.com",
        projectId: "testproject-12d71",
        storageBucket: "",
        messagingSenderId: "123128116401"
    };
    firebase.initializeApp(config);
</script>

在<body>
末尾添加这个脚本
- <script src="js/configFcm.js"></script>

即：

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Title';
    const notificationOptions = {
        body: 'body.',
        icon: '/firebase-logo.png'
    };

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

这就是我所做的，我没有在应用通知中配置，只是在后台配置。我在控制台中遇到错误：

Uncaught code: "messaging/only-available-in-sw"

message: "Messaging: This method is available in a service worker context (messaging/only-available-in-sw)."

stack: "FirebaseError: Messaging: This method is available in a service worker context. (messaging/only-available-in-sw)

什么是service-worker？它只是客户端吗？我正在从 index.html 执行此脚本，所以我很困惑。

Answer 1

您目前正在使用默认的 firebase 库。相反，将它与 angularfire 库一起使用，它将处理与 firebase 相关的大部分事情。以下是使用 firebase 和 angularfire 的基本教程：

初始化步骤没问题。
在你的 index.html 中注入 angularfire。
 <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>.
在应用程序中将 firebase 注册为一个模块。
var app = angular.module("sampleApp", ["firebase"])
现在你可以开始了。

请按照以下参考资料了解有关如何将 angularfire 与 firebase 结合使用的更多信息。

设置 Firebase 消息传递问题 messaging/only-available-in-sw

Set firebase messaging issue messaging/only-available-in-sw

notifications

angularjs

firebase

firebase-notifications