使用Service Worker获取侦听器请求修改

Question

我试图在来自应用程序的所有网络请求上添加一个自定义头，并试图通过服务工作者获取来实现这一点。标题的内容需要来自应用程序（客户端），所以在响应任何事件之前，我需要等待客户端的响应。下面是我实现这一目标的尝试

这是我的获取侦听器代码

function send_message_to_client(client, msg){
    return new Promise(function(resolve, reject){
        var msg_chan = new MessageChannel();

        msg_chan.port1.onmessage = function(event){
            if(event.data.error){
                reject(event.data.error);
            }else{
                resolve(event.data);
            }
        };

        client.postMessage("SW Says: '"+msg+"'", [msg_chan.port2]);
    });
}

self.addEventListener('fetch', function (event) {

    event.waitUntil(async function () {
        const client = await clients.get(event.clientId);
        send_message_to_client(client, "Pass Transaction Details")
            .then(function (m) {
                var req = new Request(event.request.url, {
                    method: event.request.method,
                    headers: event.request.headers,
                    mode: 'same-origin',
                    credentials: event.request.credentials,
                    redirect: 'manual'
                });

                var res_obj = JSON.parse(m);
                req.headers.append('MY_CUSTOM_HEADER', res_obj.hdr_val);
                return event.respondWith(fetch(req));

            })
            .catch(function (error) {
                console.log("Error after event.respondWith call");
                console.log(error);
            });

    }());
});

这是我如何注册这个工人和它的消息监听器

navigator.serviceWorker.register('/my-sw.js', {scope: '/'})
    .then(function(reg) {
        navigator.serviceWorker.onmessage = function (e) {
            var msg_reply = {
                "message" : "Replying to SW request",
            };
            msg_reply.hdr_val = sessionStorage.getItem('__data_val');
            console.log("Replying with "+ JSON.stringify(msg_reply));
            e.ports[0].postMessage(JSON.stringify(msg_reply));

        };
    }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
});

但显然它拍摄2个请求，1个原始请求和1个修改标题。

知道我做错了什么吗？我是javascript的新手，所以如果有一些愚蠢的错误，请原谅我。

从ServiceWorker调试控制台，我发现它在事件发生后立即进入catch块。respondWith（）调用，所以可能有什么问题？

Answer 1

您必须调用FetchEvent。在获取处理程序中同步响应（）。在代码中，您正在同步调用waitUntil（），但稍后调用respondWith（）。通过在从获取处理程序返回之前不调用respondWith（），您告诉浏览器继续使用其正常的网络路径而不进行拦截。

我想你想要这样的东西：

self.addEventListener('fetch', function (event) {
    // call respondWith() here
    event.respondWith(async function () {
        const client = await clients.get(event.clientId);
        send_message_to_client(client, "Pass Transaction Details")
            .then(function (m) {
                var req = new Request(event.request.url, {
                    method: event.request.method,
                    headers: event.request.headers,
                    mode: 'same-origin',
                    credentials: event.request.credentials,
                    redirect: 'manual'
                });

                var res_obj = JSON.parse(m);
                req.headers.append('MY_CUSTOM_HEADER', res_obj.hdr_val);
                // just return the response back to the respondWith() here
                return fetch(req);

            })
            // You probably want to add a .catch() to return some reasonable fallback
            // response.