banseivlog

大器晩成型 - 仕事中の覚え書きや反省文を書く程度のブログです

Browser Push #2 - 「このサイトはバックグラウンドで更新されました」

Pushのログその②

実装上は正しく呼び出しとか、例外とか処理しているようにのに
「このサイトはバックグラウンドで更新されました。」
という通知が何故か出てくる場合がある。

原因はだいたいコレ

  • event.waitUntil 内のPromiseでreturnを返していない
// bad pattern  
self.addEventListener('push', event => {  
  event.waitUntil(  
    promiseFunc()  
    .then(() => {  
      self.registration.showNotification('title');  
    })  
  );  
});  
  
// good pattern  
self.addEventListener('push', event => {  
  event.waitUntil(  
    promiseFunc()  
    .then(() => {  
      // ちゃんとreturnで終わらせましょう  
      return self.registration.showNotification('title');  
    })  
    .catch(err => {  
      // 例外も書いていたらしっかりと処理してあげる  
      return;  
    })  
  );    
});  

※ 正しく言うとwaitUntil内部のPromise完了後にshowNotificationが発火するといけない

Promiseをちゃんと返せているか確認してみよう。

ちなみに出てくる通知のtagはuser_visible_auto_notificationになる

------- 追記 (2016/07/05) --------

「このサイトはバックグラウンドで更新されました。」
これの細かい表示条件が以下のどちらにも当てはまるとき

  • Chromeでpushのイベント(event.waitUntil)が完了した時にまだ通知が表示されていない時
  • visibleなClientWindowがないとき

上2つの条件を満たすときに user_visible_auto_notificaiton なる通知が強制的に排出される。

メッセージとプッシュは1対1の関係が理想的