我已成功注册service-workers.js且没有任何错误,并且已将所有需要脱机工作的文件存储在cache中。
但是,当我尝试检查它是否会在离线时回复200
It fails!
以下是代码:
//Delete Old Cache
caches.delete('[v0.1.0]');
//Latest CACHE_NAME
var CACHE_NAME = '[v0.1.1] Portfolio (ATB00ker)';
//Files to be Cached
var urlsToCache = [
'../../../index.html',
'../jquery-3.2.1.slim.min.js',
'../owl.carousel.min.js',
'../scrollreveal.min.js',
'../../images/bg-creator.webp',
'../../images/icon/facebook.svg',
'../../images/icon/telegram.svg',
'../../images/icon/gmail.svg',
'../../images/icon/github.webp'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, {ignoreSearch:true}).then(response => {
return response || fetch(event.request);
})
);
});
答案 0 :(得分:3)
您已离线/index.html
缓存,但您正在访问/
进行测试。这是两个不同的路径,您必须离线缓存您要访问的路径。
答案 1 :(得分:0)
您似乎无法离线。您必须将服务工作者指向要显示的脱机页面。这是一段代码:
self.addEventListener('fetch', function (event) {
console.log('Handling fetch event for', event.request.url);
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
console.log('Found response in cache:', response);
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function (response) {
console.log('Response from network is:', response);
return response;
}).catch(function (error) {
console.error('Fetching failed:', error);
return caches.match(OFFLINE_URL);
});
})
);
});
或者,您可以查看this。
答案 2 :(得分:0)
在我的案例中的问题是我把service-worker.js放在“assets / js / user”中,当我把它移到根目录“/”时它起作用了!
答案 3 :(得分:-1)