ウェブアプリ マニフェスト 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 プロパティを確認して、想定どおりに更新されていることを確認します。

参考情報