機能

プログレッシブ ウェブアプリでは、画面上のコンテンツのレンダリングやウェブサービスへの接続だけにとどまりません。PWA では、ファイル システムのファイルの処理、システムのクリップボードの操作、デバイスに接続されているハードウェアへのアクセスなどを行うことができます。すべての Web API を PWA で使用できます。また、アプリをインストールすると、いくつかの追加の API を使用できます。

各プラットフォームでできることについては、Web で今日できることをご覧ください。個々の API や機能については、使用できるツール、または MDN のブラウザ互換性の表をご覧ください。

常に機能のサポートを確認する

PWA の最初の文字はプログレッシブの略で、プログレッシブ エンハンスメントと機能検出の考え方に基づいています。アプリがすべてのデバイスで同じように動作するとは限りません。さまざまな国、数十億台のデバイスで多様なコンテキストと機能を使用できる PWA は、その進歩性によって優れたプラットフォームとなっています。

つまり、デバイスによっては利用できない可能性があるレイヤでアプリを開発し、使用前に可用性を確認する必要があります。

使用する前に JavaScript で API の有無を確認するか、特定のデバイスでサービスが使用できるかどうかを API に確認する必要があります。

パワフルなウェブ

今日、ウェブは非常に強力です。次に例を示します。

  • WebRTC、位置情報、プッシュ メッセージを使用して、ハイパーローカルなビデオチャット アプリを構築できます。
  • アプリをインストール可能にすることができます。
  • WebAssembly を使用して動画エフェクトを追加できます。
  • WebGL と WebXR を使用して、バーチャル リアリティに取り込むこともできます。

PWA の強化

PWA の機能 API を次の 4 つのグループに分けます。

  • 緑: 技術的に可能な場合、すべてのプラットフォームのすべてのブラウザで利用できる API。そのほとんどは長年出荷され、成熟したと考えられており、安心して使用できます。このグループからの API の一例として、Geolocation API があります。
  • 明るい緑: API は一部のブラウザでのみ使用できます。一部のプラットフォームではサポート対象外であることを考慮すると、サポート対象のブラウザ サブグループ内で成熟し、自信を持ってその機能を使用できるようになりました。このグループからの API の例は、WebUSB です。
  • 黄: 試験運用版 API。これらの API はまだ完成していません。一部のブラウザで、テストまたはトライアル版でのみ利用可能です。これらの機能については、試験運用の章で一部説明しています。
  • 赤: PWA で使用できず、今後追加が予定されている API のグループです。このグループの API の例としてジオフェンスがあります。

環境に優しい機能

PWA で使用できる最も重要な機能は次のとおりです。

基本

  • Cache API を使用したファイルのローカル キャッシュ（キャッシュの章を参照）。
  • 複雑さの管理の章で説明したように、ウェブ ワーカーを使用してスレッドでタスクを実行する。
  • Service Worker でさまざまな戦略を使用してネットワーク リクエストを管理する（Service Worker の章を参照）。
  • 2D キャンバス: Canvas API を使用して画面に 2D グラフィックをレンダリングします。
  • 3D グラフィックをレンダリングするための 2D および 3D 高パフォーマンス キャンバス（WebGL）。
  • WebAssembly（WASM）: パフォーマンスのために低レベルのコンパイル済みコードを実行します。
  • WebRTC API を使用したリアルタイム通信。
  • ウェブ パフォーマンス API を使用してユーザー エクスペリエンスを測定し、改善に役立てることができます。詳しくは、Performance API ガイドをご覧ください。
  • オフライン データの章で説明されているように、IndexedDB とストレージ管理を使用してデータをローカルに保存し、割り当てのクエリと永続ストレージのリクエストを行います。
  • ローレベル オーディオ: Web Audio API により実現されています。
  • フォアグラウンド検出: Page Visibility API を使用します。
  • Fetch API と WebSocket API を使用したネットワーク通信。

ハードウェアとセンサー

  • Geolocation は、Geolocation API を使用して、衛星や Wi-Fi などのさまざまなプロバイダを利用してユーザーの位置情報を取得します。
  • カメラとマイク: [メディア デバイス] インターフェースを使用して、カメラとマイクからのメディア ストリームを受信します。
  • センサーは、Sensors API または以前のインターフェース（DeviceMotionEvent や DeviceOrientationEvent など）を使用して、加速度計、ジャイロスコープ、磁力計などからリアルタイム情報を収集します。Safari でそれらを使用するには、標準以外の権限ダイアログ リクエストを使用する必要があります。
  • タップとポインタは、ポインタ イベントとタッチイベントにより、指、マウス、トラックパッド、ペンを使用して行ったすべてのタップやポインタベースのクリックに関する情報にアクセスします。
  • ゲームパッド: ゲームパッド API を使用して、デバイスに接続されている標準のゲームパッドやジョイスティックから情報を読み取ることができます。
  • Web Authentication または WebAuthn を使用した生体認証（顔認証や指紋認証など）。

