我使用服务人员时无法访问站点答案

【问题标题】：Site can't be reached when im using service worker我使用服务人员时无法访问站点
【发布时间】：2017-10-29 14:15:10
【问题描述】：

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

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

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

这是服务工作者内部的代码

importScripts('/cache-poli.js');

var CACHE_VERSION = 'app-v2';
var CACHE_FILES = [
'/',
    '/js/plugins/bootstrap/js/bootstrap.min.js',
    '/js/plugins/bootstrap-select/bootstrap-select.min.js',
    '/js/plugins/prettyphoto/js/jquery.prettyPhoto.js',
    '/js/plugins/jquery.sticky.min.js',
    '/js/plugins/jquery.easing.min.js',
    '/js/plugins/animate/js/animate.js',
    '/js/jquery.fancybox.js',
    '/js/plugins/jquery/jquery-ui-1.11.1.min.js',
    '/js/jquery.scrollbar.min.js',
    '/js/plugins/owlcarousel2/owl.carousel.min.js',
    '/js/plugins/elevateZoom/jquery.elevateZoom-3.0.8.min.js',
    '/js/theme.js',
    '/js/cmsfuncs.js',
    '/js/theme-config.js',
    '/js/jquery.mCustomScrollbar.concat.min.js',
    '/js/plugins/jquery/jquery-2.1.4.min.js',
    '/js/jquery.cookie.js',

    '/js/plugins/bootstrap/css/bootstrap.min.css',
    '/fonts/fontawesome/css/font-awesome.min.css',
    '/fonts/webfont/css/simple-line-icons.css',
    '/fonts/elegantfont/css/elegantfont.css',
    '/js/plugins/bootstrap-select/bootstrap-select.min.css',
    '/js/plugins/owlcarousel2/assets/owl.carousel.min.css',
    '/js/plugins/prettyphoto/css/prettyPhoto.css',
    '/js/plugins/animate/css/animate.css',
    '/s/plugins/accordion/css/magicaccordion.css',
    '/css/jquery.scrollbar.css',
    '/css/megamenu.css',
    '/css/theme.css',
    '/css/slider/slide.css',
    '/css/jquery.mCustomScrollbar.css',
    '/css/responsive.css',
    '/css/theme.css'
];

self.addEventListener('install', function (event) {
event.waitUntil(
    caches.open(CACHE_VERSION)
        .then(function (cache) {
            console.log('Opened cache');
            return cache.addAll(CACHE_FILES);
        })
);
});


self.addEventListener('activate', function (event) {
event.waitUntil(
    caches.keys().then(function(keys){
        return Promise.all(keys.map(function(key, i){
            if(key !== CACHE_VERSION){
                return caches.delete(keys[i]);
            }
        }))
    })
)
});


self.addEventListener('fetch', function (event) {
event.respondWith(
    caches.open(CACHE_VERSION).then(function(cache){
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    })
)
});

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

无法访问此网站 domain.com 上的网页可能暂时关闭，或者它可能已永久移至新网址。

【问题讨论】：

标签： javascript service-worker

【解决方案1】：

我也有同样的错误。

实际上，这个问题是不言自明的。浏览器告诉的是你试图到达的路径不可达。

在您的代码中，您似乎已经缓存了根'/'。我假设您在尝试访问 '/somepath' 等其他路径时遇到了这个问题。
因为你没有缓存这些，你得到了这个错误。

所以在你的数组中，如果你还添加：

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

不会发生错误。

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

【讨论】：