服务工作者skipWaiting和clients.claim在第一次加载时没有控制浏览器

Question

现在我的服务工作人员看起来像这样：

self.addEventListener('install', event => {
  console.log('V1 installing…')
  self.skipWaiting()

  event.waitUntil(
    caches
      .open('sw-cache')
      .then(cache =>
        cache.addAll([
          '/assets/img/bbcourt-2pt.png',
          '/assets/img/bbcourt-3pt.png'
        ])
      )
  )
})

self.addEventListener('activate', event => {
  self.clients.claim()
  console.log('V1 now ready to handle fetches!')
})

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url)

  if (
    url.origin == location.origin &&
    url.pathname == '/assets/img/bbcourt-2pt.png'
  ) {
    event.respondWith(caches.match('/assets/img/bbcourt-2pt.png'))
  }

  if (
    url.origin == location.origin &&
    url.pathname == '/assets/img/bbcourt-3pt.png'
  ) {
    event.respondWith(caches.match('/assets/img/bbcourt-3pt.png'))
  }
})

目前，我正在尝试使用self.skipWaiting（）和self.clients.claim（）来立即使用此服务工作者控制浏览器，以便即使我使用bbcourt-2pt访问该页面.png和bbcourt-3pt.png在第一次加载时离线时，缓存的图像仍然由服务工作者提供。但是，服务工作者似乎还没有接管第一次加载。我做错了什么？