可以将未缓存的请求绕过服务人员

Question

最近，我采用Service Worker通过使用缓存优先策略来加快初始HTML加载：

function cacheFirst () { /* ... */ }

self.addEventListener('fetch', (event) => {
    const { request } = event
    if (request.mode === 'navigate' && request.method === 'GET') {
        event.respondWith(cacheFirst(event))
    }
})

它工作正常并且很酷。

但是，当我使用Chrome开发人员工具观察网站性能时，发现很烦人：我对宁静的api服务器的所有请求都由一小部分但明显的服务人员开销作为前提。

我看到我所有的烦恼请求都首先发送给服务人员。 并且由于这些请求不是要缓存的，因此fetch事件处理程序只会忽略该事件（不调用event.respondWith ）。 然后，正常请求由浏览器自身发出。

令我烦恼的是，与服务人员的这种空程往返大约需要15-40毫秒（在我的Android手机上最多为80-200毫秒）。 这对我来说很荒谬，我尝试通过消除对缓存结果的304响应来节省15-40毫秒，但是在请求动态数据时引入了15-40毫秒的延迟。

我试图只调用event.respondWith(event.request)来请求我不希望缓存的请求，但是与删除服务工作者相比，我仍然可以观察到一些开销。

function cacheFirst () { /* ... */ }

self.addEventListener('fetch', (event) => {
    const { request } = event
    if (request.mode === 'navigate' && request.method === 'GET') {
        event.respondWith(cacheFirst(event))
    } else {
        event.respondWith(fetch(request))
    }
})

我在网上搜索时，并未发现与此性能缺陷有关的类似担忧（这使我怀疑IS服务工作者是否真正在现实世界中使用 ）。

除了我的故事， 我的问题是：我可以在请求一个宁静的api（我确定不应该对其进行缓存）时绕过service worker，同时仍然保留可缓存资源的好处。

Answer 1

（您可能会发现最近在Chrome开发者峰会上的这次演讲很有趣，因为它涵盖了同一领域的更多细节。）

您的说法是正确的，因为将服务工作者置于Web应用程序和网络之间会产生一定的开销，并且在速度较慢的设备/速度较慢的存储上，这种开销可能会更大。

理想情况下，如果您能够响应来自缓存的“重要”请求，则服务工作者将提高Web应用程序的整体性能。 例如，您可以先响应缓存请求来导航的事实，这意味着重复访问者应该比其他人更快地在其屏幕上看到内容。

但是您知道您的Web应用程序的网络流量模式是最好的，并且如果您的Web应用程序发出的大多数请求是针对不可缓存的远程API调用，那么增加的服务工作者开销可能会超过您缓存本地资产所获得的收益。 并非每个Web应用程序都属于该类别，是的，有很多“真实世界”的服务工作者表现良好的性能部署。 一个收集著名示例的网站是https://www.pwastats.com/

至于您关于绕过服务人员的URL的特定问题，无论您知道哪些URL都必须进入网络，当前没有可用的解决方案。 服务人员标准小组正在就解决方​​案进行一些集体讨论，可能涉及在注册服务人员时传递“路由”信息的方法，从而导致服务人员在请求与路由不匹配时不会拦截请求。 您可以阅读有关它的更多信息，如果您觉得有什么要补充的，可以参加： https : //github.com/w3c/ServiceWorker/issues/1026