我在标题中所说的只发生在chrome中，就像在firefox中一样“（导航器中的'serviceWorker'）”总是假的，并且“console.warn（'此浏览器不支持服务工作者。'）;”而是触发。
如果您清除浏览器或以隐身方式运行，那么它最初可以正常工作，但是当您第一次注销然后重新登录时会出现问题。
This is what it looks like in the network log
这是我注册SW的代码：
function activateSW(){
if('serviceWorker' in navigator){
if(window.location.pathname != '/'){
//register with API
if(!navigator.serviceWorker.controller) navigator.serviceWorker.register('/service-worker', { scope: '/' });
//once registration is complete
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration){
//get subscription
serviceWorkerRegistration.pushManager.getSubscription().then(function(subscription){
//enable the user to alter the subscription
$('.js-enable-sub-test').removeAttr("disabled");
//set it to allready subscribed if it is so
if(subscription){
$('.js-enable-sub-test').prop("checked", true);
$('.js-enable-sub-test').parent().addClass('checked');
}
});
});
}
}else{
console.warn('Service workers aren\'t supported in this browser.');
}
}
'/ service-worker'是一个发送到index.php的请求（通过.htaccess）。它最终以这个功能结束：
function serviceworkerJS($params){
$hash = API::request('settings', 'getSWHash', '');
if($hash != false){
setcookie('SW_Hash', $hash, time() + (86400 * 365 * 10), "/");
header('Content-type: text/javascript');
echo "'use strict';
var hash = '".$hash."';";
include(ROOT_PATH.'public/js/service-worker.js');
}elseif(isset($_COOKIE['SW_Hash'])){
header('Content-type: text/javascript');
echo "'use strict';
var hash = '".$_COOKIE['SW_Hash']."';";
include(ROOT_PATH.'public/js/service-worker.js');
}else{
header('HTTP/1.1 404 Not Found');
}
}
在chrome：// serviceworker-internals /中看到的Service-worker.js如下所示： （对地址的一些引用已被星星取代）
'use strict';
var hash = 'bd8e78963deebf350f851fbf8cdc5080';
var *****_API_ENDPOINT = 'https://*********.***/';
//For displaying notifications
function showNotification(title, body, icon, data, id) {
var notificationOptions = {
body: body,
icon: icon,
tag: id,
data: data
};
//possibly unnecessary
if(self.registration.showNotification){
return self.registration.showNotification(title, notificationOptions);
}else{
return new Notification(title, notificationOptions);
}
}
//asks the server for messages and sends them for displaying.
function getMessages(event){
//showNotification('debug', 'initial', '', '', 'debug1');
//build question
var FD = new FormData();
FD.append('hash', hash);
//ask start20 for the notifications
event.waitUntil(
fetch(*****_API_ENDPOINT + 'ajax-get-SW-notification/', {method: 'post', body: FD}).then(function(response){
//something went wrong
if (response.status !== 200){
console.log('Error communicating with ******, code: ' + response.status);
showNotification('debug', 'picnic', '', '', 'debug2');
throw new Error();
}
//decode the response
return response.json().then(function(data){
var len = data.notifications.length;
//showNotification('debug', len, '', '', 'propertyName');
//Display
for(var i = 0; i < len -1; i++){
showNotification(data.notifications[i].title,
data.notifications[i].body,
data.notifications[i].imageurl,
data.notifications[i].linkurl,
data.notifications[i].hash);
}
//the last one needs to be returned to complete the promise
return showNotification(data.notifications[len -1].title,
data.notifications[len -1].body,
data.notifications[len -1].imageurl,
data.notifications[len -1].linkurl,
data.notifications[len -1].hash);
});
})
);
}
//when the user installs a new SW
/*self.addEventListener('activate', function(event){
//getMessages(event);
//event.preventDefault();
event.waitUntil(return self.registration.showNotification('bicnic', { body: '*p' }));
});*/
//when the serviceworker gets a puch from the server
self.addEventListener('push', function(event){
getMessages(event);
event.preventDefault();
});
//get the link associated witht he message when a user clicks on it
self.addEventListener('notificationclick', function(event){
//ask if the notification has any link associated with it
var FD = new FormData();
FD.append('hash', event.notification.tag);
//get the link
event.waitUntil(
fetch(******_API_ENDPOINT + 'ajax-notification-has-link/', {method: 'post', body: FD}).then(function(response){
//something went wrong
if (response.status !== 200){
console.log('Error communicating with ********, code: ' + response.status);
return;
}
//decode the response
return response.json().then(function(data){
//if there's a link associated with the message hash
if(data.link){
console.log(******_API_ENDPOINT + 'notification-link/' + event.notification.tag);
return clients.openWindow(*****_API_ENDPOINT + 'notification-link/' + event.notification.tag);
}
});
})
);
});
//unnecessary?
/*self.addEventListener('install', function(event){
//event.preventDefault();
});
self.addEventListener("fetch", function(event) {
});//*/
现在，如果你评论“if（！navigator.serviceWorker.controller）navigator.serviceWorker.register（'/ service-worker'，{scope：'/'}）;”然后问题就消失了，但是服务工作者订阅和取消订阅停止工作。 （if语句似乎没有做太多，只是为了解决这个问题而添加）
我已经尝试了多种版本的activateSW（），它们具有不同的表达式，可以运行不同的表达式，并且没有设法使一个版本在不破坏服务工作者的情况下工作。我也试图在各个点（注册，帖子）上发现错误，但是这一点都没有成功，因为没有人会抛出任何错误。
我怀疑可能是问题在于，当您注册服务工作时，会触发激活事件。现在如果你抓住这个并完成事件承诺，那么你就无法订阅了。但是我怀疑当你注销时，服务人员仍然保持活动状态，这会导致问题。
如果您有任何疑问或想要查看更多代码，请随便询问。
编辑;这是解决方案：
self.addEventListener("fetch", function(event) {
event.respondWith(
fetch(event.request)
);
});
答案 0 :(得分：1)
您所看到的是Chrome DevTools网络面板中的混淆噪音，但不应对您的应用行为产生实际影响。
如果服务工作者控制页面但不包含fetch事件处理程序，则当前版本的Chrome（M44 stable和M46 canary）最终会使用{{1}在“网络”面板中记录所有网络请求状态，like you're seeing。实际请求仍然是在没有服务工作者干预的情况下进行的，这是第二个成功记录的条目。事情应该从你的页面的角度按预期工作，但我完全理解这种混乱。
我听说有人计划在发出网络请求并且没有(canceled)事件处理程序时，使Chrome的服务工作者实现更像是“无操作”。我不知道这些计划有多远，但我希望你看到的噪音一旦发生就会消失。