如何将firebase version 9集成到ReactJS中，通过一个service worker文件实现web推送

Question

我正在尝试添加firebase web推送通知与Create React应用程序版本5构建的React应用程序。集成工作得很好。我注意到，在新版本中，我们可以访问开箱即用的service-worker.js文件。由于该文件将是构建过程的一部分，因此我们可以在该文件中直接提供环境变量。而在Create React app版本3或更早的版本中则不是这样。

我们需要对service worker代码做一些修改。在当前的集成中，我们必须添加文档中提到的空firebase-messaging-sw.js。我已经在service-worker.js文件本身中添加了firebase初始化脚本，如下所示。

const firebaseApp = initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
});

由于某种原因，getToken永远不会被触发。只有当我从firebase v9降级到v8并使用旧语法时，它才有效。我的要求是我想使用firebase v9，并使用一个单独的service worker文件，其中包含firebase代码以及其他service worker代码。

Answer 1

我可以通过在默认的service-worker.js文件中添加firebase v9代码来解决这个问题。我需要将具有firebase代码的活动service worker传递给getToken函数，如下所示

/**
* Need to pass the service worker that has the firebase code
*/
const sw = await navigator.serviceWorker.getRegistration();  // <-- get the active service worker
getToken(messaging, {
serviceWorkerRegistration: sw // <-- pass that to the getToken function
})

如果你的应用程序中有多个service worker，那么navigator.serviceWorker.getRegistration()将返回一个数组。我们需要选择拥有firebase代码的service worker。