等待时间长的请求如何传递给Service Worker？

Question

我注意到等待服务工作者从缓存中响应项目的时间并不像您期望的那样快。我在使用sw-precache和自定义编写的服务工作者时都看到了相同的等待时间。

导致这种等待时间的可能原因是什么，我如何减少它？

我自定义服务工作者上的fetch事件如下：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});

- Kevin Farrugia

---

缓存的内容是否很多？ - abraham

我猜测这可能是Chrome的一个bug或者是你电脑性能的限制。 - abraham

你找到解决方案了吗？ - Chamika Sandamal

我这里也有同样的问题。你找到解决方案了吗？ - Roger Sampaio

@ChamikaSandamal - Kevin Farrugia

Answer 1

你是否在Chrome Dev工具的应用程序->服务工作者选项卡中勾选了“重新加载时更新”？如果是，那么我认为这可能是问题所在，因为它会在每次重新加载时重新运行所有服务工作者代码，当使用sw-precache时，代码量可能相当大。

- chrisdwheatley

---

不，情况并非如此。未选中“重新加载时更新”。 - Kevin Farrugia

这在我的应用程序中是个问题。我勾选了 禁用缓存，导致服务工作者花费了很长时间。当我禁用它时，一切恢复正常。 - Marcelo Lazaroni

这个也没有解决我的问题。即使禁用了“禁用缓存”，加载一个页面也需要一分钟的时间。 - Roger Sampaio

Answer 2

尽管我不知道这种奇怪等待时间的可能原因，但我知道如何减少它。

我们可以通过使用event.respondWith()在service worker中拦截fetch事件。在我的情况下，当我的页面需要通过脚本标签加载供应商的JavaScript时，我的服务工作者默认拦截每个fetch事件以执行缓存-然后-网络（对于资产）或仅网络（对于数据获取），就像这样：

if (shouldLoadOfflinePage) {
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage)));
} else if (shouldFromCache) {
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request));
} else {
    fetchEvent.respondWith(fetch(fetchEvent.request));
}

最后一个模块拦截了一个仅限网络请求，这样做是非常不必要的。这个不必要的模块会导致阻塞加载（但我不知道是什么阻止了它）： 向ServiceWorker发送长时间请求等待时间：约400毫秒 因此，我决定不拦截不必要的fetch-interception（当然是通过删除最后一个模块）。

if (shouldLoadOfflinePage) {
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage)));
} else if (shouldFromCache) {
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request));
}

那么我的页面只需要16毫秒来加载上述文件。

希望这能有所帮助。

- Rizki Romadhoni

---

你如何设置变量"shouldLoadOfflinePage"和"shouldFromCache"? 这段代码在service worker js的fetch事件中吗？ - Roger Sampaio

Answer 3

清除indexedDB将有助于减少“请求到服务工作者”的时间。您可以通过js删除它：

indexedDB.deleteDatabase(location.host);

或者手动操作：

/Users/[用户名]/Library/Application Support/Google/Chrome/Default/IndexedDB/

- facebook-570128180