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

# 必要に合わせてコメントアウトを外して記載してください

# 記事の説明文(無い場合は本文先頭200文字を使用)
#ogp_description:

# サムネイル画像のテーマ -> 'default' or 'upload'
thumbnail_theme: default

# サムネイル画像の背景画像(1280x670px推奨, なくてもOK)
#thumbnail_image_url: 

# 予約投稿の日時(無い場合は現在時刻を使用)
#posted_at: YYYY-MM-DD hh:mm

※ この記事は、私が2022/12/20に書いたメモを転記したものです。

３行で

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

SlackDeck とは？

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

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

何が問題だったか？

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

この状態で 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 も許可されているのが適切．つまり，多重で通知音が鳴っている挙動が適切となる．

どうする？

どうしよう…

yamamoto-yuta / yamamoto-yuta.github.io

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

３行で

SlackDeck とは？

何が問題だったか？

調べて分かったこと

どうする？