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

Posted 2023-02-24

【中文标题】FirebaseError browserErrorMessage：“无法注册 ServiceWorker：ServiceWorker 脚本评估失败”

【英文标题】：FirebaseError browserErrorMessage: "Failed to register a ServiceWorker: ServiceWorker script evaluation failed"

【发布时间】：2019-04-25 08:03:23

【问题描述】：

我已经按照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 --save 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);
)

当我刷新我的网络应用程序时，它会请求如下许可：

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

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

【问题讨论】：

@All alos 我已经研究过类似的问题，但没有任何效果，之前相同的代码正在工作，但在最后几天它不起作用

【参考方案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.initializeApp() 放入 index.html 和此文件中，否则我会收到“firebase serviceworker script evaluation failed”。

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

【讨论】：

能否分享完整repo的链接？

如果您询问我的代码库，对不起，它是私人的。如果您指的是 firebase 官方示例：github.com/firebase/quickstart-js/tree/master/messaging

谢谢，这非常有帮助。他们的样本存在如此微妙的问题。

【参考方案2】：

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

messaging.usePublicVapidKey("set your key here")

见：

https://firebase.google.com/docs/cloud-messaging/js/client#configure_web_credentials_in_your_app "Request is missing authentication credential" error when calling firebase.messaging.getToken() https://github.com/firebase/quickstart-js/tree/master/messaging

【讨论】：

嗨，使用***.com/questions/54996206/… 我已经生成了密钥，但问题仍然相同