使用 Service Worker 时无法访问网站

Question

大家好，我是这项技术的新手，我想为我的代码寻求帮助。我想做的是缓存资产文件并从服务人员返回。

\n\n

这是我用来注册服务工作者的代码

\n\n

if ('serviceWorker' in navigator) {\nnavigator.serviceWorker.register('/serviceworker.js')\n.then(function(reg) {\n// registration worked\nconsole.log('Registration succeeded. Scope is ' + reg.scope);\n}).catch(function(error) {\n// registration failed\nconsole.log('Registration failed with ' + error);\n});\n}\n

\n\n

这是 Service Worker 内部的代码

\n\n

importScripts('/cache-poli.js');\n\nvar CACHE_VERSION = 'app-v2';\nvar CACHE_FILES = [\n'/',\n    '/js/plugins/bootstrap/js/bootstrap.min.js',\n    '/js/plugins/bootstrap-select/bootstrap-select.min.js',\n    '/js/plugins/prettyphoto/js/jquery.prettyPhoto.js',\n    '/js/plugins/jquery.sticky.min.js',\n    '/js/plugins/jquery.easing.min.js',\n    '/js/plugins/animate/js/animate.js',\n    '/js/jquery.fancybox.js',\n    '/js/plugins/jquery/jquery-ui-1.11.1.min.js',\n    '/js/jquery.scrollbar.min.js',\n    '/js/plugins/owlcarousel2/owl.carousel.min.js',\n    '/js/plugins/elevateZoom/jquery.elevateZoom-3.0.8.min.js',\n    '/js/theme.js',\n    '/js/cmsfuncs.js',\n    '/js/theme-config.js',\n    '/js/jquery.mCustomScrollbar.concat.min.js',\n    '/js/plugins/jquery/jquery-2.1.4.min.js',\n    '/js/jquery.cookie.js',\n\n    '/js/plugins/bootstrap/css/bootstrap.min.css',\n    '/fonts/fontawesome/css/font-awesome.min.css',\n    '/fonts/webfont/css/simple-line-icons.css',\n    '/fonts/elegantfont/css/elegantfont.css',\n    '/js/plugins/bootstrap-select/bootstrap-select.min.css',\n    '/js/plugins/owlcarousel2/assets/owl.carousel.min.css',\n    '/js/plugins/prettyphoto/css/prettyPhoto.css',\n    '/js/plugins/animate/css/animate.css',\n    '/s/plugins/accordion/css/magicaccordion.css',\n    '/css/jquery.scrollbar.css',\n    '/css/megamenu.css',\n    '/css/theme.css',\n    '/css/slider/slide.css',\n    '/css/jquery.mCustomScrollbar.css',\n    '/css/responsive.css',\n    '/css/theme.css'\n];\n\nself.addEventListener('install', function (event) {\nevent.waitUntil(\n    caches.open(CACHE_VERSION)\n        .then(function (cache) {\n            console.log('Opened cache');\n            return cache.addAll(CACHE_FILES);\n        })\n);\n});\n\n\nself.addEventListener('activate', function (event) {\nevent.waitUntil(\n    caches.keys().then(function(keys){\n        return Promise.all(keys.map(function(key, i){\n            if(key !== CACHE_VERSION){\n                return caches.delete(keys[i]);\n            }\n        }))\n    })\n)\n});\n\n\nself.addEventListener('fetch', function (event) {\nevent.respondWith(\n    caches.open(CACHE_VERSION).then(function(cache){\n        caches.match(event.request).then(function(response) {\n            return response || fetch(event.request);\n        })\n    })\n)\n});\n

\n\n

我使用谷歌浏览器开发工具来查看安装过程，所有内容都按应有的方式缓存，并且服务工作人员没有显示任何错误，但当我尝试再次访问该网站时，它给了我一个错误。

\n\n

无法访问此网站\xe2\x80\x99\ndomain.com 上的网页可能暂时无法访问，或者可能已永久移至新网址。

\n

Answer 1

我也有同样的错误。

事实上，这个问题是不言自明的。浏览器告诉您的是您尝试访问的路径无法访问。

在您的代码中，看起来您已经缓存了 root '/'。我假设您在尝试访问其他路径（例如'/somepath'.
因为您没有缓存这些，所以您收到了此错误。

因此，如果您还添加：

var CACHE_FILES = ['/',
                   '/somepath', ...];

就不会出现这个错误了。

我使用了完全相同的方法，错误消失了。