javascript - Service Worker 根据屏幕分辨率缓存不同大小的图像

Question

如果 screen.width 很小，我想缓存“small_image.png”，否则缓存“big_image.png”。我如何使用 ServiceWorker 做到这一点？

下面的代码将抛出 ReferenceError，因为 screen 没有在 service worker 上下文中定义。

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open('stackoverflow').then(function(cache) {
            if(screen.width <= 768){
                return cache.addAll(lowResImages);
            }else{
                return cache.addAll(highResImages);
            }
        })
    );
});

Answer 1

如果您有适当的 Client Hint enabled，这种信息可以在服务 worker 的 fetch 事件中作为请求 header 使用。 .

截至目前，它没有在 ServiceWorkerGlobalScope 中公开，也没有在传递给 install 处理程序的事件中公开。

基本上，这意味着您可以 make use如果您在 fetch 处理程序中使用运行时缓存，但在 install 处理程序中实现预缓存时，则不会包含该信息。