Firebase 云消息传递：如何访问公共文件夹的环境变量

Question

我正在研究 React 和 Firebase，并且正在尝试集成 Firebase Cloud Messaging。我的主要挑战是将我的应用程序凭据传递给

firebase-messaging-sw.js

。该文件位于公共文件夹中，无法访问

.env

文件。我一直在查看许多教程，它们介绍了 FCM 设置，但没有介绍如何从公共文件夹中隐藏环境变量。

有一个类似的问题，但对于 Next.js。我按照说明进行操作，但没有得到正确的结果。

//firebase-messaging.sw.js
// eslint-disable-next-line no-undef
importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
// // eslint-disable-next-line no-undef
importScripts(
  "https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"
);
importScripts("swenv.js");

firebase.initializeApp({
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.image,
  };

  // eslint-disable-next-line no-restricted-globals
  self.registration.showNotification(notificationTitle, notificationOptions);
});

如何在公共文件夹中与我的

firebase-messaging.sw.js

共享环境变量？

Answer 1

您好，我想帮助您解决问题，这对我有用。首先，在此步骤中，您必须通过命令安装 dotenv

npm i dotenv

1. 删除您的 firebase-messaging.sw.js （如果公共目录中存在）

2. 具体配置你的 .env.local

NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=您的_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=您的_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=您的_APP_ID

3. 生成名为generate-sw-firebase.js的文件

4. 通过此代码填充这些文件

const fs = require('fs');
const path = require('path');

const env = process.env;

const firebaseConfig = {
  apiKey: env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: env.NEXT_PUBLIC_FIREBASE_APP_ID
};

const swContent = `
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js");

const firebaseConfig = ${JSON.stringify(firebaseConfig)};
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.image,
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});
`;

fs.writeFileSync(path.join(__dirname, 'public', 'firebase-messaging-sw.js'), swContent);

5. 在最后一步中，您可以通过添加此命令来编辑 package.json 中的脚本

"generate-sw": "node generate-sw-firebase.js",
"dev": "npm run generate-sw && next dev ",
"build": "npm run generate-sw && next build",

您可以通过命令运行您的项目

npm run dev

.