长时间等待 Service Worker 的请求答案

【问题标题】：Long time waiting Request to Service Worker长时间等待 Service Worker 的请求
【发布时间】：2017-10-21 17:25:11
【问题描述】：

我注意到等待服务工作人员响应缓存中的项目的时间并不像您预期的那么快。我看到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);
        })
    );
});

【问题讨论】：

是否缓存了大量内容？
我不会这么说的。在一个应用程序中，我有 6 个项目，在另外 14 个项目上。在检索图像时，我在 ifixit app 上也注意到了同样的情况，但现在无法复制它。
我猜这要么是 Chrome 中的错误，要么是您计算机上的性能限制。
您找到解决方案了吗？
我这里也有同样的问题。你找到解决办法了吗？

标签： service-worker progressive-web-apps web-performance sw-precache

【解决方案1】：

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

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

【讨论】：

不，事实并非如此。 “重新加载时更新”未选中。
我的应用就是这种情况。我检查了Disable Cache，这使服务人员花费了很长时间。当我禁用它时，一切又恢复了正常。
这也没有解决我的问题。即使禁用了“禁用缓存”，加载页面也需要一分钟。

【解决方案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));
}

最后一个块拦截了一个完全没有必要做的纯网络请求。这个不必要的阻塞会以某种方式导致阻塞负载（但我不知道是什么阻塞了它）：

long request to serviceworker wait time: ~400ms

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

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

那么我的页面只需要 16ms 就可以加载上述文件。

希望这会有所帮助

【讨论】：

如何设置“shouldLoadOfflinePage”和“shouldFromCache”变量？此代码在 service worker js 的 fetch 事件上？

【解决方案3】：

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

indexedDB.deleteDatabase(location.host);

或手动操作：

/用户/[用户名]/库/应用程序支持/Google/Chrome/默认/IndexedDB/

【讨论】：