Push.jsでプッシュ通知

Vueでの実装例

<template>
  <div class="hello">
  // クリックイベント
    <div class="push-btn" @click="push">
      クリックしてね
    </div>
  </div>
</template>

<script>
import Push from 'push.js'
export default {
  name: 'HelloWorld',
  methods: {
    push(){
        // pushメソッド内で通知内容を表記
      Push.create('Hello World!')
    }
  }
}
</script>

....
....
....

push.jsは、「Service Worker」を使ってブラウザにプッシュ通知を表示しています。

Service Workerとは、通常のJavaScript環境とは別に、 Webページのバックグラウンドで動かせる、イベント駆動のJavaScript環境です。

Push.createメソッドの中ではメッセージ内容やアイコン、表示時間やクリック後の挙動など、様々な内容を設定することができます。

– icon : アイコン

– body : 本文

– onClick : 通知をクリックした時のイベント

– onClose : 通知を閉じた時のイベント

– onError : エラーが発生した時のイベント

– onShow : 通知が表示された時のイベント

– tag : タグ

– timeout : 通知が消える時間 ( * ミリ秒 )

まとめ

プッシュ通知を行う前提として初回アクセス時に通知を許可する必要があります。
なお、IOSには対応していないのでSLACKの通知など個人で使うアプリなどで活用する方法は思いつきますが、
対ユーザーへ向けるとなると少し実装しにくいような気もします！

ブログの投稿ログ

# Vueでの実装例

# まとめ

Vueでの実装例

まとめ