javascript - FirebaseError browserErrorMessage : "Failed to register a ServiceWorker: ServiceWorker script evaluation failed"

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. 通过 create-react-app Pushnotification 创建了一个 React 应用

2. 在我的项目中使用 sudo npm install --save firebase 下载了 firebase

3. 在 React 应用程序的 src 文件夹中创建了一个 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");
   }).catch(function(error){
       console.log(error);
   })
   

当我刷新我的网络应用程序时，它会请求如下所示的权限:

到目前为止，一切正常，现在我正在更新我的 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-messaging-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();

在我的公共(public)文件夹中，现在当我刷新页面时，出现上述错误:

Answer 1

出于某种原因，由于文档不完整/不清楚(至少对我来说!)，进行 Firebase 集成需要几天时间。分享对我有用的东西。

我的设置:

• 应用程序: react 网络应用程序
• 使用 firebase js sdk

什么对我有用:

1. 目录结构:

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

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

在index.html中添加了这些脚本:( reference )

<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 中。

firebase-messaging-sw.js:(reference)

• 必须将 firebase.intializeApp() 放入 index.html 和此文件中，否则我会收到“firebase serviceworker 脚本评估失败”消息。

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);
});