服务人员在Chrome中获取Cachebuster错误

Question

无可否认，我在这件事上很绿。我试图得到一个服务人员，以显示离线页面，我得到这个错误，当我把浏览器离线：

不能得到/offline.html?cachebust=1485461215845

我根据我的对这个职位代码：

http://deanhume.com/home/blogpost/create-a-really--really-simple-offline-page-using-service-workers/10135

我的index.html脚本有这个在它：

<script type="text/javascript"> 
// Register the service worker 
if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/sw.js').then(function(registration) { 
     // Registration was successful 
     console.log('ServiceWorker registration successful with scope: ', registration.scope); 
    }).catch(function(err) { 
     // registration failed :(
     console.log('ServiceWorker registration failed: ', err); 
    }); 
} 
</script> 

我的服务人员的代码（sw.js ）在它有这样的：

'use strict'; 
var cacheVersion = 1; 
var currentCache = { 
    offline: 'offline-cache' + cacheVersion 
}; 
const offlineUrl = 'offline.html'; 

this.addEventListener('install', event => { 
    event.waitUntil(
     caches.open(currentCache.offline).then(function(cache) { 
      return cache.addAll([ 
       offlineUrl 
      ]); 
     }) 
    ); 
}); 
this.addEventListener('fetch', event => { 
    // request.mode = navigate isn't supported in all browsers 
    // so include a check for Accept: text/html header. 
    if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) { 
     event.respondWith(
      fetch(event.request.url).catch(error => { 
       // Return the offline page 
       return caches.match(offlineUrl); 
      }) 
     ); 
    } 
    else{ 
     // Respond with everything else if we can 
     event.respondWith(caches.match(event.request) 
      .then(function (response) { 
       return response || fetch(event.request); 
      }) 
     ); 
    } 
}); 

调试代码看起来一切正常，除了（最后一行执行是返回caches.match（offlineurl）），但不是呈现离线网页我得到的缓存无效错误。关于cachebuster的谷歌并不多。任何洞察力将不胜感激。

Answer 1

我发现，当我在本地主机上运行，​​当我移植应用到HTTPS服务器（Heroku的）出现这个错误，offline.html行为与预期