SlackDeckの通知多重で鳴っちゃう問題で詰んだ話

✏️ 編集

3行で

  • SlackDeck は複数の <iframe> に Web 版 Slack を表示するため,通知が来ると多重で音が鳴ってしまう
  • この問題を解決するために色々調べてみたところ, Slack の通知は Notification API を用いて行われていることが分かった
  • しかし, <iframe> の通知許可はメインフレームの通知許可から行うべきであることも分かり,多重で音が鳴っている挙動が適切な挙動ということになってしまった

SlackDeck とは?

Slack のチャンネルを横に並べられる Chrome 拡張機能

image.png (191.4 kB)

https://chrome.google.com/webstore/detail/slackdeck/cocnkjpcbmoopfpmogblnjpjdfcaohod

何が問題だったか?

SlackDeck は,メインの Slack を表示する <body> とカラムとして Slack を表示する <iframe> で構成されている.図にすると次の通り:

image

この状態で Slack に通知が来ると, <body> と全ての <iframe> で通知音が鳴ってしまい,多重で通知音が鳴ってしまう.

これが原因で SlackDeck を Chrome から削除してしまうユーザもいたため,今回,修正を試みた次第.

調べて分かったこと

  • Slack では通知の送信に Notification API を利用している

ウェブ通知の最も顕著な用途の一つが、ウェブベースのメールや IRC アプリケーションにおいて、新しいメッセージを受信したときに、ユーザーがほかのアプリケーションで何かをしていても通知をする必要がある場合です。これには数多くの事例が存在し、例えば Slack などがあります。 引用: 通知 API の使用 - Web API | MDN

  • <iframe> から通知許可を求めるメソッド Notification.requestPermission() は Chrome から非推奨と言われている

Remove the ability to call Notification.requestPermission() from non-main frames. This change will align the requirements for notification permission with that of push notifications, easing friction for developers. It allows us to unify notification and push permissions. 引用: Remove Usage of Notifications from iFrames - Chrome Platform Status

  • この非推奨宣言に対応した事例を見てみると,代わりにトップレベルのフレームから許可を要求するか新しいウィンドウで開くのが良いらしい

参考: Notification.requestPermission from iframe deprecated · Issue #17 · amazon-connect/amazon-connect-streams

以上より, <body> で表示している Slack の通知を許可したならば <iframe> で表示している Slack も許可されているのが適切.つまり,多重で通知音が鳴っている挙動が適切となる.

どうする?

どうしよう…

Hugo で構築されています。
テーマ StackJimmy によって設計されています。