时间戳

首页 > 解决方案 > Service Worker 根据屏幕分辨率缓存不同尺寸的图片

javascript - Service Worker 根据屏幕分辨率缓存不同尺寸的图片

问题描述

如果 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);
            }
        })
    );
});

标签： javascriptcachingservice-worker

解决方案

如果您启用了适当的客户端提示，则此类信息可在您的服务工作者fetch事件中作为请求标头使用。

到目前为止，它还没有暴露在ServiceWorkerGlobalScope传递给install处理程序的事件的内部或内部。

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

推荐阅读