Chrome と Edge、install 要素の Origin Trial

525文字
3分
編集
#Chrome #Edge #PWA #HTML

Chrome と Microsoft Edge は、Web アプリのインストール用 HTML 要素 <install> を Origin Trial で提供する。Microsoft Edge チームと Chrome チームが Chromium に実装した。Chrome 148 以降と Edge 148 以降では about://flags/#web-app-install-element を有効にすればローカルで試せ、同一トークンで両ブラウザの 148 から 153 まで本番サイトでも試用できる。従来の beforeinstallprompt による JavaScript 主導のフローに代わり、ブラウザがラベル・言語・見た目を制御する信頼できるインストールボタンをページに置ける。

  • 同一オリジンの現在ページをインストールする場合、マニフェストに id フィールドがあれば <install></install> だけで足りる。
  • 別オリジンの Web アプリをインストールする場合は installurl で対象 URL を指定する。マニフェストに id が無いときは manifestid に DevTools の Application タブで表示される Computed App ID を渡す。複数アプリを並べたカタログページを組める。
  • 未対応ブラウザでは要素の子 HTML がそのまま表示されるフォールバックがある。'HTMLInstallElement' in window で機能検出もできる。
  • promptaction・promptdismiss・validationstatuschanged イベントで成功・却下・検証エラーを扱える。
  • 宣言的な <install> に対し、命令的な navigator.install() を提供する Web Install API も別の Origin Trial で並行実験されている。前者はブラウザ制御の UI と最小コード、後者はカスタム UI と既存の JavaScript 中心フロー向けと位置づけられる。

#ローカルでの試用

  1. Chrome または Edge 148 以降を使う。
  2. about://flags/#web-app-install-element を開き、Web App Install Element を Enabled にする。
  3. ブラウザを再起動する。

#Origin Trial の登録

  1. install 要素の Origin Trial 登録ページ でサインインし Register する。
  2. サイトのオリジンを入力してフォームを送信し、トークン文字列を得る。
  3. 各ページに <meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE"> を置くか、Origin-Trial: YOUR_TOKEN_HERE レスポンスヘッダで送る。

最小のマークアップ例は次のとおりである。

html
<install></install>

別オリジンを指定する例は次のとおりである。

html
<install installurl="https://awesome-app.com"></install>

フォールバック付きの例は次のとおりである。

html
<install>
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

複数アプリを並べた動作例は Element Store デモ で確認できる。

#参考文献