Device Memory APIについて

はじめに

12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。 この連載では、Web標準とDDDについて学びを深めていきます。 第15回は「Device Memory API」がテーマです。 Device Memory APIとは何か、どのように実装するのか、実装例を交えて紹介します。

Device Memory APIとは

Device Memory APIとは自分が利用している端末のRAM容量を概算で出してくれるAPIです。 RAM容量にアクセスする方法は2つあり、JavaScript APIを使用する方法とクライアントヒントHTTPヘッダーを使用する方法になります。 クライアントヒントとは、端末、ネットワーク、ユーザー、ユーザーエージェント固有の環境設定に関する情報を取得することが出来るHTTPリクエストヘッダーのフィールド群です。 Accept-CH: Width, Downlink, Sec-CH-UAのようにAccept-CHを利用して受信したいヒントを指定できます。

JavaScript API navigator.deviceMemoryを使用

const RAM = navigator.deviceMemory;

クライアントヒント クライアントヒントヘッダーであるDevice-Memoryディレクティブを使用

Accept-CH: Device-Memory

このAPIはChrome、Edge、Operaで利用可能ですが、FirefoxとSafariでは実装されていません。 Battery Status APIで、FireFoxががプライバシーの懸念からBattery Status APIを削除したとありました。 Device Memory APIも同じような文脈で実装していないのか気になるところですが、そのような情報は見当たりませんでした。 引き続き、色々なWeb APIを調べてブラウザーベンダー毎の違いを理解していきたいと思います。

Device Memory APIの実装例

メモリの容量によって、色と文言を変化させる実装を行いました。 @codepen

まとめ

今回はDevice Memory APIについて紹介しました。 利用しているデバイスのRAM容量を取得可能なことから、メモリに応じて軽い・重い処理を切り替えることが出来ます。 また、アドカレ13日目のBattery Status APIに続きデバイスの情報を取れるということでOSとWeb APIの関係も気になってきたところです。 アドカレで知識が広がっている感覚があるので、無理せず続けていきたいと思います。

参考

https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/Client_hints