Chrome でウェブアプリ マニフェストの更新を処理する方法

PWA のアイコン、ショートカット、色、その他のメタデータを変更するために必要なもの

Adriana Jara
François Beaufort
François Beaufort
GitHub
Pete LePage

PWA をインストールすると、ブラウザは、ウェブアプリ マニフェストから取得した情報をアプリ名、アプリで使用するアイコン、アプリの起動時に開く必要がある URL に使用します。しかし、アプリのショートカットを更新したり、新しいテーマカラーを試したりする必要がある場合はどうでしょうか。変更はいつ どのようにブラウザに反映されますか？

ほとんどの場合、PWA がリリースされてからマニフェストが更新されてから 1 ～ 2 日以内に変更が反映されます。

パソコン版 Chrome の更新

PWA が起動したとき、またはブラウザタブで開かれたときに、Chrome では最後にローカル マニフェストの変更チェックが行われた時刻を判断します。ブラウザが最後に起動してからマニフェストがチェックされていない場合、または過去 24 時間以内にマニフェストがチェックされていない場合、Chrome はマニフェストのネットワーク リクエストを行い、ローカルコピーと比較します。

マニフェストで選択したプロパティが変更された場合（下記のリストを参照）、Chrome は新しいマニフェストをキューに入れ、すべてのウィンドウを閉じた後にインストールします。インストールされると、新しいマニフェストのすべてのフィールド（name、short_name、icons を除く）が更新されます。

更新をトリガーするプロパティ

  • display（以下を参照）
  • scope
  • shortcuts
  • start_url
  • theme_color
  • file_handlers

display フィールドを更新した場合の結果

アプリの表示モードを browser から standalone に更新した場合、既存のユーザーのアプリは更新後にウィンドウで開きません。ウェブアプリには 2 つの表示設定があります。マニフェストの設定（自分で制御する設定）と、ユーザーが制御するウィンドウ/ブラウザタブの設定です。ユーザーの選択が常に尊重されます。

マニフェストの更新のテスト

chrome://web-app-internals ページ（Chrome 85 以降で利用可能）には、デバイスにインストールされているすべての PWA に関する詳細情報が表示され、マニフェストの最終更新日や更新頻度などを確認できます。

Chrome でマニフェストの更新を手動で確認するには、コマンドライン フラグ --disable-manifest-update-throttle で Chrome を起動するか、Chrome を再起動します（about://restart を使用します）。これによりタイマーがリセットされ、PWA の次回の起動時に Chrome が更新されたマニフェストをチェックします。次に、PWA を起動します。PWA を閉じると、新しいマニフェスト プロパティで更新されます。

リファレンス

Chrome for Android の更新

PWA の起動時に、Chrome ではローカル マニフェストの変更チェックが最後に確認された時刻を判断します。マニフェストが過去 24 時間チェックされていない場合、Chrome はマニフェストのネットワーク リクエストをスケジュールし、ローカルコピーと比較します。

マニフェストで選択したプロパティが変更されている場合（下記のリストを参照）、Chrome は新しいマニフェストをキューに入れます。PWA のウィンドウがすべて閉じられた後、デバイスが電源に接続され、Wi-Fi に接続されると、Chrome はサーバーに更新された WebAPK をサーバーにリクエストします。更新すると、新しいマニフェストのすべてのフィールドが使用されます。

更新をトリガーするプロパティ

  • background_color
  • display
  • orientation
  • scope
  • shortcuts
  • start_url
  • theme_color
  • web_share_target

Chrome が更新されたマニフェストをサーバーから取得できない場合、チェックの間隔が 30 日に延長されることがあります。

マニフェストの更新のテスト

about://webapks ページには、デバイスにインストールされているすべての PWA の詳細情報が表示され、マニフェストの最終更新日や更新頻度などを確認できます。

マニフェストの更新を手動でスケジュールするには、タイマーとローカル マニフェストをオーバーライドします。

  1. デバイスを電源に接続し、Wi-Fi に接続されていることを確認します。
  2. Android タスク マネージャーを使用して PWA をシャットダウンしてから、Android 設定の [アプリ] パネルを使用して PWA を強制停止します。
  3. Chrome で about://webapks を開き、PWA の [更新] ボタンをクリックします。[Update Status] が [Pending] に変わります。
  4. PWA を起動し、正しく読み込まれることを確認します。
  5. Android タスク マネージャーを使用して PWA をシャットダウンしてから、Android 設定の [アプリ] パネルを使用して PWA を強制停止します。

通常、PWA は数分以内に更新されます。更新が完了すると、[更新ステータス] が [成功] に変わります。

リファレンス