服务人员根据屏幕分辨率缓存不同尺寸的图像

Question

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

下面的代码将引发ReferenceError，因为未在服务工作者上下文中定义屏幕。

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

如果您有适当的The Apache Commons Mathematics Library，则可以在服务工作者的fetch事件内部将此类信息用作请求标头。

到目前为止，它尚未在ServiceWorkerGlobalScope或传递给install处理程序的事件内部公开。

基本上，这意味着如果您在fetch处理程序中使用运行时缓存，则可以Client Hint enabled的信息，而在install处理程序中实现预缓存的情况下则不能