如何使用Service Worker和srcset创建离线应用程序？

Question

如何使用Service Worker和srcset创建离线应用程序？

progressive-web-appsservice-workerclient-hints

4

我希望我的应用程序（静态网站）可以使用Service Worker离线运行。我无法想象在不缓存srcset属性中的所有图像情况下如何实现此功能。我可以看到如何使用客户端提示来解决这个问题，但除此之外是否有其他解决方案可以仅涉及服务器提供请求的文件而无需做任何其他事情？

我可以想象，Service Worker可以根据img标记中的信息和图片的命名约定计算要请求的图片...

有没有人解决过这个问题或者考虑过这个问题？

- Tim Niblett

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kornel · Accepted Answer

要实现完整的srcset功能，您确实需要缓存所有分辨率。

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

一个简单的解决方案是始终使用2x图像。更高的DPI使图像失真不那么明显，因此您可以更加压缩以抵消更高分辨率的成本。

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