オペレーティング システムの統合

  • 音声合成と音声認識では、Web Speech API により、プラットフォームにインストールされている音声を使用してユーザーに話しかけ、ユーザーの発話を認識します。
  • Web Share API を使用すれば、PWA のコンテンツをデバイス上の他のアプリや場所に共有できます。これについては、OS の統合に関する章で説明します。
  • OS の統合の章で説明したように、クリップボードにアクセスして、Clipboard API を使用してクリップボードの内容を保存、取得します。
  • Credential Management API を使用して、ユーザーの認証情報とパスワードを管理します。
  • Picture-in-picture API を使用して、OS 内でのピクチャー イン ピクチャー動画の再生を有効にする。
  • Windows の章で説明したように、Fullscreen API を使用してコンテンツを全画面でレンダリングできます。

ライトグリーン機能

PWA で使用できる最も重要な機能のリストを次に示します。一部のブラウザでは利用できない場合があります。

基本情報

  • WebGL 2.0（OpenGL 3.0 に対応する WebGL 仕様の新しいバージョン）。
  • コーデック、動画ストリームの個々のフレームと音声のチャンクへの低レベルのアクセス。Web Codecs API を介したメディアの処理方法を完全に制御する必要があるウェブ アプリケーションに役立ちます。

ハードウェアとセンサー

  • アンビエント ライトは、Sensors API に加えて、デバイスの周囲の環境光の現在の照度を読み取ります。
  • バイブレーション: デバイスが対応していれば、Vibration API を通じて、何かが発生したときにユーザーに触覚フィードバックを提供します。
  • 録画メディアは、MediaRecorder API により、MediaStream オブジェクトまたは HTMLMediaElement オブジェクト（<video> タグなど）によって生成されたデータをキャプチャし、分析、処理、ディスクへの保存に使用します。
  • 画面に wake lock を適用すると、PWA の実行を継続する必要がある場合に Screen Wake Lock API を使用して、デバイスが暗くなったり画面がロックされたりするのを防ぐことができます。
  • バーチャル リアリティでは、WebXR Device API により、ヘッドセットなどのデバイスを PWA で使用できます。
  • 拡張現実は、WebXR Device API や AR コンテンツ用の Safari Quick Look アプリを使用するなど、さまざまな方法で PWA で実現できます。
  • Idle Detection API で非アクティブ ユーザーを検出します。
  • 画面の向きのロックは、PWA が画面に表示されている間、Screen Orientation API、またはインストール済みのアプリの場合はウェブアプリ マニフェストの orientation プロパティにより、画面の向きを縦向きまたは横向きにロックします。
  • Presentation API を使用すれば、プロジェクターやセカンダリ ディスプレイにコンテンツを表示できます。
  • ポインタをロックして、Pointer Lock API を使用することで、位置値ではなくポインタ（マウス、トラックパッド、ポインタ）からデルタ移動情報を受け取ることができるようになりました。これは一部のゲームで役立ちます。

オペレーティング システムの統合

  • OS の統合の章で説明したように、File System Access API により、デバイス上のファイルの読み取りと書き込みを行います。
  • OS の統合の章で説明したように、Web Share Target により、他のアプリからコンテンツを取得できます。
  • OS の統合の章で説明するように、Contact Picker API を使用して連絡先データを取得します。
  • Background Synchronization API により、PWA を使用していないときでもバックグラウンドで同期できます。
  • Web Periodic Background Synchronization API により、PWA を使用していないときのタスクのスケジューリング。
  • Web Push と Web Notifications API を使用して通知を送信する。
  • Background Fetch API により、ユーザーが PWA を使用していないときに、バックグラウンドでファイルを転送します。
  • Media Session API を使用して、オペレーティング システムとメディア再生を統合します。
  • Payment Request API により、PWA で支払いを管理できます。Apple は Payment Request API に加えて Apple Pay JS ライブラリも提供しています。
  • Network Information API を使用して、接続タイプ（4G、Wi-Fi）や Save Data フラグなどのネットワーク ステータスをクエリする。
  • Screen Capture API を使用して、スクリーンキャストや画面共有用にユーザーの画面をキャプチャします。
  • Shape Detection API を使用して、デバイス上のハードウェア アクセラレーションされたバーコード検出器（人の顔やテキスト OCR はまだ開発中です）を使用して図形を検出します。
  • Device Memory インターフェースを使用して、デバイスのメモリをクエリします。
  • SMS によるワンタイム パスワード: WebOTP API を使用してサーバーから送信される SMS でコードを自動的に受信できます。Safari では、<input> 要素に基づくソリューションのサブセットが実装されています。詳しくは、WebKit のブログをご覧ください。
  • Virtual Keyboard API を使用して、モバイル デバイスの画面に表示される仮想キーボードを管理します。

リソース