Webプッシュサービス時々バグ

Question

サービスワーカーの実装に間違っていることがわかりません。

理想的には、「ウェブサイトはバックグラウンドでリフレッシュされました」という問題に直面しています。

コードでこの問題は発生していませんでしたが、プッシュ通知の利用者数が約600に達すると、すべてのコードで問題が発生し始めました。バックグラウンド更新の問題はありませんが、常に動作しません

var init = { method: 'GET', 
 
      headers: { 
 
       "Content-Type" : "application/javascript" 
 
      }, 
 
       mode: 'cors', 
 
       cache: 'no-cache' 
 
      }; 
 
var worker = self; 
 
var the_endpoint = ''; 
 

 
fetch(the_endpoint, init).then(function(response) { 
 
    return response.json(); 
 
}).then(function(data){ 
 
    worker.addEventListener('push', function(event) { 
 
    event.waitUntil(
 
     worker.registration.showNotification(data.title, { 
 
      body    : data.body, 
 
      icon    : data.icon, 
 
      requireInteraction : true 
 
     }) 
 
    ); 
 
    }); 
 

 
    if(data.link != '') { 
 
    worker.addEventListener('notificationclick', function(event) { 
 
     event.notification.close(); 
 
     var url = data.link; 
 
     event.waitUntil(
 
      clients.matchAll({ 
 
      type: 'window' 
 
      }) 
 
       .then(function(windowClients) { 
 
       for (var i = 0; i < windowClients.length; i++) { 
 
        var client = windowClients[i]; 
 
        if (client.url === url && 'focus' in client) { 
 
        return client.focus(); 
 
        } 
 
       } 
 
       if (clients.openWindow) { 
 
        return clients.openWindow(url); 
 
       } 
 
       }) 
 
    ); 
 
    }); 
 
    } 
 
});

試み2。

var init = { method: 'GET', 
 
      headers: { 
 
       "Content-Type" : "application/javascript" 
 
      }, 
 
       mode: 'cors', 
 
       cache: 'no-cache' 
 
      }; 
 
var worker = self; 
 
var the_endpoint = ''; 
 

 
self.addEventListener('push', function(event) { 
 
    event.waitUntil(
 
     fetch(the_endpoint, init).then(function (response) { 
 
     return response.json().then(function (data) { 
 

 
      var response = self.registration.showNotification(data.title, { 
 
      body: data.body, 
 
      icon: data.icon, 
 
      requireInteraction: true 
 
      }); 
 

 
      if (data.link != '') { 
 
      worker.addEventListener('notificationclick', function (event) { 
 
       event.notification.close(); 
 
       var url = data.link; 
 
       event.waitUntil(
 
        clients.matchAll({ 
 
        type: 'window' 
 
        }).then(function (windowClients) { 
 
        for (var i = 0; i < windowClients.length; i++) { 
 
         var client = windowClients[i]; 
 
         if (client.url === url && 'focus' in client) { 
 
         return client.focus(); 
 
         } 
 
        } 
 
        if (clients.openWindow) { 
 
         return clients.openWindow(url); 
 
        } 
 
        }) 
 
      ); 
 
      }); 
 
      } 
 

 
      return response; 
 
     }); 
 
     }) 
 
); 
 
});

Answer 1

これが頻繁に発生する理由は、event.waitUntil()に戻った約束が示されている通知を解決していなかったです。

デフォルトが表示される場合があります例通知「のウェブサイトは、バックグラウンドでリフレッシュされました」：

function handlePush() { 
    // GOOD 
    return fetch('/some/api') 
    .then(function(response) { 
    return response.json(); 
    }) 
    .then(function(data) { 
    // GOOD 
    return showNotification(data.title, {body: data.body}); 
    }); 
} 

self.addEventListener(function(event) { 
    const myNotificationPromise = handlePush(); 
    event.waitUntil(myNotificationPromise); 
}); 

これがすべてである理由：

function handlePush() { 
    // BAD: The fetch's promise isn't returned 
    fetch('/some/api') 
    .then(function(response) { 
    return response.json(); 
    }) 
    .then(function(data) { 
    // BAD: the showNotification promise isn't returned 
    showNotification(data.title, {body: data.body}); 
    }); 
} 

self.addEventListener(function(event) { 
    event.waitUntil(handlePush()); 
}); 

代わりに、あなたはこのように書くべきでした重要なのは、ブラウザがイベントに渡される約束を待つことです.WaitUntilを解決/終了して、サービスワーカーを生きたまま実行する必要があることを知ってください。

プッシュイベントが解決されると、Chromeは通知が表示されていることを確認し、Chromeがこの通知を表示するかどうかについて競合状態/特定の状況になります。最善の策は、正しい約束を確実にすることです。

私はこの記事の約束にいくつか余分な注釈をつけています（「サイドクエスト：約束」https://gauntface.com/blog/2016/05/01/push-debugging-analytics参照）