如何根据环境变量自定义我的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 Cloud Messaging(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运行服务工作者以解决环境变量?

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屋！