Question

我的整个网站大约3MB（包括图片），但是当我在chrome mobile上检查用于该网站的缓存时，表明正在使用大约50MB。我已经清除它并重置了站点设置，但是仍然会发生。

我已经按照Mozilla对cache and update食谱的指导方针实施了一名服务人员，并对其进行了少许编辑。
基本上，我（想想）正在做的是：

安装服务人员
它缓存CACHED_URLS
有请求时，它检查是否已缓存所需的资产：
- 如果是，它将从缓存中为其提供服务
- 如果没有，它将通过网络为他们提供服务
它用网络数据更新缓存（我知道，如果它已经在步骤3.2中从网络提供服务，则不应该这样做）

代码如下：

importScripts('/pwa/cache-polyfill.js');

var CACHE = 'my-cache';
var CACHED_URLS = [
    '/',
    '/index.html',
    '/index.html?homescreen=1',
    '/?homescreen=1',
    '/styles/index.min.css',
    '/font/fa.css',
    '/img/favicon.png'
];


self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE).then(function(cache) {
            return cache.addAll(CACHED_URLS);
        })
    );
});

// Mozilla - Cache and Update
self.addEventListener('fetch', function(evt) {
    console.log('The service worker is serving the asset.');

    // Cache or Fetch
    evt.respondWith(cacheOrFetch(evt.request));

    // Update Cache
    evt.waitUntil(update(evt.request));
});

function cacheOrFetch(request) {
    return caches.match(request).then(function(response) {
        return response || fetch(request);
    })
}

function update(request) {
    return caches.open(CACHE).then(function(cache) {
        return fetch(request).then(function(response) {
            return cache.put(request, response);
        });
    });
}

所以我的问题是：如果整个网站总计3MB，为什么要在缓存中存储40-50MB？
我必须刷新旧的缓存吗？

Answer 1

我也遇到了这个缓存存储大小的问题，以我为例，我缓存了不透明的重定向请求以提供脱机功能。

您可以检查是否有来自服务器端的请求重定向或状态码为3xx的任何请求服务，这些是不透明的响应/不透明重定向，会在缓存中占用过多的空间。

在Chrome中打开开发人员工具：转到“应用程序”标签->“转到缓存存储区”->检查您的缓存存储区，检查响应类型，可能会有不透明的重定向缓存的响应可用。

您可以在下面的链接中查看更多详细信息： service worker gotchas

为什么我的服务人员存储了如此多的缓存？

1 个答案: