FirebaseError browserErrorMessage：“未能注册ServiceWorker: ServiceWorker脚本计算失败”

Question

我按照这个https://firebase.google.com/docs/cloud-messaging/js/client使用了FCM，下面是错误：

FirebaseError {code: "messaging/failed-serviceworker-registration", message: "Messaging: We are unable to register the default s…ed (messaging/failed-serviceworker-registration).", browserErrorMessage: "Failed to register a ServiceWorker: ServiceWorker script evaluation failed", stack: "FirebaseError: Messaging: We are unable to registe…tp://localhost:3000/static/js/0.chunk.js:57713:26"}
browserErrorMessage: "Failed to register a ServiceWorker: ServiceWorker script evaluation failed"

code: "messaging/failed-serviceworker-registration"
message: "Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: ServiceWorker script evaluation failed (messaging/failed-serviceworker-registration)."
stack: "FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: ServiceWorker script evaluation failed (messaging/failed-serviceworker-registration).↵    at http://localhost:3000/static/js/0.chunk.js:57713:26"
__proto__: Error

我所做的是：

1. 通过“创建-反应-应用程序推送通知”创建了一个app应用程序。
2. 使用sudo npm安装下载的防火墙--在我的项目中保存防火墙
3. 在react应用程序的src文件夹中创建了一个firebase.js文件，内容如下 从' firebase '；var config ={ apiKey："MY_KEY"，authDomain："MY_Domain"，databaseURL："MY_DBurl"，projectId："My_ProjectID"，storageBucket："My_StorageBucket"，messagingSenderId："My_Msg_id“}；firebase.initializeApp(config)；const messaging = firebase.messaging()；databaseURL console.log(”有权限“)；).catch(函数(错误){console.log(错误)；})

当我刷新我的web应用程序时，它要求获得如下许可：

​

​

到目前为止，一切正常，现在我正在像下面这样更新我的firebase.js文件，以发送推送通知：

import firebase from 'firebase';

var config = {
    apiKey: "MY_KEY",
    authDomain: "MY_Domain",
    databaseURL: "MY_DBurl",
    projectId: "My_ProjectID",
    storageBucket: "My_StorageBucket",
    messagingSenderId: "My_Msg_id"
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

messaging.requestPermission().then(function(){
    console.log("Have Permission");
    return messaging.getToken();
}).then(function(token){
    console.log(token)
}).catch(function(error){
    console.log(error);
});

messaging.onMessage(function(payload){
    console.log(payload);
})

此外，我还创建了一个具有以下内容的firebase消息传递-sw.js文件：

import firebase from 'firebase';

var config = {
    apiKey: "MY_KEY",
    authDomain: "MY_Domain",
    databaseURL: "MY_DBurl",
    projectId: "My_ProjectID",
    storageBucket: "My_StorageBucket",
    messagingSenderId: "My_Msg_id"
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

在我的公用文件夹中，现在当我刷新页面时，我得到了以下错误：

​

​

Answer 1

由于某些原因，由于文档不完整/不清楚(至少对我来说)，做基本的集成需要几天的时间。分享对我有用的东西。

我的设置：

• App:应用程序
• 使用firebase js sdk

什么对我有用：

1. 目录结构：

-src
-public
--firebase-messaging-sw.js
--index.html

是的，必须将firebase消息传递-sw.js放在“public”中，而不是根文件夹中。也许它必须与主入口点文件(index.html)的深度相同。

1. 在index.html：(参考文献)中添加了这些脚本

<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-messaging.js"></script>
<script type="text/javascript">
    try {
        if (!firebase.apps.length) {
            const firebaseConfig = { //from firebase project setting
            };
            firebase.initializeApp(firebaseConfig);
        }
    
        const messaging = firebase.messaging();
    
        messaging.onMessage((payload) => {
            console.log('Message received. ', payload);
    
            const notificationTitle = 'OnMessage Title';
            const notificationOptions = {
                body: 'OnMessage body.'
            };
    
            return self.registration.showNotification(notificationTitle, notificationOptions);
        });
    
        function resetUI() {
            const vapidKey = '<>'; //from firebase project settings
            messaging.getToken({ vapidKey: vapidKey }).then((currentToken) => {
                console.log("currentToken", currentToken);
                if (currentToken) {
                    //..
                } else {
                    console.log('No registration token available. Request permission to generate one.');
                    requestPermission();
                }
            }).catch((err) => {
                console.log('An error occurred while retrieving token. ', err);
            });
        }
    
        function requestPermission() {
            console.log('Requesting permission...');
            Notification.requestPermission().then((permission) => {
                if (permission === 'granted') {
                    console.log('Notification permission granted.');
                    resetUI();
                } else {
                    console.log('Unable to get permission to notify.');
                }
            });
        }
    
        resetUI();
    } catch (e) {
        console.log("firebase startup error ", e);
    }
</script>

后来，我能够将脚本中的上述代码移动到App.js。

1. 防火墙-消息传递-sw.js：(参考文献)

• 必须将firebase.intializeApp()放在index.html和这个文件中，否则我将得到“基本服务工作者脚本评估失败”。

importScripts('https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.2/firebase-messaging.js');
    
const vapidKey = '<>'; //from firebase project settings
const firebaseConfig = { //from firebase project settings
    ...
};
    
if (!firebase.apps.length) {
    try {
        firebase.initializeApp(firebaseConfig);
    } catch (e) {
        console.log("sw error", e)
    }
}
    
let messaging = firebase.messaging();
    
messaging.onBackgroundMessage(function (payload) {
    console.log('firebase Received background message ', JSON.stringify(payload));
    
    // const notificationTitle = 'Background Message Title';
    // const notificationOptions = {
    //     body: 'Background Message body.',
    //     // icon: '../assets/icon.png'
    // };
    
    // return self.registration.showNotification(notificationTitle,
    //     notificationOptions);
});

Answer 2

我认为您应该配置Web凭据。

messaging.usePublicVapidKey("set your key here")

请参见：

• 应用程序
• 调用firebase.messaging.getToken()时“请求缺少身份验证凭据”错误
• https://github.com/firebase/quickstart-js/tree/master/messaging