Question

我正在尝试让serviceWorker拦截我的一些网址。此时，我只希望SW记录它正在做某事。

我得到控制台日志，说SW正确初始化，但永远不会调用fetch监听器。

到目前为止我尝试过的事情：

确保webpack不会修改我的SW源（手动获取JS文件会返回未经修改的版本）。
使用fetch检索我的JSON有效负载。
使用Chrome devtools在重新加载时更新我的SW（在多次重新加载后仍无效）。
如果我省略范围，SW会拦截所有请求，但我只想截取/boot/app/3/的请求。

我在SW上注册：

  if ('serviceWorker' in navigator)
    navigator.serviceWorker.register('sw-boot.js', {
      scope: '/boot/app/3/'
    });

SW的代码是：

const CACHE = 'boot';

console.log('sw-boot.js');

self.addEventListener('activate', function () {
  clients.claim();
  console.log('Now ready to handle fetches!');
});

self.addEventListener('fetch', function (evt) {
  console.log('The service worker is serving the asset.');

  evt.respondWith(fromNetwork(evt.request, 400).catch(function () {
    return fromCache(evt.request);
  }));
});

function fromNetwork(request, timeout) {
  console.log('fromNetwork');
  return new Promise(function (fulfill, reject) {

    var timeoutId = setTimeout(reject, timeout);

    fetch(request).then(function (response) {
      clearTimeout(timeoutId);
      fulfill(response);
    }, reject);
  });
}

function fromCache(request) {
  console.log('fromCache');
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request).then(function (matching) {
      return matching || Promise.reject('no-match');
    });
  });
}

然后我用以下内容获取我的网址：

  if ('serviceWorker' in navigator)
    return fetch(bootUrl, {credentials: 'same-origin'})
      .then(res => res.json())
      .then(json => {
        $rootScope.$evalAsync(() => {
          self.update(json);
          done();
        });
      });

Answer 1

我可以判断的是，您的服务工作者配置只会拦截从网址格式为/boot/app/3/的网页发起的请求，例如如果你有一个页面http://localhost:8080/boot/app/3/index.html并且这个页面加载了一些资产，那么这些资产的网络请求将被服务工作者截获，否则如果你有类似http://localhost:8080/index.html那么服务工作者将无法拦截请求，因为您在注册期间使用的范围

ServiceWorker不拦截URL

1 个答案: