Question

我目前正在实施一个简单的服务工作者来提高网站的性能，网站提供缓存的资产，然后一旦网页加载，就会悄悄地检查ETAG以查看自上次访问以来它是否已经改变，如果有，它会在后台下载资源并在下次缓存它。

我尝试更改服务器上的图像，在桌面上chrome在20分钟后更新了资源，而在android上，从安装sw的那一刻起，缓存从未更新过，这是16小时前。我似乎无法理解这个问题是什么，也许你们可以提供帮助。值得一提的是，这是我第一次写一个服务工作者和一般的异步javascript。

这是我的代码：

 const staticAssets = [
    //Resources I want to be served using stale-while-revalidate
];

self.addEventListener('install', async event =>{
    const cache = await caches.open('rmi');
    cache.addAll(staticAssets);
});

self.addEventListener('fetch',event =>{
    const req = event.request;
    event.respondWith(cacheFirst(req));
});

async function cacheFirst(req){
    try{
        const cachedResponse = await caches.match(req)
        if  (cachedResponse == null)
            throw "Not In Cache";

        const cache = await caches.open('rmi');
        try{
            return  cachedResponse;
        } finally {
            addToCache(req.url,cache);
        }

    } catch(error) {
        const res = await fetch(req);
        return res;
    }
};

function addToCache(req,cache){

    fetch(req,{cache:'no-cache'}).then(function(response) {
    if (!response.ok) {
      throw new TypeError('Bad Response Status');
    }
    return cache.put(req, response);
    })

}

使用服务工作程序实现stale-while-revalidate，其行为类似于仅在移动

0 个答案: