強力な PWA

PWA の機能には、ウェブアプリがプラットフォーム通知を受信して公開できる Notifications API など、一般に知られているものもありますが、ウェブに導入されてアプリを強化する新しい機能や今後の機能も多数あります。Chromium の Web Capabilities プロジェクト（Project Fugu 🐡 とも呼ばれます）は、ウェブの独自性を維持しながら、強力な新しいウェブ標準を有効にしようとする取り組みです。ウェブの独自性とは、ユーザー中心のセキュリティ、低摩擦、クロス プラットフォームの互換性です。

アプリのギャップを埋める

これらの機能のほとんどは、従来のデスクトップ アプリやモバイルアプリとウェブアプリのギャップを埋めることを目的としています。最初にリリースされた主な機能では、ウェブアプリがプラットフォームの連絡先選択ツールと共有機能にアクセスしたり、インストールされた PWA がプラットフォーム共有ターゲットとして登録されたり、アイコン バッジを表示したりできるようになりました。

各機能は、広範な標準化プロセスを経て、コミュニティからのフィードバックを募り、API の形成に役立てています。これにより、最終的な設計が安全でプライベートかつ信頼できるものになります。新機能はオープントラッカーで追跡され、次の 5 つのカテゴリのいずれかに分類されます。

SHIPPED

Chrome の最新の安定版で使用できます。使用が適切に機能検出されていれば、信頼性の高い使用が可能です。

オリジン トライアル中

Chrome のオリジン トライアル（OT）として利用できます。これにより、試験運用版の機能や API を実際の使用状況で Chrome チームが検証し、API のユーザビリティや有効性についてフィードバックを提供できるようになります。OT はオプトインであり、ユーザーがブラウザで特別なフラグを切り替える必要なく、ユーザーとともにこの機能のベータテストを行うことができます。API は OT の後に変更される可能性があり、OT はリリース前の一定期間利用できないことが保証されているため、新しい API の早期リリース メカニズムとして扱うべきではありません。

IN DEVELOPER TRIAL

Chrome のフラグの背後で利用できます。これらの API は試験運用版であり、現在も開発が続けられています。本番環境での使用には適していません。バグが存在する可能性が高く、API が変更される可能性もあります。デベロッパーはこの期間中に独自の試験運用機能を試すことができますが、ユーザーにフラグを有効にして機能を使用するよう指示することは許可されていません。

STARTED

開発は開始されていますが、現在使用可能な API はありません。

検討中

ユーザーが関心を示しているが、まだ実装が開始されていない API。API がまだ開始されていない場合は、Chromium チームが優先順位を付けられるよう、API にスターを付けるか、ユースケースを問題に追加してください。

PWA を強化する

PWA を構築する際は、ウェブアプリの操作性を大幅に向上させるために、次の API とベスト プラクティスの実装を検討してください。一般的なユースケース別に分類すると、アプリの全体的なユーザー エクスペリエンスを向上させるために、1 つ以上の API を活用できる可能性があります。🔮 マークの付いた API はオリジン トライアル中、🚩 マークの付いた API はデベロッパー トライアル中、📱 マークの付いた API はモバイルで現在安定しており、デスクトップでの実装が開始されています。言及されているその他の API は安定しています（ただし、すべてのプラットフォームで利用できるとは限りません）。現在の安定版、ベータ版（β でマーク）、カナリア版（α でマーク）の Chrome で利用可能な API のみが含まれます。このリストは、リリースされる API を反映するために定期的に更新される予定です。

アプリのインストール

タスクバー、ランチャー、デスクトップ、アプリスイッチャーなど、インストール済みの他のアプリと一緒に Web アプリを利用できるようにしたい場合は、PWA をインストール可能にするために次の API の実装を検討してください。必要に応じて、この Codelab に沿って操作します。

  • ウェブアプリ マニフェスト - ウェブアプリに関する情報（名前、ロゴ、アプリの起動 URL、ウェブアプリの表示方法など）をブラウザとオペレーティング システムに提供します。
  • Service Workers と Cache Storage API - ウェブアプリでプロキシ サーバーを作成し、ブラウザのキャッシュの処理方法を制御できます。ブラウザの fetch イベントに反応し、オフライン時にコンテンツでウェブアプリ マニフェストで指定されたスタート URL の fetch リクエストに応答できる Service Worker は、インストール可能となるための要件です。
  • ログイン時に実行 🚩β - ユーザーがログインしたときに PWA が自動的に起動するように設定できます。
  • アプリアイコンのショートカット - サポートされているプラットフォームで、インストールされたアプリアイコンのコンテキスト メニュー（モバイル デバイスでの長押し、パソコンでの右クリックなど）から、ウェブアプリの特定の URL へのショートカット（チャットの開始、写真のアップロードなど）を提供します。
  • getInstalledRelatedApps - ウェブアプリで、PWA、Android アプリ、Windows（UWP）アプリがすでにインストールされているかどうかを確認できます。

