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

我在做什么：

通过create-react-app pushnotification创建了一个React应用
使用sudo npm install下载了Firebase-在我的项目中保存了Firebase

在具有以下内容的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);
   })

当我刷新我的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-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();

在我的公用文件夹中，现在当我刷新页面时，出现上述错误：

Answer 1

出于某种原因，由于文档不完整/不清楚（至少对我而言！），进行 firebase 集成需要几天时间。分享对我有用的东西。

我的设置：

应用：反应网络应用
使用 firebase js sdk

什么对我有用：

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

Answer 2

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

messaging.usePublicVapidKey("set your key here")

请参阅：

FirebaseError browserErrorMessage：“无法注册ServiceWorker：ServiceWorker脚本评估失败”

2 个答案: