如何使用 Service Worker 和 srcset 创建离线应用？
How to create offline apps with Service Worker and srcset?
我希望我的应用程序（一个静态网站）使用 Service Worker 运行 离线。如果不缓存 srcset 属性中的所有图像，我无法找到执行此操作的方法。我可以看到 client hints 将如何解决问题，但除此之外，是否有一种解决方案可以在不涉及服务器执行任何操作的情况下提供服务请求的文件？
根据 img 标签中的信息和图像的命名约定，我或许可以看到 Service Worker 如何计算要请求的图像...
有没有人解决过这个问题，或者想过这个问题？
要获得完整的 srcset 功能，您确实必须缓存所有分辨率。
虽然设备的屏幕密度似乎是固定的 属性，但它实际上是动态的，例如智能手机可以 cast/airplay 到电视屏幕。在具有多个显示器的桌面上（例如带有外部显示器的 Retina MacBook）屏幕分辨率可能会在浏览器 window 移动时发生变化。所有这些更改都可能在您完成缓存后很长时间内离线发生，因此您无法确定将选择哪些分辨率。
一个简单的解决方案是始终对所有内容使用 2x 图像。更高的 DPI 使图像失真不那么明显，因此您可以 compress them more heavily 抵消更高分辨率的成本。
另一种解决方案是捕获图像加载错误，并将 srcset 替换为您知道已缓存的图像 URL。顺便说一句：您可能需要在标记中添加 onerror="…"，因为错误可能会在任何其他脚本有机会在页面上 运行 之前触发，或者在添加错误处理程序之前以编程方式检查所有图像元素的 img.complete && !img.naturalWidth 检测错过的错误事件。
我希望我的应用程序（一个静态网站）使用 Service Worker 运行 离线。如果不缓存 srcset 属性中的所有图像，我无法找到执行此操作的方法。我可以看到 client hints 将如何解决问题，但除此之外，是否有一种解决方案可以在不涉及服务器执行任何操作的情况下提供服务请求的文件？
根据 img 标签中的信息和图像的命名约定，我或许可以看到 Service Worker 如何计算要请求的图像...
有没有人解决过这个问题，或者想过这个问题？
要获得完整的 srcset 功能，您确实必须缓存所有分辨率。
虽然设备的屏幕密度似乎是固定的 属性，但它实际上是动态的，例如智能手机可以 cast/airplay 到电视屏幕。在具有多个显示器的桌面上（例如带有外部显示器的 Retina MacBook）屏幕分辨率可能会在浏览器 window 移动时发生变化。所有这些更改都可能在您完成缓存后很长时间内离线发生，因此您无法确定将选择哪些分辨率。
一个简单的解决方案是始终对所有内容使用 2x 图像。更高的 DPI 使图像失真不那么明显，因此您可以 compress them more heavily 抵消更高分辨率的成本。
另一种解决方案是捕获图像加载错误，并将 srcset 替换为您知道已缓存的图像 URL。顺便说一句：您可能需要在标记中添加 onerror="…"，因为错误可能会在任何其他脚本有机会在页面上 运行 之前触发，或者在添加错误处理程序之前以编程方式检查所有图像元素的 img.complete && !img.naturalWidth 检测错过的错误事件。