当数据被 DEFLATE 压缩时，服务工作者推送事件数据为空答案

【问题标题】：service worker push event data is null when data is DEFLATE compressed当数据被 DEFLATE 压缩时，服务工作者推送事件数据为空
【发布时间】：2021-08-28 13:51:24
【问题描述】：

我在 web 应用程序中使用 web 推送 API 来监听来自我的服务器的更新。这个更新数据是纯 JSON 格式的，但是对于 Web 推送 API 来说太大了，所以我决定压缩。但是，当我这样做时，服务工作者中推送事件的event.data 参数始终为空。这很奇怪，因为应用程序在没有这种压缩的情况下完全正常运行，并且浏览器接收到推送时没有错误。

这是我的 TS 代码，使用 pako 进行解压缩（虽然它永远不会达到这一点）：

(self as any).addEventListener('push', async (event: PushEvent) => {

    //This should be the DEFLATE compressed JSON
    const raw = pako.inflate(event.data.arrayBuffer()) //errors here due to data null

    const payload = JSON.parse(raw) as rideTime[]

    console.debug("received push from server")

    event.waitUntil(handlePush(payload, event))
});

here's chrome accepting the push. 在此之后推送事件成功分发。

据我所知，网络推送 API 应该与二进制消息兼容，但我使用的任何压缩算法都会导致此问题。任何线索表示赞赏。谢谢。

【问题讨论】：

您是否考虑过更改您的架构，让服务器只推送一个 URL，客户端随后从中获取更新？这可以完全消除对 JavaScript 解压的需要，您可以使用 Content-Encoding 来获取本机浏览器的解压。或者，您可以为此使用fflate：github.com/101arrowz/fflate
原来我只是忘了你需要对通过网络推送发送的数据进行 base64 编码。不过感谢 fflate 库，它比 pako 轻得多。

标签： javascript typescript browser service-worker web-push

【解决方案1】：

事实证明，作为 Web 推送负载发送的数据必须是文本。这当然意味着要发送二进制数据，必须对有效负载进行 base64 编码。未能对压缩数据执行此操作是我的问题的原因，与压缩无关。

【讨论】：