我希望我的应用程序(静态网站)使用服务工作者脱机运行.如果不缓存srcset属性中的所有图像,我看不到这样做的方法.我可以看到
client hints将如何解决问题,但除此之外是否有一个解决方案可以工作,而不涉及服务器做任何事情,但服务请求的文件？
我可以看一下服务工作者如何根据img标签中的信息和图像的命名约定来计算要请求的图像……
有没有人解决这个问题,或者根本想过它？
解决方法
对于完整的srcset功能,您必须确实缓存所有分辨率.
虽然屏幕密度似乎是设备的固定属性,但它实际上是动态的,例如,智能手机可以投射/播放到电视屏幕.在具有多个显示器的桌面上(例如带有外部显示器的Retina MacBook),当浏览器窗口移动时,屏幕分辨率可能会改变.所有这些更改可能会在您完成缓存后很长时间内脱机,因此您无法确定将选择哪些解决方案.
一个简单的解决方案是始终使用2x图像.较高的DPI使图像失真不太明显,因此您可以compress them more heavily来抵消更高分辨率的成本.
另一种解决方案是捕获图像上的加载错误,并将srcset替换为您知道缓存的图像URL.顺便说一句：您可能需要在标记中添加onerror =“…”,因为错误可能会在任何其他脚本有机会在页面上运行之前触发,或者在添加错误处理程序之前以编程方式检查img.complete&的所有图像元素. &安培; ！img.naturalWidth检测错过的错误事件.
