前記事のWeb Push(with VAPID Key)の実装(1)に引き続きWeb Pushの実装の話です。

今回はclientとなるブラウザで動くjavascript部分を中心に、そこで必要になるWordPressでの対応もまじえて解説します。

全体の流れとしては

  1. ServiceWorkerに通知受信用のjavascriptを登録
  2. Pushmanagerに通知受信用のVAPID keyを登録
  3. 2の際に発生したendpoint, auth, p256dhをWordPressに送信
  4. WordPressのDBにendpoint, auth, p256dhを登録(admin-ajax.phpの利用)

となります。

1.ServiceWorkerに通知受信用のjavascriptを登録

navigator.serviceWorker.register( "目的のjsファイルのurl" , {scope: './'} ).then( function(){}
基本的にはこれだけです。今後のために、存在を確認してupdateにしたりもしましたが、一定期間が過ぎたり指定jsファイルの内容が変わると自動的に更新されるらしいのでそこまで気にしなくてもよかったかもしれません。注意点があるとすれば、自動更新やupdate()だけだと対象ドメインのページを一度全て閉じないと更新されない点でしょうか。
また、jsファイル以下のディレクトリしかscopeに指定できない点にも注意が必要です。そのため今回はWordPressの1階層目にServiceWorker用のjsファイルをおいています。
Promiseで返ってくるので…

ログインして続きを読む