向所有请求添加动态标头

Question

我需要向所有请求添加动态标头，但我不知道该怎么做。

我开始考虑自定义插件的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_dynamic_token，我不知道如何传递给服务人员。现在我在页面中有一个window.token变量，但是我读了窗口，服务人员无法互相通信。

Answer 1

想到两个可行的选择：

1. 使用postMessage方法在SW和客户端之间中继消息
2. 使用浏览器存储（localStorage，indexedDB）

第一个选项易于实现，如果您只需要发送令牌，则可能更适合。

基本上，您需要在服务工作程序中的message事件上具有事件侦听器，然后在那里处理客户端（窗口）发送的内容。

Mozilla的《 Service Worker Cookbook》提供了一个直接的详细示例，说明了如何实现：https://serviceworke.rs/message-relay.html

也阅读API参考可能是一件好事：https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage