如何根据环境变量自定义我的 Service Worker? [英] How can I customize my Service Worker based on environment variables?

问题描述

这看起来像这个 未解决的问题的副本.我将其标记为已回答还是删除?

This looks like a duplicate of this Unresolved Question. Do I mark this as answered, or delete?

我在 Vue CLI 3 应用程序中使用来自 workbox-webpack-plugin 的 InjectManifest.我注入的自定义服务工作者处理 Firebase 云消息传递 (FCM).我需要根据我的环境(本地、暂存和生产环境)监听来自不同发件人的消息.

I am using InjectManifest from workbox-webpack-plugin inside a Vue CLI 3 app. The custom service worker that I am injecting into has handling for Firebase Cloud Messaging (FCM). I need to listen for messages from different senders based on my environment (local, staging, and production).

理想情况下，service-worker.js 应该是这样的:

Ideally, service-worker.js would look like this:

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

firebase.initializeApp({
    'messagingSenderId': process.env.VUE_APP_FCM_SENDER_ID
});

然而，这段代码似乎没有被 webpack 触及，因为输出服务工作者仍然读取 process.env.VUE_APP_FCM_SENDER_ID 而不是硬编码的密钥.

However, this code doesn't seem to be touched by webpack, as the output service worker still reads process.env.VUE_APP_FCM_SENDER_ID instead of the hardcoded key.

如何通过 webpack 运行我的 service worker 来解析环境变量?

How can I run my service worker through webpack in order to resolve environment variables?

推荐答案

现在对你来说可能为时已晚，但对其他人来说，这就是我继续解决这个问题的方法.此过程仍将 .env 文件用于您的环境相关变量.
这个想法是创建一个新脚本来加载 .env 文件，该文件创建一个新文件，其中填充了 .env 文件中的变量.
在构建过程之后，我们只需在 sw.js 中导入新生成的文件以供使用.

It's probably way too late for you now but for others this is how I went on about getting around this. This process still utilizes .env file for your environment related variables.
The idea is to create a new script that loads the .env file which creates a new file populated with the variables from .env file.
After the build process we simply import the newly generated file in sw.js for it to be used.

以下是步骤.
首先创建一个名为 swEnvbuild.js 的文件，这将是您在 webpack

Here are the steps.
First create a file called swEnvbuild.js which will be your script that runs after webpack

//swEnvBuild.js - script that is separate from webpack
require('dotenv').config(); // make sure you have '.env' file in pwd
const fs = require('fs');

fs.writeFileSync('./dist/public/swenv.js',
`
const process = {
  env: {
    VUE_APP_FCM_SENDER_ID: conf.VUE_APP_FCM_SENDER_ID
  }
}
`);

其次，我们在 sw.js 中导入从 swEnvBuild.js 生成的名为 swenv.js 的文件.

Secondly, we import the file that was generated from swEnvBuild.js called swenv.js in our sw.js.

// sw.js
importScripts('swenv.js'); // this file should have all the vars declared
console.log(process.env.VUE_APP_FCM_SENDER_ID);

最后，要使用一个命令，只需在您的 npm 脚本中添加以下内容(假设您运行的是 Linux/Mac).

And lastly, for this to work with one command just add the following in your npm scripts (assuming that you're running either Linux/Mac).

scripts: {
  "start": "webpack && node swEnvBuild.js"
}

希望这应该可以解决问题.我希望有更清洁的方法来做到这一点，所以我很高兴知道其他人的解决方案.

Hopefully, that should do the trick. I wish there was much cleaner way to do this so I'd be happy to know how other's solution too.

这篇关于如何根据环境变量自定义我的 Service Worker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！