コラム

かつてはデスクトップソフトウェアでしかできなかったことが、次々とWebアプリケーション化しています。ベータ版ですが、PhotoshopですらWeb版があります。こうした中で知っておきたいのがWebアプリケーションをよりデスクトップやスマートフォンアプリのようにできる技術です。

こうした技術を総称としてPWA（Progressive Web Apps）と呼びますが、この記事ではPWA化する中で利用できるAPIを紹介します。

Cache

Cache APIはService Workerの中で利用する機能です。リクエストするURLに応じたレスポンスを保存することで、キャッシュとして機能します。

このCache APIでは有効期限などの管理はありませんので、その部分は自分で実装する必要があります。

Cache API | Can I use… Support tables for HTML5, CSS3, etc

プッシュ API

Push APIはプッシュ通知を実現するAPIです。スマートフォンとは異なる仕組みなので、スマートフォンアプリで取得したデバイストークンは流用できません。

Push APIを利用するためにはService Workerが使えないといけません。デバイスごとの固有URLの取得はもちろん、通知を表示する処理についてもService Workerで実装します。

Push API | Can I use… Support tables for HTML5, CSS3, etc

Geolocation

Geolocationは位置情報を取得するAPIです。GeolocationはGPSだけでなく、IPアドレスやWiFiなどの情報を組み合わせた上で取得します。

一回だけの取得に加えて、継続的に取得する関数もあります。

Geolocation | Can I use… Support tables for HTML5, CSS3, etc

Window.localStorage

localStorageはテキストをKVSで保存する機能です。検索する機能はなく、キーを指定してデータを取得するのみです。

localStorageはURLに紐付くので、他のドメインはもちろん、ポート番号が違う場合でも共有されません。

Window API: localStorage | Can I use… Support tables for HTML5, CSS3, etc

WebSocket

WebSocketはサーバーとクライアントでテキストメッセージを送受信するAPIです。コネクションは持続するので、チャットなどで利用されます。

WebSocketではテキストのみ利用できますので、動画や音声などのデータを送る場合にはWebRTC APIを利用します。

WebSocket API | Can I use… Support tables for HTML5, CSS3, etc

WebRTC

WebRTCは動画や音声チャットに利用されるAPIです。サーバーで集中管理する方法と、P2Pで接続する方法とがあります。P2Pは中央サーバーは不要ですが、クライアントの負荷は大きくなります。

他にもデータチャンネルがあり、任意のデータを送信できます（テキストも送れます）。

WebRTC Peer-to-peer connections | Can I use… Support tables for HTML5, CSS3, etc

WebAssembly

WebAssemblyはWebブラウザでサポートされるJavaScript以外のプログラミング実行環境です。WASMとも呼ばれます。バイナリであるため、多くの場合においてJavaScriptよりも高速に処理できます。

WebAssemblyはプログラミング言語ではなく、任意の言語から変換して実行できる中間バイナリを生成します。RustやC/C++、C#、Go言語など様々な言語でWASM向け実行ファイルが作成できます。

WebAssembly | Can I use… Support tables for HTML5, CSS3, etc

サーバー送信イベント

WebSocketがサーバーとクライアントサイドで送受信できるのに対して、Server-sent eventsはサーバーからクライアントへの一方通行になります。SSEとも呼ばれます。

Server-sent eventsはサーバー側で起きた変更をクライアントに通知するのに便利です。

Server-sent events | Can I use… Support tables for HTML5, CSS3, etc

ウェブワーカー API

Web Workersはブラウザ内で別スレッドを使ってプログラムを実行します。並行処理が可能になるので、重たい計算処理などを行うのに便利です。

メインスレッドで実行されるJavaScriptとは異なり、Web WorkersではDOM操作などはできません。多くは計算処理での利用になるようです。

Web Workers | Can I use… Support tables for HTML5, CSS3, etc

ServiceWorker

Service WorkersはWeb Workersの一形態ですが、特にCache APIやPush API、Add to home screenを利用するのに使われます。

これらの機能を利用するためにはService Workers上で実装しなければなりません。fetchやinstallなどの特別なイベントが用意されています。

Service Workers | Can I use… Support tables for HTML5, CSS3, etc

SharedWorker

Shared Web WorkersはWeb Workersの1形態です。ブラウザのタブ間で共有できるのが特徴です。タブ間のメッセージ送受信で利用したり、ネットワーク接続をとりまとめたりするのに利用されます。

Shared Web Workers | Can I use… Support tables for HTML5, CSS3, etc

Navigator.onLine

ネットワークの状態（オンライン、オフライン）を取得できるAPIです。オフラインに対応したWebアプリケーションを開発するためには必須です。

ネットワークステータスが変わった際に呼ばれるイベントを設定できるので、ネットワークアクセスする前にステータスを取ったり、オフライン時にキューに入れた情報を実行したりするのに利用します。

Online/offline status | Can I use… Support tables for HTML5, CSS3, etc

ホーム画面に追加

