我想我的应用程序（一个静态网站）使用服务工作者离线运行。如果不缓存来自srcset属性的所有图像，我看不到这样做的方法。我可以看到client hints将如何解决问题，但除此之外，有没有一种解决方案可以在不涉及服务器的情况下执行任何操作而只是为请求的文件提供服务？如何使用Service Worker和srcset创建离线应用程序？
我可以看到也许是服务人员如何能够计算图像请求中给出的img标记和图像的命名约定的信息...
有没有人解决这个问题，或者它认为在所有？
对于完整的srcset功能，你将不得不缓存所有的分辨率。尽管屏幕密度似乎是设备的固定属性，但它实际上是动态的，例如，智能手机可以投射/播放电视屏幕。在浏览器窗口四处移动时，在具有多个显示器的桌面（例如带有外部显示器的Retina MacBook）屏幕分辨率可能会发生变化。所有这些更改都可能会在您完成缓存后很长时间才会发生，因此您无法确定将选取哪些分辨率。
一个简单的解决方案是总是使用2x图像的一切。较高的DPI使图像失真不那么明显，因此您可以使用compress them more heavily来抵消较高分辨率的成本。
另一种解决方案是在图像上捕获加载错误，并用您知道缓存的图像URL替换srcset。顺便说一句：您可能需要在标记中添加onerror="…"，因为错误可能会在任何其他脚本有机会在页面上运行之前触发，或者在以编程方式添加错误处理程序之前检查所有图像元素以检测错误事件img.complete && !img.naturalWidth。