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

Pete LePage

ユーザーが PWA をインストールする際、ブラウザには一意に識別する方法が必要です 導入しましたしかし最近まで、ウェブアプリ マニフェストの仕様では、 PWA を一意に識別する方法を定義して、ブラウザで決定と 実装に違いが生じます一部のブラウザでは、start_url 使用されますが、それ以外ではマニフェスト ファイルへのパスが使用され、 これらのフィールドを更新できません

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

id プロパティの機能

id プロパティは、ブラウザに対する PWA の ID を表します。日時 ブラウザが検出したマニフェストの ID が すでにインストールされている PWA は、配信されても新しい PWA として処理されます。 別の PWA と同じ URL から削除します。しかし、ID を持つマニフェストが すでにインストールされている PWA と一致するものがある場合は、インストール済みの PWA として処理されます。

ブラウザ サポート

id プロパティのサポートは Chrome 96 で導入されました。

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

お客様側で必要なご対応は特になく、 ウェブアプリ マニフェストに id を追加しないでください（start_url と マニフェスト パスは変わりません）。将来の変化に対応できる PWA を用意するために、 id プロパティをウェブアプリ マニフェストに追加します。

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

PWA の id を決定する最も安全かつ正確な方法 Chrome で計算された値を確認することです

  1. Chrome 96 以降を使用している場合は、 DevTools の [Application] パネルの [Manifest] ペイン
  2. [App Id] プロパティの横にある (!) アイコンにカーソルを合わせます。「 (!) ツールチップ アイコンは、id が ウェブアプリのマニフェストファイルを 変更します
  3. ツールチップに表示されている id の値をメモします（以下のスクリーンショットを参照）。
  4. 次に示す id の値を使用して、ウェブアプリ マニフェストに id プロパティを追加します。 。

「ID」を示すツールチップあります。

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

id を設定しない場合はどうなりますか？

ご安心ください。Chrome 96 以降では、 マニフェストに id が含まれない場合、ブラウザは ウェブアプリ マニフェストの start_url に基づきます。

ウェブアプリ マニフェストに id を追加すると、以下が可能になります。 start_url とマニフェスト パスを変更する origin は同じです)、 ブラウザは start_url ではなく、指定された id に基づいて PWA を識別します。 使用します。

これをテストするにはどうすればよいですか？

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

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

参考情報