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

Question

我正在使用 firebase 推送网络通知，我的文件 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

基本上服务工作者脚本需要同步执行，这意味着您不能在承诺中初始化 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 }
}

通过这个实现，我可以在 service worker 文件中使用 self.FIREBASE_DATA，我也可以在我的 angualr 应用程序中导入模块，实例 mi environment.ts 类似于：

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

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

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

Firebase messaging warning messages on service worker install process

javascript

firebase

service-worker

firebase-cloud-messaging