適応性とアクセシビリティ

さまざまなデバイスを使用し、身体的または精神的なニーズが異なるユーザーがウェブアプリを使用できるようにするには、次の実装を検討する必要があります。

収益化と配信

  • Web Payments - あらゆるブラウザやデバイスで、あらゆる決済サービス プロバイダと連携して動作するように設計された、オンライン決済用の柔軟な標準インターフェース。
  • Digital Goods API 🔮 - ウェブ アプリケーションからアプリ内購入をクエリして管理するための柔軟な標準インターフェース。1 回限りの購入、繰り返し購入（ゲーム内通貨など）、定期購入などの一般的な購入タイプをサポートしています。ウェブ決済と連携して動作します。
  • Trusted Web Activity - PWA 用の Android アプリを作成して、互換性のあるストア（Google Play など）でダウンロードできるようにします。

クリップボードへのアクセス

  • 非同期クリップボード - ユーザーのクリップボードからテキストと画像を読み書きし、ユーザーからのコピー＆ペースト イベントをリッスンします。

通知

ウェブアプリでユーザーに通知する必要がある場合（チャットアプリやバックグラウンド エンコードなど）、次の API の実装を検討してください。

  • ウェブプッシュ通知 - ユーザーがオプトインすると、ウェブアプリからユーザーにプッシュ通知を送信できるようになります。
  • Badging API - インストール済みのウェブアプリで、アプリアイコンにアプリ全体のバッジを設定できます（オプションで数字も設定可能）。
  • 通知のトリガー 🔮 - 時間ベースや位置情報ベースなどのトリガー条件が満たされたときに、ユーザーに通知を送信します（カレンダーの予定の通知など）。

インテントの共有とプロトコルの処理

  • URL プロトコルの登録 🚩α - ウェブ アプリケーションがインストール マニフェストを使用して、カスタム URL プロトコル/スキームのハンドラとして登録できるようにします。
  • Web Share - 対応デバイスで組み込みのシステム共有 UI を使用して、URL、テキスト、ファイルをデバイスにインストールされている他のアプリに共有します。アプリをインストールする必要はありません。
  • ウェブ共有ターゲット - サポートされているデバイスの組み込みシステム共有 UI でインストール済みの PWA を利用できるようにして、ユーザーが他のアプリからテキストやファイルをアプリに共有できるようにします。

ファイルを開く、保存する

  • File Handling API 🚩 - インストール済みのウェブアプリが、指定された MIME タイプやファイル拡張子のファイルを処理（読み取り、ストリーミング、編集）できることをオペレーティング システムに登録できるようにします。これにより、たとえば、コンテキスト メニューの [アプリケーションで開く...] リストに表示されるようになります。
  • File System Access API - セッションごとにユーザーのファイル システムに堅牢にアクセスし、アプリのニーズに応じて次の操作を可能にします。
    • ローカル ファイル システムからファイルを読み取る - ファイル選択ツールを表示し、ユーザーが 1 つまたは複数のファイルを選択して開くことを許可します。許可されるファイルタイプを MIME タイプと拡張子で制限することもできます。
    • 開いているファイルへの変更を保存する - FSA で開いたファイルへの変更を直接保存します。ユーザーにファイルの保存先を選択するよう求めることも、コピーをダウンロードさせることもありません。
    • ローカル ファイル システムに新しいファイルを作成する - ユーザーがローカル ファイル システムに新しいファイルを作成できるようにします。必要に応じて、デフォルトのファイル拡張子を指定できます。アプリは、このファイルにアクセスして保存できます。
    • 最近開いたファイル - FSA で作成されたファイル ハンドラを IndexedDB に保存して、ユーザー セッション間で最近使用したファイルのリストを表示できます（ただし、編集権限はセッション間で保持されません）。
    • ディレクトリの読み取り、書き込み、操作 - ユーザーがローカル ファイル システム上のディレクトリを選択できるようにします。アプリは、そのディレクトリの内容を読み取り、ファイルとサブディレクトリを作成、読み取り、削除し、相対ファイルパスを特定できます。
  • 圧縮ストリーム - gzip と deflate の圧縮アルゴリズムを使用して圧縮または解凍します。

