【JavaScript】デスクトップ通知の仕方│株式会社シーポイントラボ

　時折、ブラウザ上で非常に時間のかかる処理を行うことがあります。そういった時、ユーザが処理を行っている画面に張り付いてくれることは稀ですし、張り付くことがストレスになる場合も少なからずあります。解決法の一つとして何かしらの処理完了通知を飛ばす方法があります。音による通知も手の一つですが、うるさくもあります。ここではデスクトップ通知による解決をします。
　JavaScript でデスクトップ通知を飛ばす処理のドキュメントは次です。
Notification – Web API ｜ MDN
　デスクトップ通知を好き勝手飛ばす迷惑なサイト対策か処理には権限が必要になります。権限を加味すると処理は

ユーザにデスクトップ通知を飛ばしていいか尋ねる or 以前飛ばしていい許可をもらったことを確認する
実際に飛ばす

の二段階を踏む必要があります。
　許可の確認は次の一メソッドで可能です。

1	`Notification.requestPermission();`

Notification.requestPermission() – Web API ｜ MDN
　Notification.requestPermission は対話を Promise で表現しており、次の様に結果を得られます。

// result は次のいずれかの文字列になります
// 'granted' 許可
// 'denied' ブロック（拒否）
// 'default' キャンセル（×ボタンを押すなどで選択をしない）
Notification.requestPermission().then(result=>console.log(result));

　一度、許可かブロックかユーザにが決めると再度尋ねても決められた結果が自動で返ってきます。あまりおすすめしませんが面倒ならば常に Notification.requestPermission() を実行するのも手です。
　現在設定されている通知の権限を見るには次です

1	`Notification.permission` `// 上記の result 同様に 'granted'\|'denied'\|'default' が得られます。`

　実際に通知を飛ばすには次です。

1	`new` `Notification("デスクトップ通知メッセージです");`

　とりあえず文字列を引数にインスタンス化すればその文字列をメッセージにして通知が飛びます。リッチな通知を作るには第二引数でオプションを指定します。これで画像の指定や構造化されたメッセージを作れます。
Notification.Notification() – Web API ｜ MDN
　MDN ドキュメントの例を元にしたコードが次です。シンプルに通知を投げるのみで制御できないならばこのスニペットが便利です。

function notify(msg, options = {}) {
  // ブラウザーが通知に対応しているかどうかをチェックしましょう
  if (!("Notification" in window)) {
    alert("このブラウザーはデスクトップ通知に対応していません。");
  }
 
  // 通知の許可が既に得られているかどうかをチェックしましょう
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification(msg, options);
  }
 
  // そうでなければ、ユーザーに許可を求める必要があります
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // ユーザーが許可したら、通知を作成しましょう
      if (permission === "granted") {
        var notification = new Notification(msg, options);
      }
    });
  }
 
  // 最後に、ユーザーが通知を拒否していて、あなたが敬意を
  // 払いたい場合は、これ以上相手を煩わせることはありません。
}

　以下はデモですが、jsfiddleの制御なのか自分の環境で通知権限が常に’denied’になり動作しません。お手元の環境でお試しください。

【JavaScript】デスクトップ通知の仕方

[備忘録]Reactの関数コンポーネントでStateを使う方法

【React】React Hook Form を使ったフォームフィールドの value に event.target.value で変化する変数を割り当てた場合、エラーの状態が変更されるタイミングで入力が消える問題と解決方法

株式会社シーポイントラボ