Webアプリケーションをデスクトップアプリやスマートフォンアプリのようにホーム画面などにインストールする機能です。インストールといってもアイコンが配置される程度です。

ホームスクリーンにある場合はアドレスバーが非表示になり、よりアプリ風なUIを実現できます。

Add to home screen (A2HS) | Can I use… Support tables for HTML5, CSS3, etc

Web Share API

Web Share APIはURLを外部サービスと連携するのに使えるAPIです。アプリなどでコンテンツを共有するのに使える機能と同じです。

外部サービスにシェアすることでコンテンツを拡散したり、チャットなどで友人に共有するのに便利なAPIです。

Web Share API | Can I use… Support tables for HTML5, CSS3, etc

HTML ドラッグ & ドロップ API

Drag and DropはWebページへのファイルやフォルダのドラッグ&ドロップを可能にします。デスクトップファイルの受け渡しができるので、inputタグによるファイルアップロードよりもユーザーフレンドリーな仕組みにできます。

Drag and Drop | Can I use… Support tables for HTML5, CSS3, etc

MediaDevices.getUserMedia()

getUserMediaはWebカメラの入力内容を取得するのに利用されます。スマートフォンであれば、フロントカメラの内容を動画チャットに利用したり、QRコードの撮影にも利用できます。

値はvideoタグに流したり、canvasタグに適用したりできます。

getUserMedia/Stream API | Can I use… Support tables for HTML5, CSS3, etc

Navigator.vibrate()

vibrateは指定したパターンを使ってバイブレーションを実行できる機能です。Safariでは利用できません。また、デスクトップでもサポートされていますが、実行しても何も起こりません。

実行時間を指定するか、バイブレーションのパターンを指定して実行します。

Navigator API: vibrate | Can I use… Support tables for HTML5, CSS3, etc

ウェブ認証 API

Web Authentication APIはWebAuthnとも呼ばれます。パスワードレス認証を可能にするAPIです。macOSのパスキーもWebAuthnをベースにしています。

WebAuthnは生体認証などを使って秘密鍵・公開鍵を作成します。ログイン時にも同様に公開鍵を使って認証を行うので、パスワードを登録または入力する必要がありません。

Web Authentication API | Can I use… Support tables for HTML5, CSS3, etc

履歴 API

History APIはSPAのように画面をリロードせずに画面遷移する操作に対して、ブラウザの履歴管理を追加します。ブラウザの戻る機能が使えるようになったり、見た目のURLも変更できます。

見た目のURLを変更すれば、ブラウザの再読込を行った時にもユーザーの期待通りのコンテンツを表示できるでしょう。

History API: back | Can I use… Support tables for HTML5, CSS3, etc

Chromeでしか使えない機能

ここからは利用できるブラウザが限定的（多くはChrome）なAPIになります。Web BluetoothなどはSafariが明確に実装を拒否しているため、今後も実装は実現しないでしょう。

WebTransport

WebTransportはまだ仕様策定中のAPIで、ChromeではサポートされているもののSafariでは利用できません。WebSocketの進化版、HTTP3用となっています。

WebSocketとの違いは複数のストリームをサポートしている点になります。これまでのWebSocketやWebRTCでの課題を解決するために開発されています。

WebTransport | Can I use… Support tables for HTML5, CSS3, etc

ファイルとディレクトリー項目 API

ブラウザ内に仮想のファイルシステムを構築します。仮想ファイルシステム内ではファイルの書き込みも可能です。よりデスクトップアプリに近いUXを実現するためには欠かせないAPIと言えるでしょう。

Filesystem & FileWriter API | Can I use… Support tables for HTML5, CSS3, etc

MediaStream Image Capture API

ImageCapture APIはWebカメラを用いて写真撮影を行うAPIです。カメラによってはズームしたり、背景をぼかしたりといった操作がJavaScriptでできます。

これまではgetUserMediaを使ってCanvasに反映していた部分が、より手軽に画像を取得できます。現在はSafariでは利用できません。

ImageCapture API | Can I use… Support tables for HTML5, CSS3, etc

Web Bluetooth API

Web BluetoothはBluetoothデバイスと接続するAPIになります。Bluetoothデバイスからデータを受け取ったり、逆にデータ送信を行えます。

Bluetooth接続したセンサーからのデータ取得や、ファイル送信などに利用できます。

Web Bluetooth | Can I use… Support tables for HTML5, CSS3, etc

ウェブ NFC API

SUICAやマイナンバーカードなどのデータを読み取るのに利用できます。AndroidのChromeでは利用できますが、iPhoneのSafariでは利用できません。ただしiPhoneでは利用できるので、今後実装される可能性はありそうです。

Web NFC | Can I use… Support tables for HTML5, CSS3, etc

まとめ

今回紹介したAPIや機能を使うことで、WebアプリケーションのUI/UXがよりネイティブアプリケーションに近いものになります。

ぜひこれらの機能を利用して、よりユーザビリティの高いWebアプリケーションを開発してください。