FirefoxでClipの共有ボタンが機能しない

[anatawa12]

💡 Summary

Firefoxでnavigator.shareが実装されてないため共有ボタンが機能しません。
ポップアップにあるClipのURLをコピーする手段がこれにより存在しなくなっています

🥰 Expected Behavior

何かしら代替のポップアップが表示される
またはブラウザが対応してないことを示すポップアップを表示する?

🤬 Actual Behavior

コンソールにエラーを吐くだけで何も起きない

TypeError: navigator.share is not a function
    handler https://misskey.niri.la/vite/0c35a94a.js:1
    mu https://misskey.niri.la/vite/39d175c0.js:1
    De https://misskey.niri.la/vite/39d175c0.js:1
    Ee https://misskey.niri.la/vite/39d175c0.js:1
    n https://misskey.niri.la/vite/39d175c0.js:1

📝 Steps to Reproduce

1. Clipをポップアップで表示する
2. 右上の共有ボタンを押す

📌 Environment

💻 Frontend

• Model and OS of the device(s): MacBook Pro 14-inch 2021, macOS Ventura 13.3.1 (a)
• Browser: Firefox 114.0.2
• Server URL: misskey.niri.la
• Misskey: 13.13.2-kinel-0.0.1 (13.13.2 + small patches)

🛰 Backend (for server admin)

• Installation Method or Hosting Service:
• Misskey: 13.x.x
• Node: 20.x.x
• PostgreSQL: 15.x.x
• Redis: 7.x.x
• OS and Architecture:

[tai-cha]

ちなみにcaniuse曰くfirefoxではabout:configよりdom.webshare.enabledを有効にすることで使えるらしい
https://caniuse.com/mdn-api_navigator_share

MacのChromeでも動かない（ChromeはバグでChromeOSとWindows以外ではnavigator.share使えないらしい）

[mappi-pr]

またはブラウザが対応してないことを示すポップアップを表示する?

Mastodon見た感じだと
navigator.share使えるかどうかをクライアントごとに判定
if ('share' in navigator)
して表示非表示しているみたいですね

https://github.com/mastodon/mastodon/blob/1e3b19230a48174acf524cf1a9f5a498e220ea7d/app/javascript/mastodon/features/account/components/header.jsx#L295

[samunohito]

Firefoxユーザなんですけど、これブラウザが未対応なんですね…押しても何も起こらなくて？？？ってなってました

@syuilo
mappi-prさんが提示してくれたmastodonの形式に倣うのが楽そうですけど、この形で実装してもいいですか？

[syuilo]

良さそう

[anatawa12]

ポップアップにあるClipのURLをコピーする手段がこれにより存在しなくなっています

の解決ってどうなりますか？大抵のページでミートボールメニューでURLが取れるのですがここは共有メニューしかないため何かしら別の手段も同時に用意してほしいです

[syuilo]

共有ボタンを消すんじゃなくて対応してなければURLをクリップボードにコピーする動作にフォールバックするとか

[anatawa12]

私はいいと思います

[samunohito]

ノートのコンテキストメニューみたいにURLコピー用のボタンを生やしてもいいかなと思ったのですが、いかがでしょう

[samunohito]

（個人的な思いとしては、WindowsOSのシェア機能によるコピーがいまいち安定しないので独立したコピーボタンが欲しい）

[samunohito]

↑で対応しました。