ユーザーが 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 によって計算された値を確認することです。
- Chrome 96 以降を使用して、DevTools の [アプリケーション] パネルの [マニフェスト] ペインを開きます。
- [App Id] プロパティの横にある
(!)
アイコンにカーソルを合わせます。(!)
ツールチップ アイコンは、ウェブアプリ マニフェスト ファイルでid
が指定されていない場合にのみ表示されます。 - ツールチップに
id
値が表示されます(下のスクリーンショットを参照)。 - ツールチップに表示される
id
値を使用して、id
プロパティをウェブアプリ マニフェストに追加します。
{
...
id: "/?homescreen=1",
start_url: "/?homescreen=1",
...
}
id
を設定しないとどうなりますか?
壊れることはありませんので、ご安心ください。Chrome 96 以降では、ウェブアプリ マニフェストの start_url
に基づいてマニフェストに id
が存在しない場合、ブラウザは id
を生成します。
ウェブアプリ マニフェストに id
を追加すると、ブラウザは start_url
やマニフェスト パスではなく、指定された id
に基づいて PWA を識別するため、start_url
とマニフェスト パスを変更できるようになります(特定のオリジンが変わらない場合に限ります)。
テスト方法
動作をテストする手順は次のとおりです。
- PWA をインストールします。
about://web-app-internals/
を開き、インストールされている PWA のunhashed_app_id
プロパティとstart_url
プロパティを確認します。- 上記の
id
を特定して設定する方法の手順に沿って、ウェブアプリ マニフェストにid
プロパティを追加します。 chrome://restart
を使用してブラウザを再起動し、about://apps
から PWA を起動して PWA を閉じて、マニフェスト ファイルを強制的に更新します。about://web-app-internals/
を開き、インストールされている PWA のmanifest_id
プロパティをチェックして、変更されていないことを確認します。- ウェブアプリ マニフェストの
start_url
を変更します。 chrome://restart
を使用してブラウザを再起動し、about://apps
から PWA を起動して PWA を閉じて、マニフェスト ファイルを強制的に更新します。about://web-app-internals/
を開き、インストールされている PWA のstart_url
プロパティをチェックして、想定どおりに更新されていることを確認します。