ウェブアプリ マニフェスト ID プロパティを使用して一意に識別する PWA

Pete LePage

ユーザーが PWA をインストールするときに、ブラウザは PWA を一意に識別する方法が必要です。しかし、最近まで、ウェブアプリ マニフェストの仕様では PWA を一意に識別する方法が明示的に定義されていなかったため、ブラウザが判断し、実装が異なる結果になっていました。ブラウザによっては start_url が使用され、他のブラウザではマニフェスト ファイルのパスが使用されるため、どちらのフィールドも更新できません。

この問題を解決するため、ウェブアプリ マニフェスト仕様に新しいオプションの id プロパティが追加されました。これにより、PWA に使用する ID を明示的に定義できます。マニフェストに id プロパティを追加すると、start_url またはマニフェストの場所への依存関係が解除され、今後の更新が可能になります。

id プロパティの機能

id プロパティは、ブラウザに対する PWA の ID を表します。ブラウザは、インストール済みの PWA と一致する ID がないマニフェストを見つけると、別の PWA と同じ URL から提供された場合でも、そのマニフェストを新しい PWA として扱います。ただし、すでにインストールされている PWA と一致する ID を持つマニフェストが検出されると、そのマニフェストはインストール済みの PWA として扱われます。

ブラウザ サポート

id プロパティのサポートが Chrome 96 でリリースされました。

id のないアプリがある場合はどうすればよいですか？

特に何もする必要はありません。ウェブアプリ マニフェストに id を追加しなくても、（start_url とマニフェストのパスが同じである限り）問題は発生しません。PWA を将来に備えて対応するには、ウェブアプリ マニフェストに id プロパティを追加します。

id を決定して設定するにはどうすればよいですか？

PWA の id を最も安全かつ正確に決定する方法は、Chrome によって計算された値を確認することです。

  1. Chrome 96 以降を使用して、DevTools の [Application] パネルの [Manifest] ペインを開きます。
  2. ウェブアプリ マニフェスト ファイルで id が指定されていない場合、[Computed App Id] プロパティの下に注記が表示されます。
  3. メモに記載されている id の値をコピーします（下のスクリーンショットを参照）。
  4. 注に記載されている id 値を使用して、ウェブアプリ マニフェストに id プロパティを追加します。

DevTools の [Application] パネルの計算済みアプリ ID。

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

id を設定しない場合

ご安心ください。データが破損することはありません。Chrome 96 以降、ウェブアプリ マニフェストの start_url に基づいて、マニフェストに id がない場合、ブラウザは id を生成します。

ウェブアプリ マニフェストに id を追加すると、start_url とマニフェスト パスを変更できます（特定の送信元が同じ場合に限ります）。ブラウザは、start_url やマニフェスト パスではなく、指定された id に基づいて PWA を識別するためです。

テスト方法

動作をテストする手順は次のとおりです。

  1. PWA をインストールします。
  2. about://web-app-internals/ を開き、インストールされている PWA の manifest_id プロパティと start_url プロパティを確認します。
  3. 上記のid を特定して設定する方法の手順に沿って、ウェブアプリ マニフェストに id プロパティを追加します。
  4. chrome://restart を使用してブラウザを再起動し、about://apps から PWA を起動してから PWA を閉じて、マニフェスト ファイルを強制的に更新します。
  5. about://web-app-internals/ を開き、インストールされている PWA の manifest_id プロパティが変更されていないことを確認します。
  6. ウェブアプリ マニフェストの start_url を変更します。
  7. chrome://restart を使用してブラウザを再起動し、about://apps から PWA を起動してから PWA を閉じて、マニフェスト ファイルを強制的に更新します。
  8. about://web-app-internals/ を開き、インストールされている PWA の start_url プロパティを確認して、想定どおりに更新されていることを確認します。

参考情報