Navigatorインターフェイスの例(ほぼ)全部入り！なnavigator-demosを作った
navigator-demos
demoページ
repository
なんで作ろうと思ったか
mdnのNavigatorのページを眺めていて、知らない機能まだいっぱいあるなあと思って、全部が試せるページがあったら便利かも？と思ったのが最初。
流石にWeb API全部とかはキリがないので無理だなと思っていたが、Navigatorに生えているものだけという括りならまあなんとかなりそうだったのでこれだけ用意した。
一部の、serviceWorkerが要求されるもの、手元にそれ用のデバイスがないと無理なものなど実装できていないものもあるが、それ以外のDeprecatedではない多くの機能について超簡単なデモを用意してみた。
眺めていて気になった機能について
Media Session API
Media Session APIは主に2つの機能があって、「現在再生中のメディアに関するメタデータの提供」「Picture-in-picture上の操作についてevent handlerの提供」がある。
前者のメタデータについては、おそらくブラウザの再生メディアをOSの再生中メディアみたいな表示に反映する機能であるという理解をしているが、こちらは私の手元では動かなかったので詳細は不明。
event handlerについては、再生・次へ・前へだけではなく、マイクのミュートや広告のスキップなどにも対応しており、広告のスキップについてはhandlerを設定するとよくYoutubeなんかであるような「広告をスキップ」みたいなボタンが出現するようになる。
ブラウザでここまで特殊なUIがサポートされているのは結構不思議に感じた。
Web Locks API
簡単に言うとロックが取れるAPIで、複数のタブで同じリソースにアクセスする際などに便利だと思われる。
単純に知らなかったし、複数タブで同時にアクセスしてリソースを共有するようなサービスを作るときには有用だと思われる。
sendBeacon
POSTで非同期にリクエストを投げられるAPI。
Webサイト上でのトレースの集計など、なるべく非同期に何かをしたいときにこう言うのがあるのは結構良さそうに感じる。POSTしか対応していないなどの制限はあるが、送るデータも変えられるし便利。
Vibration API
スマホをvibrateさせられる。以上。
私の端末(Pixel 7a)だと、1秒未満のvibrateは動作しなかった。この辺りはOSによるのかも。
Standard Positions
Navigatorには当然まだ標準化されていない機能なども入っているが、ブラウザ各社の対応状況を調べていく中で、experimentalな機能に対してChrome, Mozilla, WebKit開発陣営がどのように考えているかをまとめているStandard Positionsというのがあるのを知った。
- https://chromestatus.com/features
- https://mozilla.github.io/standards-positions/
- https://webkit.org/standards-positions/
各陣営の意見が見れるのは単純に面白いし、これを見ているとBaselineまでの道のりが遠そうなものとそうでないものがおよそわかったりするのかも、と思っている。
終わりに
Navigatorからentrypointが生えているわけではないが使えるおもしろAPIなどもあるので、そちら側も含めてデモを作っていくのも結構面白そうだなと思っている。
また、APIとしては以前からあるものの細かい機能まで使い倒したことがないもの(serviceworkerとかまさにそう)も結構あるので、そちらを深掘りながらデモを作ってみるとかも楽しいかもしれない、と思っている。
Discussion