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

Pete LePage

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

この問題を解決するには、ウェブアプリ マニフェストの仕様にオプションの id プロパティが新たに追加されました。これにより、PWA に使用する識別子を明示的に定義できます。マニフェストに 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 の [アプリケーション] パネルの [マニフェスト] ペインを開きます。
  2. [App Id] プロパティの横にある (!) アイコンにカーソルを合わせます。(!) ツールチップ アイコンは、ウェブアプリ マニフェスト ファイルで id が指定されていない場合にのみ表示されます。
  3. ツールチップに id 値が表示されます（下のスクリーンショットを参照）。
  4. ツールチップに表示される id 値を使用して、id プロパティをウェブアプリ マニフェストに追加します。

「id」値を示すツールチップ。

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

id を設定しないとどうなりますか？

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

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

テスト方法

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

  1. PWA をインストールします。
  2. about://web-app-internals/ を開き、インストールされている PWA の unhashed_app_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 プロパティをチェックして、想定どおりに更新されていることを確認します。

参考情報