Service Worker 在 Chrome 中出现 Cachebuster 错误答案

【问题标题】：Service Worker getting Cachebuster error in ChromeService Worker 在 Chrome 中出现 Cachebuster 错误
【发布时间】：2017-01-27 01:50:34
【问题描述】：

诚然，我对这些东西很陌生。我试图让服务人员显示离线页面，当我使浏览器离线时出现此错误：

无法获取 /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);
            })
        );
   }
});

调试代码看起来一切正常，除了（要执行的最后一行是 return caches.match(offlineurl)），但我没有渲染离线页面，而是得到了 cachebuster 错误。在 google 上没有太多关于 cachebuster 的内容。任何见解将不胜感激。

【问题讨论】：

Cannot GET /offline.html?cachebust=1485461215845 - 您尝试从中获取此信息的主机是否有 offline.html？
是的，我可以通过直接 url 浏览到文件

标签： javascript caching service-worker

【解决方案1】：

我发现当我在 localhost 上运行时会发生此错误，当我将应用程序移植到 https 服务器 (heroku) 时，offline.html 的行为符合预期

【讨论】：