我希望我的应用程序（静态网站）使用 Service Worker 离线运行。srcset如果不缓存属性中的所有图像，我看不到这样做的方法。我可以看到客户端提示将如何解决问题，但除了提供请求的文件之外，是否有一个解决方案可以在不涉及服务器做任何事情的情况下工作？
img给定标签中的信息和图像的命名约定，我也许可以看到 Service Worker 如何计算要请求的图像...
有没有人解决过这个问题，或者根本考虑过这个问题？
问问题
248 次
1 回答
1
对于完整的srcset功能，您确实必须缓存所有分辨率。
虽然屏幕密度似乎是设备的固定属性，但它实际上是动态的，例如智能手机可以向电视屏幕投射/播放。在具有多个显示器的台式机上（例如带有外部显示器的 Retina MacBook），当浏览器窗口四处移动时，屏幕分辨率可能会发生变化。所有这些更改可能会在您完成缓存后很长时间离线发生，因此您无法确定将选择哪些分辨率。
一个简单的解决方案是始终对所有内容使用 2x 图像。较高的 DPI 使图像失真不太明显，因此您可以更重地压缩它们以抵消更高分辨率的成本。
另一种解决方案是捕获图像上的加载错误并替换srcset为您知道已缓存的图像 URL。顺便说一句：您可能需要添加onerror="…"标记，因为错误可能会在任何其他脚本有机会在页面上运行之前触发，或者在添加错误处理程序之前以编程方式检查所有图像元素img.complete && !img.naturalWidth以检测错过的错误事件。
于 2016-10-11T23:13:41.330 回答