服务工作者安装过程中的 Firebase 消息警告消息答案

【问题标题】：Firebase messaging warning messages on service worker install process服务工作者安装过程中的 Firebase 消息警告消息
【发布时间】：2020-08-29 20:34:40
【问题描述】：

我正在使用 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 配置数据时，我可以避免警告消息吗？

【问题讨论】：

标签： javascript firebase firebase-cloud-messaging service-worker

【解决方案1】：

基本上，Service Worker 脚本需要同步执行，这意味着您无法在 Promise 中初始化 Firebase 消息传递。

在这里吐口水，这是未经测试的，但试试这个：

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

【讨论】：

谢谢 Brian，await 选项没有任何区别，但是将变量 fbData 定义到 js 文件中可以正常工作。

【解决方案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
};

【讨论】：