Webプッシュ通知4

カテゴリ：HTML/CSS/JS, PHP, Web Push 投稿日：2016年6月17日

前回の続き
連載一覧はWeb Pushカテゴリ

次は独自のメッセージを表示させましょう。
service-worker.jsを弄ります。そっくりそのまま書き換えてください。
ブラウザプッシュ通知とユーザー個別に内容を送信する実装方法 in GAMY – Qiitaより

function getEndpoint() {
  return self.registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (subscription) {
        return subscription.endpoint
      }
      throw new Error('User not subscribed')
  })
}

self.addEventListener("push", function(event) {
  event.waitUntil(
    getEndpoint()
    .then(function(endpoint) {
      return fetch('<URL>?endpoint=' + endpoint)
    })
    .then(function(response) {
      if (response.status === 200) {
        return response.json()
      }
      throw new Error('notification api response error')
    })
    .then(function(response) {
      self.registration.showNotification(response.title, {
        icon: response.icon,
        body: response.body
      })
    })
  )
})

本当は参照元ページの一番下にあるURLをクリックした時それをリンクを開く挙動もやってみたいのですがうまく行かなかったので
URLは相対でも絶対でも構いませんが、他のサーバーのURLした時はPHPの場合、

header('Access-Control-Allow-Origin: *');

などを入れておきましょう。また、jsonで提供するので

header("Content-Type: application/json; charset=utf-8");

も忘れずに。あとは

echo'{ "title": "Title", "icon": "Icon(service-workerのあるサーバーの相対)", "body": "body"}';

などお好みの処理をしてください。

サーバーの種類によっては通知が2つ来たりメッセージが出なかったりすることがあります。