2017-06-19 57 views
2

嗨我有一个简单的服务人员,但我的Range header不被发送,甚至认为我可以登录请求对象。为什么我的服务人员范围标题不被发送?

self.addEventListener('fetch', async function(event) { 
    if (event.request.headers.get("range")) { 
     const response = await fetch(event.request.clone()); 

     return event.respondWith(this.getPartialResponse(event.request, response)); 
    } 

    return event.respondWith(fetch(event.request)); 
} 

async getPartialResponse(req, res) { 
    const pos = Number(/^bytes\=(\d+)\-$/g.exec(req.headers.get("range"))[1]); 
    const ab = await res.arrayBuffer(); 
    const headers = new Headers(res.headers); 

    headers.append("Content-Range", `bytes ${pos}-${ab.byteLength - 1}/${ab.byteLength}`); 
    headers.append("Content-Length", ab.byteLength - pos + 1); 

    return new Response(ab.slice(pos), { 
    status: 206, 
    statusText: "Partial Content", 
    headers 
    }); 
} 

在这里,您可以看到服务人员,第二个发送到API,在那里你可以注意到Range头部丢失逮住要求之一。为什么?我的浏览器:Chrome/59.0.3071.104 enter image description here enter image description here

回答

1

警告,我不知道range头部是什么,所以我承担。 为了安全起见,我知道某些标头对服务人员不可用。基本上你不能篡改请求和响应。例如,您无法访问来自第三方域的响应对象的Cache-Control,这样您就无法调整HTTP缓存逻辑。这可能是你的问题,但我不能肯定地说。 查询有关不透明请求&响应的规则。

+0

你可以在我的屏幕上看到我正在请求来自相同来源的视频 – Vardius

+0

好的,对范围标题做了更多的研究,好东西,我即将创建podcast PWA :) 我想如果你查看此Chrome项目中的演示代码,您将找到一些指导 - > https://github.com/GoogleChrome/sample-media-pwa 他们引用了远程响应库以提供帮助。 –

+1

谢谢,我会仔细看看这个,到目前为止我可以看到他们创建了Range请求缓存。 – Vardius

相关问题