为什么我的 Service Worker 存储了这么多缓存？答案

【问题标题】：Why is my service worker storing so much cache?为什么我的 Service Worker 存储了这么多缓存？
【发布时间】：2019-03-13 13:32:12
【问题描述】：

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

我按照 Mozilla 的 cache and update 配方指南实施了一个服务工作者，并对其进行了一些编辑。
基本上我（认为我）正在做的是：

安装 service worker
它缓存 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？
我必须刷新旧缓存吗？

【问题讨论】：

你查看过Caching Files with Service Worker的文档吗？

标签： javascript caching service-worker progressive-web-apps

【解决方案1】：

我也有这个缓存存储大小问题，在我的情况下，我正在缓存不透明的重定向请求以获取离线功能。

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

在 Chrome 中打开开发者工具：转到应用程序选项卡->转到缓存存储-> 检查您的缓存桶，检查响应类型，可能会有任何不透明的重定向缓存响应可用。

您可以查看以下链接以获取更多详细信息： service worker gotchas

【讨论】：

【解决方案2】：

您在安装时预缓存了一些文件，但之后您缓存了所有请求。（以一种低效的方式，但那是题外话）

请记住，每个唯一 URL 都是不同的 cahce 条目。因此，如果您有一个动态查询字符串，您的缓存可能真的会爆炸到最大 50MB。

【讨论】：