如何在ReactJS中集成Firebase版本9,用于Web推送通知和单个服务工作文件

gudnpqoy  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(71)

我正在尝试为使用Create React app version 5构建的React应用添加firebase web推送通知。集成工作正常。我注意到,在较新的版本中,我们可以访问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并使用一个包含firebase代码沿着其他service worker代码的单一service worker文件。

kognpnkq

kognpnkq1#

我可以通过在默认的service-worker.js文件中添加firebase v9代码来解决这个问题。

/**
 * 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。

相关问题