<install>要素は​何ができて、何を変えるのか​

2026/07/17 開催「OPTiM Frontend Meetup #1」でのオプティム 菅原の発表資料です。

https://optim.connpass.com/event/396222/

Transcript

1. © 2019-2026 OPTiM Corp. All rights reserved. © 2019-2026 OPTiM Corp. All rights reserved. <install>要素は 何ができて、何を変えるのか 菅原 登壇日：2026/07/17
2. © 2019-2026 OPTiM Corp. All rights reserved. 2 名前 ◼菅原 業務内容 ◼OPTiM Hardware My Portal / OPTiM Support & Growth Portal の フロントエンド ◼OPTiM Hardware My PortalのIoT領域の機能開発、保守 技術領域 ◼Next.js ◼TypeScript ◼Go ◼C++ 自己紹介 OPTiM TECH BOOK #2に寄稿している のでこちらもお願いします！（宣伝）
3. © 2019-2026 OPTiM Corp. All rights reserved. 3 今日話すこと 最近のHTML PWAってなに？ PWAインストールの導線 <install> 要素とは 実装 何が変わるのか サポート状況 まとめ
4. © 2019-2026 OPTiM Corp. All rights reserved. 4 最近のHTMLではできることが色々増えている ◼popover属性によるモーダル実装 ◼検索のための要素という意味合いをもたせる<search>要素 ◼PWAインストールのための<install>要素 ← NEW! 最近のHTML
5. © 2019-2026 OPTiM Corp. All rights reserved. 5 PWA(プログレッシブウェブアプリ) ウェブ技術で構築された、端末にインストールして 使えるアプリ ◼通常のWebサイトとネイティブアプリの中間のような 性質 特徴 ◼ PC/モバイル問わず、端末にインストールして ネイティブアプリのように使える ◼バックグラウンドやオフライン動作への対応 ◼通知やショートカットが利用可能 PWAってなに？ ブラウザ、PWA、ネイティブアプリ ショートカットが利用可能
6. © 2019-2026 OPTiM Corp. All rights reserved. 6 1. 各種アプリストア（Playストア、Appストア、Microsoftストアなど）経由でインストール 2. ブラウザのUIからインストール 3. Webページ上のインストールUIからインストール どうやってインストールするの？ ブラウザのUI経由 WebページのインストールUI経由
7. © 2019-2026 OPTiM Corp. All rights reserved. 7 インストールの導線 beforeinstallprompt 従来の命令的フロー / JS で状態管理 発火した beforeinstallprompt イベントの イベントオブジェクト(BeforeInstallPromptEvent) を保持 ユーザーがインストールボタンをクリック イベントオブジェクトのprompt()を呼び出す ブラウザがインストールプロンプトを表示 インストール完了 Web Install API 命令的なインストールフロー / Promise ユーザーがインストールボタンをクリック navigation.install() を呼び出す ブラウザがインストールプロンプトを表示 返ってきた Promise を await インストール完了 <install> 要素 宣言的フロー（今回取り上げる対象） HTML に <install> 要素を記述 ブラウザが UI をレンダリング ユーザーがインストールボタンをクリック ブラウザがインストールプロンプトを表示 インストール完了
8. © 2019-2026 OPTiM Corp. All rights reserved. 8 PWAのインストールボタンをHTMLで置ける新しい要素 2026年5月にchrome for developersで記事が公開 ◼Chromiumに実装され、Chrome / Edge 148以降でフラグを有効化すると利用可能 タグを配置するだけでPWAインストールボタンの最低限の実装が完了 <install> 要素とは 出典: https://developer.chrome.com/blog/install-element-ot?hl=ja
9. © 2019-2026 OPTiM Corp. All rights reserved. 9 インストールのための最小構成 最小限であればかなりシンプル
10. © 2019-2026 OPTiM Corp. All rights reserved. 10 <install>要素のイベントリスナー
11. © 2019-2026 OPTiM Corp. All rights reserved. 11 未対応のブラウザの場合、子要素をレンダリング 未対応のブラウザの場合 上:フラグ有効、下: フラグ無効
12. © 2019-2026 OPTiM Corp. All rights reserved. 12 方式 実装方法 主導権 beforeinstallprompt イベントが来た時だけ自前ボタンを出し、未対応時は通常リンクや既 定UIへ逃がす JS側 Web Install API navigator.install を検知して button を出し分け、未対応時は フォー ルバック JS側 <install> 子要素としてフォールバック要素を配置 HTML（ブラウザ） フォールバックの実装
13. © 2019-2026 OPTiM Corp. All rights reserved. 13 他の実装イメージ JSのイベントリスナーでイベントを保持し、必要 に応じて要素の表示制御をして、クリック時にプ ロンプトを表示して…といった処理を自前で記述 Promiseベースで処理を記述 エラーハンドリングはしやすそう
14. © 2019-2026 OPTiM Corp. All rights reserved. 14 何が変わるのか 観点 beforeinstallprompt Web Install API <install> 実装 イベント駆動、命令的 Promise、命令的 HTML、宣言的 UIの主導権 自前で実装 自前で実装 ブラウザ側で描画 フォールバック イベントを見て分岐 APIの判定を用いて分岐 子要素として記述 結果・状態の受け取り方 userChoiceイベントや appinstalledイベント resolve / reject promptactionイベントや promptdismissイベント 実装負荷 自前で実装する箇所が多め 分岐や例外処理が必要 インストールの導線のみで あれば軽め 向いている場面 現在主流なブラウザを使う ユーザー向け 細かい制御などが必要なと き 最小限のコードで実装した いとき
15. © 2019-2026 OPTiM Corp. All rights reserved. 15 Web Install API、<install>ともに2026年6月時点ではまだExperimental Chrome / Edge 148以降でflagを有効化することで使用可能（モバイル除く） ◼about://flags/#web-app-installation-api ◼about://flags/#web-app-install-element Firefox / Safariの機能としてはまだ扱えない ◼Firefox 143 / Mac OS Sonoma あたりからPWA自体がサポートされ始めている ◼これからに期待 サポート状況
16. © 2019-2026 OPTiM Corp. All rights reserved. 16 <install> 要素は、HTMLのみで宣言的にPWAインストールの導線を作成 従来の処理を置き換えるというより、選択肢の一つ <install>に限らず、従来JSで記述していた処理がHTMLでカバーできるようになってきている のは面白い ◼最低限の処理が担保されるのもうれしいところ 古いまま止まっていたHTMLの知識を見直すいいきっかけになった 1ユーザーとしては、PWA使えるなら使う派なのでインストールボタンが実装されていたら「や るなぁ」と思う まとめ・所感
17. © 2019-2026 OPTiM Corp. All rights reserved.