我试图在用户访问我的索引页面后立即缓存多个页面以供脱机使用。正在缓存的页面是可以完成的表单,可以在本地保存,直到设备获得连接为止。
一个特定的客户端具有20多种形式,这导致我的索引页面变得无响应。具体来说,尝试单击链接或导航到其他页面似乎要等待表单的 some 完成缓存。最终,另一个页面被加载,服务工作者继续其工作(根据控制台输出)。但是,索引页面仍显示鼠标悬停突出显示等。
我试图了解为什么导航到其他页面不是即时的。服务工作者是否不独立于我的网站而存在?
Index.js:
$(document).ready(function () {
// retrieve the form URLs to pass to the service worker
var urls = [];
$('.formTile').each(function {
var url = $(this).attr('href');
urls.push(url);
});
nav.serviceWorker.controller.postMessage(urls);
}
服务工作者JS:
self.addEventListener('message', function (event) {
var urls = event.data;
urls.forEach(function (url) {
var pageRequest = new Request(url);
var cacheSearch = function(request) {
return caches.match(request).then(function (matching) {
if (matching /* and some other checks */) {
// log output
} else {
caches.open('offline-forms').then(function (cache) {
return fetch(request).then(function (response) {
return cache.put(request, response);
});
});
}
return true;
}, function () {
// log error
return false;
});
});
event.waitUntil(cacheSearch (pageRequest));
}
}