ブラウザへの通知機能の実装

はじめに

• ブラウザからの通知を送る developer.mozilla.org

コード

• 下記のコードはスマートフォンだと通知されない
• エラーハンドリングをしないとスマートフォンでエラーになります。
• chromeしか動かない

import React from 'react'

const Notification = (props) => {

    if (window.Notification && Notification.permission == 'granted') {
      try {
const BODY = `
こんにちは
テストです。
クリックするとページ遷移します。
        `;
        const title = "タイトルが入ります！"
        new Notification(
          title,
          {
            body: BODY,
            icon: '/images/info_icon.png',
                    }
                  ).onclick = function () { 
                    location.href = "http://www.yahoo.co.jp"
                  };
      } catch (e) {
         console.log(e)
      }      
    }

  return (
    <>
      <h2>Notification </h2>
    </>
  )
}

export default Notification 

アイコンフリー素材

• 下記のサイトからフリー素材を取得して利用しました icooon-mono.com

通知イメージ

• 通知をクリックするとyahooページに遷移する