本当にメモ書きなので具体的にどう実装するとか書いてませんすいません。

Service Worker

• ブラウザのページのライフサイクルとは別のライフサイクルでスクリプトが動き続ける
  • ページのタブを閉じてもブラウザを終了するまで動き続ける
• ペイロード(プッシュ通知に伝える任意の内容)をプッシュするには暗号化が必要
  • 暗号化していない場合はプッシュ通知はできるが任意の内容を送れない ので、通知をうけた後にサーバーに通知内容を取りに行って通知を出すといったことが必要となる
• endpoint
  • Chrome は https://android.googleapis.com/gcm/send/d4bju1Eaj0U:APA...3lY みたいな形
  • Firefox は https://updates.push.services.mozilla.com/wpush/v1/gAAAAABZ...bw8 みたいな形

参考

• 入門記事
  • Service Workerの基本とそれを使ってできること - Qiita
  • 最近流行りのWeb Push（プッシュ通知）を試してみる - Qiita
    • いろいろ試した結果、この記事に近い感じだとうまく動いた
    • いろいろ試した結果 push と同時に data 送れないみたいなので、push 受けたら再度サーバーに情報取りに行って通知出す方式
  • [改訂版] Web Pushでブラウザにプッシュ通知を送ってみる - Qiita
  • ServiceWorker を使ってプッシュ通知実装 - Qiita
• web-push-libs/webpush-java: Web Push library for Java
  • Java ライブラリ
• xuwei-k/webpush-scala: webpush scala example
  • Scala 実装サンプル
  • 上記の webpush-java を使っている
  • GCM ではない
• tomoyukilabs/WebPushTest: Test Web App for Web Push and W3C Push API
  • GCM を使った通知のフル Java 実装
• Web Push Payload Encryption  |  Web  |  Google Developers
  • payload 暗号化
  • これを理解できれば push と同時に payload が送れるのだろう・・・
• javascript - Why is my Service Worker’s push event data/payload null? - Stack Overflow
  • payload は暗号化しないと送れないよ的なことが書いてある

調べた感じ、ペイロードの暗号化を含めて自前でやるのはツラそうだったので webpush-java を使うことにした。

ハマったこと

Service Worker が反応しない

Service Worker の js は配置パス以下の階層にのみ適用される。 ので、/sw/xxx.js とかいうふうに sw ディレクトリをきって整理していると /sw でない普通のページに対して反応しなくなる。

ServiceWorker のスコープとページコントロールについて - Qiita

navigator.serviceWorker.register("/sw.js", {scope: "/scope/"}) というふうに scope を指定すれば配置パスに関わらず適用パスを決められる。たぶん。

2回目以降の通知がこない

showNotification の部分を以下のようにしていた。

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: '/assets/img/ogp.png',
      tag: "hogehoge"
    })
  );

tag: "hogehoge" を設定していると、同じ tag は同じ通知とみなされ、2回目以降 UI に表示されないみたい。

service worker - Multiple Chrome push notifications automatically closes except the last one - Stack Overflow

を参照すると、解決策は tagを設定しないこと らしい。 そうすると push する度に UI に通知された。