React中src模块导入public方法及FCM onBackgroundMessage正确用法

1. 如何将src模块导入public文件夹？ #

public目录下的文件是静态资源，不会经过React项目的打包工具（如Webpack）处理，直接用import导入src里的模块必然报错——因为src的代码是经过编译转译的，和静态文件的运行环境不兼容。

可行的解决思路有两种：

• 把Service Worker纳入打包流程：将firebase-messaging-sw.js移到src目录下，修改Webpack配置，把它作为单独的入口打包到public目录。这样就能正常导入src里的模块，打包工具会自动处理依赖关系。示例配置：

  module.exports = {
    entry: {
      'firebase-messaging-sw': './src/firebase-messaging-sw.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'public')
    }
  };
  

• 抽离独立可复用的逻辑：如果只是需要少量逻辑，把src里需要用到的代码抽成不依赖React环境的纯函数，打包成UMD/CJS格式的文件放到public目录，然后在Service Worker里用importScripts()导入：

  // 在firebase-messaging-sw.js里
  importScripts('./utils.js'); // 假设utils.js是抽离后打包好的文件
  

2. 在React中应如何正确使用onBackgroundMessage？ #

Service Worker运行在独立于主线程的环境中，无法直接调用React相关的API（比如react-toastify的toast），因为这些API依赖React的DOM渲染环境。正确的使用流程是：

• 在Service Worker中处理原生通知：后台消息触发时，先调用浏览器原生的通知API展示消息，同时可以把消息数据存在IndexedDB里：

  // firebase-messaging-sw.js
  messaging.onBackgroundMessage((payload) => {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: '/firebase-logo.png'
    };
  
    // 存消息到IndexedDB
    saveMessageToDB(payload);
    // 弹原生通知
    self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

• 在React组件中处理后续逻辑：在React组件里，用FCM的onMessage监听前台消息，同时在组件挂载时检查IndexedDB里的未读后台消息，再用react-toastify展示提示：

  // src/components/Notification.js
  import { useEffect } from 'react';
  import { toast } from 'react-toastify';
  import { getMessaging, onMessage } from 'firebase/messaging';
  
  const Notification = () => {
    useEffect(() => {
      const messaging = getMessaging();
      // 监听前台消息
      onMessage(messaging, (payload) => {
        toast(`Message received: ${payload.notification.body}`);
      });
  
      // 检查IndexedDB里的后台消息
      checkStoredMessages().then(messages => {
        messages.forEach(msg => toast(`Background message: ${msg.notification.body}`));
      });
    }, []);
  
    return null;
  };
  

3. 从src目录向public文件夹导入模块是否合理？ #

完全不合理。

• public目录的定位是未经过打包的静态资源，直接被浏览器加载，不支持ES模块的导入语法（即使给文件加type="module"，也找不到src里打包后的模块路径）。
• src目录的代码会经过编译、转译、打包，最终输出到build目录（开发时是内存中的打包文件），和public里的静态文件不在同一运行环境，直接跨目录导入本质上是环境不兼容的错误做法。

内容的提问来源于stack exchange，提问作者Mark