ウィンドウ管理

  • 全画面表示 API - ウェブアプリの要素（動画など）を全画面表示できるようにします。
  • クロススクリーン ウィンドウ配置 API 🔮 - 接続されたディスプレイに関する情報を取得し、それらのディスプレイを基準にウィンドウを配置して、マルチウィンドウ、マルチディスプレイのウェブアプリを実現できるようにします。
  • タブ付きアプリケーション表示モード 🚩 - インストール済みのウェブアプリを、単一のウィンドウだけでなく、1 つ以上のタブで表示できるようにします。

OS との連携を強化

  • Local Fonts API 🔮 - ウェブアプリでローカルにインストールされたフォントを一覧表示し、フォントデータ全体を含む低レベル（バイト指向）の SFNT コンテナ アクセスをリクエストできます。これにより、アプリでローカルにインストールされたフォントをカスタム レンダリングできます。
  • Wake Lock - ウェブアプリが画面をスリープ状態にしないようにし、中断を恐れることなく長時間実行タスク（ファイルのトランスコードや、調理中にレシピを表示し続けるなど）を実行できるようにします。
  • アイドル状態の検出 🔮 - ユーザーがデバイスを積極的に使用していないことをウェブアプリで検出できます。

オフライン サポートの拡大

オフラインでも Web アプリをより効果的に動作させたい場合は、次の API の実装を検討してください。

  • バックグラウンド同期 - オフラインの場合、接続が必要なリクエストをキューに登録し、ネットワークが利用可能になったときに、オフラインでリクエストをまったく処理しないのではなく、ウェブアプリのデータをバックグラウンドで同期します。たとえば、オンラインに戻ったときにメッセージを送信したり、ドキュメントの増分変更を同期したりできます。
  • 定期的なバックグラウンド同期 - インストール済みで頻繁に使用されるウェブアプリのサービス ワーカーを、最小経過時間に基づいて定期的に起動し、実行できるようにします。たとえば、キャッシュを更新して、ユーザーがアプリを開いたときにコンテンツが最新の状態になるようにします。
  • コンテンツ インデックス登録 API - ウェブアプリがブラウザにオフラインで利用可能なコンテンツを通知し、ブラウザがそのコンテンツをユーザーに表示できるようにします。
  • バックグラウンド取得 - サービス ワーカーが強制終了されるリスクを冒すことなく、映画のダウンロードや動画や画像のアップロードなど、長時間実行されるバックグラウンド取得を許可します。

メディア ストリーミング、エンコード、デコード

ウェブアプリで動画ファイルや音声ファイルなどのメディア ファイルを再生する場合は、次の API の実装を検討してください。

  • アダプティブ ストリーミング - ネットワーク パフォーマンスに基づいて動画ストリームのビットレートを切り替えることができます。
  • ピクチャー イン ピクチャー - ウェブアプリから動画を常に最前面に表示されるウィンドウにポップアウトし、そのウィンドウを個別に移動したりサイズ変更したりできるようにします。
  • Media Session API - ハードウェアと OS レベルのソフトウェア機能（キーボードやロック画面の再生/一時停止/停止ボタンなど）を使用して、ウェブアプリのメディア再生を制御したり、OS レベルのメディア通知（タイトル、アーティスト、アルバム、アートワークなど）を制御したりできます。
  • Chromecast API - 利用可能な Chromecast レシーバーにメディアをキャストできます。たとえば、ウェブアプリの動画をテレビで再生できます。
  • Web Codecs 🔮 - 低遅延のライブ ストリーミングなどのリアルタイム ユースケースや、ファイルのエンコード、デコード、トランスコードに役立つ、組み込みのハードウェアとソフトウェアのメディア エンコーダとデコーダへのアクセス。

入力サポートの拡大

  • ポインタ イベント - 単一の API を使用してタッチ、スタイラス、マウスのイベントに対応し、ユーザーがより多くの入力オプションを利用できるようにします。タッチ操作に適した UI とユーザー入力とコントロールに関するベスト プラクティスもご覧ください。
  • Gamepad API - 一般的なゲームパッドからの入力に応答するウェブアプリを作成できます
  • Web HID 🚩 - ウェブアプリが標準以外のヒューマン インターフェース デバイス（カスタム コントローラなど）にアクセスできるようにします

高度な周辺機器のサポート

  • Web USB - ウェブアプリからアプリの非標準（キーボードやマウスなど）USB デバイスにアクセスできるようにします。
  • Serial API 🔮 - 物理または仮想のシリアルポートを介してハードウェア デバイスと通信するための API を追加します。

PWA のチェックリスト

これらの強力な新しい API を使用して PWA を強化する準備はできましたか？以下のユースケースのいずれかを選択して、使用する API の推奨セットを確認するか、独自のチェックリストを作成して、その完了を目指しましょう。