Javascript history.pushState（）阻止“中的服务工作者”；“安装”；刷新

我有一个相当简单的服务人员（见下面的代码），我遇到了以下问题：

每次刷新时，浏览器都会尝试安装一个新的service worker（即使service worker或我的缓存资源中没有任何更改）。这会使我的服务人员在第一次刷新我的站点后在持续的“安装”阶段被阻止（请参阅）。无论是否使用skipWaiting（），这都是独立发生的

其他一切看起来都很好：注册时没有错误消息，所有资源都可以在“缓存存储”中找到

编辑：所以我发现在初始化我们的应用程序时调用history.pushState（）会阻止我的服务人员处于“安装”状态。如果我在没有此调用或使用setTimeout（）的情况下运行应用程序，则服务人员运行正常。这给我的印象是，在服务工作者注册之前调用history.pushState（）会导致工作者阻塞。你知道为什么吗

var version = 1489760334594;
var CACHE_NAME = 'mini-cache-v' + version;

var urlsToCache = ['./index.html','./app.css','./app.js','./assets/layers-2x.png','./assets/layers.png','./assets/logo-x48.png','./assets/logo.png','./assets/marker-icon.png','./assets/marker-shadow.png','./assets/poi.png','./assets/status.png','./assets/MaterialIcons-Regular.eot','./assets/MaterialIcons-Regular.ttf','./assets/roboto-regular.ttf','./assets/MaterialIcons-Regular.woff','./assets/MaterialIcons-Regular.woff2'];


self.addEventListener('install', function (event) {
  console.log('INSTALL SW: ', CACHE_NAME);
  //Open cache and add new resources from network
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache)
          .then(function(){
            console.log('Added resources');        
          })
      })  
  );
  //Activate new SW directly
  // console.log('SKIP WAITING');
  // return self.skipWaiting();
});

self.addEventListener('activate', function(event) {
  console.log('ACTIVATE SW: ', CACHE_NAME);
  //Delete old caches
  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== CACHE_NAME) {
          return caches.delete(key);
        }
      }));
    }) 
  );
});

self.addEventListener('fetch', function(event) {
  //If present serve from cache, else from network
  event.respondWith(
    caches.open(CACHE_NAME).then(function(cache){
      return cache.match(event.request.url)
        .then(function(response) {
          if (response) {
            console.log('SERVED FROM CACHE:', response);
            return response;
          }
          return fetch(event.request).then(function(response){
              // console.log('Response from network is:', response);
              return response;
          });
        }
      )
    })
  );
});

---

一个相当简单的问题，但是缓存是否被删除？当服务工作者在“安装”阶段被阻止时，缓存不会被删除。当我在软件中进行更改并注册新缓存时，缓存将被删除，新缓存将按预期插入。然而，要注册新软件，我需要关闭/打开chrome两次。一次解除阻塞的“安装”状态，一次激活新软件（skipWaiting）。Ps：我刚刚编辑了我今天发表的关于localStorage的评论（见上文），因此我发现是什么阻止了我的服务人员处于“安装”状态。这是对应用程序初始化时history.pushState（）的调用。如果我在没有此呼叫的情况下运行应用程序，则服务人员可以正常运行。但是，我想了解为什么应用程序代码中调用history.pushState（）会与服务人员冲突。有什么想法吗？据我目前所知，本地存储和服务人员不能很好地协作，因为一个是同步的，另一个是异步的。只要看一下您的代码，我建议检查

cache.match

方法的“fetch”事件。我不确定您是应该检查

事件.request.url

还是只检查

事件.request

。您可以尝试这样做，以便在chrome dev工具栏的“应用程序>服务人员”选项卡中重新加载时更新服务人员，然后通过避免浏览器关闭/打开过程，硬重新加载将帮助您进行调试。或者手动删除它。是的，确实

code

cache.match（event.request.url）是一种变通方法，而不是使用

code

cache.match（event.request）。后者在我的服务器设置中以某种方式返回未定义：