ページをピン留め時にのみ可能な、プッシュ通知でない通知を行う方法

Question

現在HTMLとJavaScriptを用いたWebアプリケーションを作成しています。そこで、ブラウザ上でタブをピン留めした際にのみ有効な、プッシュ通知ではない次のような通知を行いたいと思っています。

Firefox	Chrome

ただ、これに関するドキュメントを見つけられず、この通知の方法がわからないという状況です。どなたかご存じの方いらっしゃいましたらどうか方法をご教示いただけないでしょうか。よろしくお願いします。

追記

例がTwitterのみで誤解を招きかねない例示となっていたことをお詫びします。

このように他のサービスでも同じような通知が利用されています。

Answer 1

書かれている挙動がちょっとわからないのですが、「ファビコンに通知を載せる」という事でしょうか。

---

【クリエイティブなファビコンを設置しよう | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/favicon/

【ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js - かちびと.net】
http://kachibito.net/web-design/favico-js.html

【favicon.js·Faviconでアニメーション MOONGIFT】
http://www.moongift.jp/2015/04/favicon-js-favicon%e3%81%a7%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/

【favico.js·Faviconを自在にコントロール MOONGIFT】
http://www.moongift.jp/2014/01/favico-js-favicon%e3%82%92%e8%87%aa%e5%9c%a8%e3%81%ab%e3%82%b3%e3%83%b3%e3%83%88%e3%83%ad%e3%83%bc%e3%83%ab/

【通知件数を取得してfaviconやtitleで通知件数を表示できる「jQuery Notify Better」:phpspot開発日誌】
http://phpspot.org/blog/archives/2013/10/favicontitlejqu.html

【こんな手が！Faviconを使って通知数を表示する·Tinycon MOONGIFT】
http://www.moongift.jp/2012/02/20120219-2/

Comments

[acid_chicken]

回答有り難うございます。説明不足で申し訳ありませんが、この表示はTwitterに限ったものではないため(例:YouTube https://i.ppn.pw/296766b7 )推測するにこれはブラウザ側で表示される機能と考えられます。しかしこれに関する情報を検索したのですが、Push通知の情報に埋もれてしまっているのか、自力では目的の情報を探しだすことができませんでした。もしかするとこれはブラウザ側の自主発火によるものなのでしょうか…

[kei344]

これでもない？

【Web Notifications を使用する - WebAPI | MDN】
https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications

[acid_chicken]

何度もすみません。こちらの通知をページ内から試してみたのですが、どうやら通常のPush通知で( https://i.ppn.pw/5458ab1c )かつ、別ページ閲覧中でも目的のバッジが表示されませんでした( https://i.ppn.pw/b9dcfeb7 )

[kei344]

teratail での通知については、「プッシュ通知」を使わないなら画像のようにならないと思いますが、どうでしょう。
下記で設定出来ます。「このブラウザ（firefox）から通知の許可がされていません。」の状態では通知は来ませんので、「プッシュ通知」を使っているのでは。
https://teratail.com/users/setting/browser-push

[acid_chicken]

繰り返し説明不足になってしまい本当に申し訳ありません。teratailでは確かに通知を許可しておりますが、私の認識が間違っていなければ、このプッシュでない通知は「アクティビティの更新時」のものであると思います。さらに、TwitterやYouTubeの方では通知を許可した記憶がありません。
もしかするとこれはもっと汎用的なイベントに連携したものなのでしょうか。

[kei344]

とりあえず「プッシュ通知」を実装してみて試してみてはいかがでしょうか。

[tamoto]

横から失礼します。
Chromeブラウザの場合ですが、Settings -> Content settings -> Notifications にプッシュ通知の許可設定があります。こちらでプッシュ通知を全て拒否に設定し、バッジが表示されるか確認してみてはいかがでしょうか。

[acid_chicken]

返信が遅くなりました。本当に説明不足が過ぎてしまい本当に申し訳ないのですが、Web Noficationsによるプッシュ通知自体は既に実装を行っており、この度バッジの表示機能を付けたいと考えている次第です。Chromeでのプッシュ通知をすべて拒否した際の挙動も試してみましたが、Twitter等にてバッジが今までどおり表示されました。プッシュ通知とは全くの別物だと考えられますね。

[kei344]

そもそも提示のものが再現しないのでわかりません。回答に挙げた方法で同等のことが実装できるとは思うので、後はがんばってください。

Answer 2

独自調査を続けたところ、どうやらdocument.titleの値を変更することで、ピン留め中のタブに対して通知を送ることができるようです。というよりは、ブラウザがdocument.titleの変更を感知して通知を送っていたと説明したほうが正確かもしれません。

そのため、次のような方法で通知を送ることが可能です。

function pinNotice() {
  const title = document.title; // 元のtitleを取得
  document.title += "!"; // titleの末尾に文字を付加しtitleの値を変える
  document.title = title; // titleの値を元に戻す
}

皆様ご回答ありがとうございました。