17

我注意到等待服务工作者响应缓存中的项目的时间并不像您预期​​的那么快。我已经看到与sw-precache自定义书面服务人员的等待时间相同。

对 ServiceWorker 的请求

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

我fetch在自定义服务人员上的事件如下所示：

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

3 回答 3

5

您是否在应用程序 - > Service Worker 选项卡下的 Chrome 开发工具中检查了“重新加载时更新”？

如果是这样，那么我认为这可能是问题所在，因为它会sw-precache在每次重新加载时重新运行您的所有 Service Worker 代码，使用 , 时这可能是相当多的代码。

于 2017-05-23T11:33:08.953 回答
1

事件虽然我无法回答这个奇怪的等待时间的可能原因，但我知道如何减少它。

我们可以使用 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 的长请求等待时间：~400ms

所以我决定不拦截不必要的获取拦截（当然是通过删除最后一个块）：

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

然后我的页面只需要 16 毫秒就可以加载上述文件。

希望这会有所帮助

于 2017-06-23T06:25:48.837 回答
0

清除 indexedDB 将有助于减少“请求 Service Worker”所需的时间。你可以通过js删除它：

indexedDB.deleteDatabase(location.host);

或手动执行：

/Users/[USERNAME]/Library/Application Support/Google/Chrome/Default/IndexedDB/

于 2018-05-10T09:19:50.940 回答