タブ 通知 Notification 青い丸 JavaScript 方法 非アクティブ タイトル 変更 検知

4599 ワード
firefox HTML Chrome Notification JavaScript HTML テキストリンク

結論

  1. document.titleを書き換えるとできる
  2. したがって、JavaScriptを使ったブラウザ用の通知方法、APIがあるわけではない(document.titleやalertにはJSを使いますが)
  3. 「タブをピン留め」状態の場合にしかおきないので、遭遇数が少ない → 情報少 ・ 非再現 ・ 説明が伝わらない

ググり力が試されて疲れた…
ピン留め状態限定ということを理解していなかったので、そこを理解して検索キーワードを加えると早かっただろう。
仕様に詳しい方がいらっしゃれば情報元などを教えてもらえると助かります。

(他にもロード完了など通知タイミングはいろいろありそうですが、検証は大変なのでドキュメントがほしい)

通知のための実装としてはwindow.addEventlister('blur'),window.addEventlister('focus')でアクティブ状態を管理して、
blurなら通知タイミングでdocument.titleを書き換え。
focus時にタイトルをデフォルトに戻すことで通知用青丸アイコンを出せるでしょう。
focus時にタイトルを戻す必要は薄く感じるが、二回目の通知で同名変更→アイコン出ない だと嫌なので戻しておくのが吉だと思います。

環境

  • Firefox 61
  • Windows 7

非アクティブのタブに変更がおきたときにタブのファビコンの下に青い丸がついて通知される方法を実装したかった。

私が自作したプログラムで起きた範囲内だと、非アクティブ状態でのalert時に発生していた。
だが、SlackやTwitterなどの他のサービスでも変更時に通知されていたので、その方法を知りたかった。

調べても調べてもアドオンやファビコンの書き換えや特にプッシュ通知のことばかりでて困った。

長い処理の完了待ちの間を別タブでブラウジングしているとき、プッシュ通知では厚かましく、alertではOKが面倒というなかで
奥ゆかしいアトモスフィアを感じさせるこのテクニックは実際重要。

情報源

ありがとう…！ありがとう…！
結局回答もプッシュ通知の話ばかりされていますが、質問者様が自己解決してそれをわざわざ載せてくれるという有能。

ピン留めされたタブのページの内容が変更されると、青く光って通知されます。

「ピン留め」がキーワードだと判明したらすぐ出ました…
「ページの内容が変更」がどの程度なのかが気になるのです。

擬似コード

var active = false
window.addEventListener('blur', e = > {
  active = false
})
window.addEventListener('focus', e = > {
  active = true
  document.title = originalTitle
})
function hoge() {
  // hogehoge
  if (!active) {
    document.title = document.title + '完了' // とか(1)とか
  }
}

その他

同士…