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

为此想到了两个可行的选择：

使用postMessage方法在SW和客户端之间中继消息
使用浏览器存储（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

向所有请求添加动态标头

1 个答案: