如何通过Workbox在Service Worker文件中读取环境变量？

我来帮你搞定这个问题！要让根目录的sw.js能访问到环境变量，核心思路是借助Webpack的能力把环境变量注入到Service Worker文件里——毕竟你已经用了workbox-webpack-plugin的swSrc选项，Webpack会自动处理这个sw.js文件，正好可以利用这个流程完成变量注入。

下面是具体的实现步骤：

1. 配置Webpack注入环境变量 #

首先，我们需要用Webpack的DefinePlugin插件把.env里的变量暴露给sw.js。如果还没安装dotenv来加载.env文件，先装一下：

npm install dotenv --save-dev

然后修改你的webpack.config.js：

// 顶部先加载.env文件
require('dotenv').config();
const webpack = require('webpack');
const workboxPlugin = require('workbox-webpack-plugin');
const path = require('path');

module.exports = {
  // 其他原有配置...
  plugins: [
    // 新增DefinePlugin，按需注入你需要的环境变量
    new webpack.DefinePlugin({
      'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
      'process.env.APP_NAME': JSON.stringify(process.env.APP_NAME),
      // 有更多变量的话继续添加即可
    }),
    // 你原来的Workbox配置保持不变
    new workboxPlugin({ 
      globDirectory: 'dist', 
      globPatterns: ['**/*.{html,js,css,svg,otf,png,jpg,gif}'], 
      swSrc: './sw.js', 
      swDest: path.join('public', 'sw.js') 
    })
  ]
};

2. 在sw.js中直接使用环境变量 #

现在你可以在根目录的sw.js里直接访问注入的变量了，举个实际使用的例子：

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// 打印环境变量做测试
console.log('当前API地址：', process.env.API_BASE_URL);

// 用环境变量配置缓存前缀
workbox.core.setCacheNameDetails({
  prefix: process.env.APP_NAME || 'my-default-app',
});

// 预缓存Workbox生成的资源清单
precacheAndRoute(self.__WB_MANIFEST);

// 用环境变量配置API路由的缓存策略
registerRoute(
  ({ url }) => url.origin === process.env.API_BASE_URL,
  new StaleWhileRevalidate()
);

几个关键注意事项 #

• 别在sw.js里直接用require('dotenv')！Service Worker运行在浏览器环境，没有Node.js的模块系统，必须通过Webpack注入变量才能生效。
• 敏感信息绝对不能这么用！Service Worker文件会被客户端直接下载，像密钥、令牌这类敏感内容千万不能通过这种方式注入。
• 确保swSrc指向的文件被Webpack处理——你的现有配置已经满足这一点，workbox-webpack-plugin会把swSrc作为入口文件编译，所以DefinePlugin的变量会被正确替换。

内容的提问来源于stack exchange，提问作者M.Tae