如何使用Service Worker和srcset创建脱机应用程序？

Question

我希望我的应用程序（静态网站）使用Service Worker离线运行。我无法在不缓存srcset属性中的所有图片的情况下看到这样做的方法。我可以看到client hints如何解决问题，但除此之外是否有一个解决方案可以在不涉及服务器做任何事情而是服务请求的文件的情况下工作？

我可以看到服务工作者如何根据img标签中的信息以及图像的命名约定来计算要请求的图像......

有没有人解决过这个问题，或者根本想过这个问题？

Answer 1

对于完整的srcset功能，您必须确实缓存所有分辨率。

虽然屏幕密度似乎是设备的固定属性，但它实际上是动态的，例如智能手机可以投射/播放到电视屏幕。在具有多个显示器的桌面上（例如带有外部显示器的Retina MacBook），当浏览器窗口移动时，屏幕分辨率可能会改变。所有这些更改可能会在您完成缓存后很长时间内完成，因此您无法确定将选择哪些解决方案。

一个简单的解决方案是始终使用2x图像。较高的DPI使图像失真不太明显，因此您可以compress them more heavily来抵消更高分辨率的成本。

另一种解决方案是捕获图像上的加载错误，并将srcset替换为您知道缓存的图像URL。顺便说一句：您可能需要在标记中添加onerror="…"，因为错误可能会在任何其他脚本有机会在页面上运行之前触发，或者在以编程方式添加错误处理程序之前检查img.complete && !img.naturalWidth的所有图像元素检测错过的错误事件。