是否通過服務工作者批量或實時接收鉻通知？

Question

我想爲我的網站實現瀏覽器推送通知。即使瀏覽器收到通知，我也會注意到它有時不會顯示通知。

var showNotification = function (event, data) { 
    var notificationData = data['data']; 
    var title = notificationData['title']; 
    var body = notificationData['body']; 
    var icon = notificationData['icon']; 
    var notificationActionsData = notificationData["actions"]; 
    var actions = []; 

    if(notificationActionsData) { 
     for(var i=0; i < notificationActionsData.length; i++) { 
      var action = { 
       action: "action" + i, 
       title: notificationActionsData[i].title, 
      }; 
      actions.push(action); 
     } 
    } 

    var campaignId = notificationData["id"]; 
    self.registration.showNotification(title, { 
     body: body, 
     icon: icon, 
     data: notificationData, 
     tag: notificationData.id, 
     actions: actions 
    }); 

    pushowlReporting.tickle(campaignId, "delivery"); 
}; 

function processNotification(event) { 
    if (event.data) { 
     var data = event.data.json(); 
     showNotification(event, data); 
    } 
    else { 
     fetch("https://" + hostname + "/api/v1/subdomain/" + subdomain + "/campaign/", {'mode': 'no-cors'}).then(
      function (response) { 
       if (response.status !== 200) { 
        console.log('Looks like there was a problem. Status Code: ', response.status); 
        return; 
       } 

       // Examine the text in the response 
       response.text().then(function (responseText) { 
        var data = JSON.parse(responseText); 
        showNotification(event, data); 
       }); 
      } 
     ).catch(function (err) { 
       console.log('Fetch Error :', err); 
      } 
     ); 
    } 
} 

self.addEventListener('push', function (event) { 
    event.waitUntil(processNotification(event)); 
}); 

我的報告API顯示通知已交付，但瀏覽器間歇性地顯示通知。

通知顯示非常不穩定。有時候通知會立即顯示，有時候它不會顯示一會兒，突然之間所有過去的通知都會批量進入。有時候某些通知根本不會顯示。

讓我知道如果我在這裏做錯了什麼？

Answer 1

傳遞給event.waituntil的函數應返回一個承諾。如果不是這個範圍會被搞砸，因爲事件的生命週期不會延長。 https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil

var showNotification = function (event, data) { 
    var notificationData = data['data']; 
    var title = notificationData['title']; 
    var body = notificationData['body']; 
    var icon = notificationData['icon']; 
    var notificationActionsData = notificationData["actions"]; 
    var actions = []; 

    if(notificationActionsData) { 
     for(var i=0; i < notificationActionsData.length; i++) { 
      var action = { 
       action: "action" + i, 
       title: notificationActionsData[i].title, 
      }; 
      actions.push(action); 
     } 
    } 

    var campaignId = notificationData["id"]; 
    return self.registration.showNotification(title, { 
     body: body, 
     icon: icon, 
     data: notificationData, 
     tag: notificationData.id, 
     actions: actions 
    }).then(function (succ) { 
     pushowlReporting.tickle(campaignId, "delivery"); 
    }); 
}; 
function processNotification(event) { 
    if (event.data) { 
     var data = event.data.json(); 
     return showNotification(event, data); 
    } 
    else { 
     return fetch("https://" + hostname + "/api/v1/subdomain/" + subdomain + "/campaign/", {'mode': 'no-cors'}).then(
      function (response) { 
       if (response.status !== 200) { 
        console.log('Looks like there was a problem. Status Code: ', response.status); 
        return; 
       } 

       // Examine the text in the response 
       response.text().then(function (responseText) { 
        var data = JSON.parse(responseText); 
        showNotification(event, data); 
       }); 
      } 
     ).catch(function (err) { 
       console.log('Fetch Error :', err); 
      } 
     ); 
    } 
} 

我剛纔添加return語句將你的代碼。嘗試一下。