Javascript 向所有请求添加动态标头

我需要向所有请求添加动态头，但我不知道如何做

我开始考虑定制插件的

requestWillFetch

功能，因此我开始编写以下代码：

var myPlugin = (function () {
    'use strict';

    const myPlugin = {
        requestWillFetch: async ({request}) => {
            var myHeaders = new Headers();
            myHeaders.append('Authorization', 'Bearer ' + my_dynamic_token);

            return new Request(request, {
                headers: myHeaders
            });
        }
    };

    return mysteryPlugin;
}());

workbox.routing.registerRoute(
    new RegExp('.*'),
    new workbox.strategies.NetworkFirst({
        plugins: [
            mysteryPlugin,
        ]
    })
);

问题是变量

my\u dynamic\u token

，我不知道如何传递给服务工作者。

---

现在我有一个

窗口。页面中有一个token

变量，但我看到了窗口和服务人员之间不通信的消息。

想到了两个可行的选项：

使用

postMessage

方法在软件和客户端之间中继消息

使用浏览器存储（localStorage，indexedDB）

第一个选项很容易实现，如果您真的只需要发送令牌，可能更适合

基本上，您需要在您的服务工作者中的

消息

事件上有一个事件侦听器，然后处理客户端（窗口）发送的内容

Mozilla的Service Worker Cookbook提供了一个直截了当的详细示例，说明了如何实现这一点：

阅读API参考也是一件好事：

可能不重要（输入错误）：在代码片段中，工作盒将接收

插件：[未定义]

，因为范围中是

myPlugin

，而不是

mysteryPlugin

。