长时间等待 Service Worker 的请求

Posted 2023-02-23

【中文标题】长时间等待 Service Worker 的请求

【英文标题】：Long time waiting Request to 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 中的错误，要么是您计算机上的性能限制。

您找到解决方案了吗？

我这里也有同样的问题。你找到解决办法了吗？

【参考方案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/