关于Service Worker安装过程的Firebase消息警告消息

Question

我正在使用firebase进行推送Web通知，我的文件firebase-messaging-ws.js如下所示：

importScripts('https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.19.0/firebase-messaging.js');

    
fetch('./firebase-data.json')
.then(r => r.json())
.then(fbData => {
    let app = firebase.initializeApp(fbData);    
    firebase.messaging(app);
    console.log('Firebase Service Worker loaded for projectId:', fbData.projectId);
}).catch(err => {
    console.error('Error configuring firebase messaging: ', err)
});

我正在使用json文件firebase-data.json加载Firebase配置数据，并且可以正常工作，可以接收推送通知，但是当我调用firebase.messaging()时，控制台中会出现一些日志警告，如果我使用本地对象（不带fetch（）命令），则一切正常，并且没有警告消息。

日志消息类似于Event handler of 'XXX' event must be added on the initial evaluation of worker script.：

使用外部文件加载Firebase配置数据时是否可以避免出现警告消息？

Answer 1

基本上，服务工作者脚本需要同步执行，这意味着您无法在promise中初始化Firebase Messaging。

在这里打篮球，未经测试，但是请尝试以下操作：

importScripts('https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.19.0/firebase-messaging.js');

const response = await fetch('./firebase-data.json');
const fbData = await response.json();

let app = firebase.initializeApp(fbData);    
firebase.messaging(app);
console.log('Firebase Service Worker loaded for projectId:', fbData.projectId);

或者，如果它不喜欢在异步函数外部等待，请使用JavaScript导出配置数据，并使用importScripts将其公开给服务工作者：

firebase-data.js

const fbData = {...};

firebase-messaging-ws.js

importScripts('https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.19.0/firebase-messaging.js');
importScripts('./firebase-data.js');

let app = firebase.initializeApp(fbData);    
firebase.messaging(app);
console.log('Firebase Service Worker loaded for projectId:', fbData.projectId);

Answer 2

正如另一个答案所解释的那样，将fbData移至js文件可以在Service Worker脚本中使用该变量。

仅作记录，我做了所有这些操作以在Service Worker范围和Angular应用程序范围之间共享Firebase数据，firebase-data.js类似于：

const FIREBASE_DATA = {
    "apiKey": "***********",
    "authDomain": "***********.firebaseapp.com",
    "databaseURL": "https://***********.firebaseio.com",
    "projectId": "***********",
    "storageBucket": "***********.appspot.com",
    "messagingSenderId": "***********",
    "appId": "1:***************"
}


if (typeof module !== 'undefined') {
    module.exports = { ...FIREBASE_DATA }
}

通过此实现，我可以在服务工作者文件中使用self.FIREBASE_DATA，也可以将模块导入我的Angualr应用程序中，实例mi environment.ts类似于：

import FIREBASE_DATA from "../firebase-data";

export const environment = {
  production: true,
  url_base: '/api',
  firebase: FIREBASE_DATA
};