AndroidにおけるWebの進化

1. << Androidにおける Webの進歩 YUMEMI.grow Mobile #4
2. • 株式会社ゆめみ • AndroidとFlutterをぼちぼち • Twitter: @mono33__ みかみ
3. [1] What's new in Web on Android, https://youtu.be/sLn3wszcnGU
4. アジェンダ 1. AndroidにおけるWebコンテンツ 2. WebViewの進歩 3. Custom Tabsの進歩 4. PWAの進歩 5. TWAの紹介 6. まとめ
5. 1. AndroidにおけるWebコンテンツ
6. AndroidにおけるWebコンテンツ • AndroidにおけるWebコンテンツの扱いは主に4つ ◦ WebView ◦ Custom Tabs ◦ Progress Web Apps（PWA） ◦ Trusted Web Activity（TWA） • Webの資源を有効活用することができる
7. 2. WebViewの進歩
8. WebView • Androidアプリに Webコンテンツを埋め込むた めのView • ウェブコンテンツを制御・変 更するAPI [2] WebView, https://developer.android.com/reference/android/webkit/WebView WebView
9. X-Requested-With headerについて • クリック詐欺の検出やAJAXリクエストであることをサー バーに通知するために利用 • いくつかの脆弱性とプライバシー上の懸念 [3] Improving user privacy by requiring opt-in to send X-Requested-With header from WebView, https://android-developers.googleblog.com/2023/02/improving-user-privacy-by-requiring-opt-in-to-send-x-requested-wih-header-from-webview.html WebView サーバー XRW アプリケーション名
10. X-Requested-With headerの非推奨化 • 段階的にX-Requested-With headerを削除 • X-Requested-With headerに依存しているアプリのために オプトインAPIが用意 [4] Trial for X-Requested-With in WebView Deprecation, https://developer.chrome.com/origintrials/#/view_trial/1390486384950640641
11. ラージスクリーン端末のサポート • ラージスクリーン向けのWebViewの機能開発 ◦ WebViewから画像とテキストのドラッグ & ドロップ ◦ ハンドライティング機能
12. https://www.youtube.com/watch?v=sLn3wszcnGU&t=250s
13. ドラッグ & ドロップ対応 • WebViewから画像やテキストをドラッグ & ドロップ • AndroidManifest.xmlに追加するだけ [5] DropDataContentProvider, https://developer.android.com/reference/androidx/webkit/DropDataContentProvider
14. https://www.youtube.com/watch?v=sLn3wszcnGU&t=270s
15. ハンドライティング機能について • Android 14 のChromeとWebViewでHTMLの入力フォー ムで手書き機能の完全サポートや入力ジェスチャーがサ ポート • Android 13では開発者向けオプションで手書き機能を検 証することができる（タッチペンで手書き入力）
16. Jetpack JavaScript Engine • アプリ内でJavaScriptを実行するライブラリ • ウェブアプリとモバイルアプリでビジネスロジックを共有す る場合などに利用 • 別プロセスで実行できたり、WebViewを表示する必要がな いので少ないリソースで実行できたり [6] JavascriptEngine, https://developer.android.com/jetpack/androidx/releases/javascriptengine
17. Jetpack JavaScript Engineのイメージ
18. Jetpack JavaScript Engineのイメージ
19. 3. Custom Tabsの進歩
20. Custom Tabs • アプリ内でシームレスにWeb コンテンツを表示 • ブラウザアプリを内部的に 使用するのでブラウザに 保存されている情報や機 能を利用できる [7] Custom Tabs, https://developer.chrome.com/docs/android/custom-tabs/
21. Partial Custom Tabs [8] Bringing the best of Chrome to Android developers and users, https://android-developers.googleblog.com/2023/02/bringing-best-of-chrome-to-android-d evelopers-and-users.html [9] custom-tabs-example-app, https://github.com/GoogleChrome/android-browser-helper/tree/main/demos/custom-tabs-exa mple-app • 従来のCustomTabsは画面全体に オーバーレイ表示 • Partial Custom Tabsは文字通り 画面の一部分にWebコンテンツを表 示
22. タブレット向けのPartial Custom Tabsの展望 • ボトムシート/オーバーレイ/サイドバイサイドから切替
23. 4. PWAの進歩
24. Progress Web Apps（PWA） • Webプラットフォーム技術を使用して構築されたインストールでき るWebアプリ • AndroidやiOSといったクロスプラットフォームで動作 • オフラインやバックグラウンドでも動作させることができる [10] Progressive Web Apps, https://web.dev/progressive-web-apps/ PWAのイメージ
25. インストール可能条件の緩和 • PWAにおいてオフライン機能での動作を 実現するService Workerの fetch handlerの対応が不要に • オフラインを表すデフォルトのページが用 意 [11] Basic offline page for web apps on Chrome Android, https://developer.chrome.com/blog/default-offline/
26. 5. TWAの紹介
27. Trusted Web Activity（TWA） • フルスクリーンでのウェブコンテンツの表示を可能にするAndroid の機能 • TWAを介せばWebサイトをそのままGoogle Playに公開も • TWAを使うことでGoogle Playの機能を使える ◦ Google Play Dstribution ◦ Play Billing API [12] Trusted Web Activity, https://developer.chrome.com/docs/android/trusted-web-activity/
28. まとめ • AndroidのWebコンテンツの扱いは年々進歩 • ラージスクリーン対応が熱い • PWA/TWAなども徐々に新機能が開発されている印象
29. References 1/2 • [1] What's new in Web on Android, https://youtu.be/sLn3wszcnGU • [2] WebView, https://developer.android.com/reference/android/webkit/WebView • [3] Improving user privacy by requiring opt-in to send X-Requested-With header from WebView, https://android-developers.googleblog.com/2023/02/improving-user-privacy-by-requiring-opt-in- to-send-x-requested-wih-header-from-webview.html • [4] Trial for X-Requested-With in WebView Deprecation, https://developer.chrome.com/origintrials/#/view_trial/1390486384950640641 • [5] DropDataContentProvider, https://developer.android.com/reference/androidx/webkit/DropDataContentProvider • [6] JavascriptEngine, https://developer.android.com/jetpack/androidx/releases/javascriptengine
30. References 2/2 • [7] Custom Tabs, https://developer.chrome.com/docs/android/custom-tabs/ • [8] Bringing the best of Chrome to Android developers and users, https://android-developers.googleblog.com/2023/02/bringing-best-of-chrome-to-android-develope rs-and-users.html • [9] custom-tabs-example-app, https://github.com/GoogleChrome/android-browser-helper/tree/main/demos/custom-tabs-example-ap p • [10] Progressive Web Apps, https://web.dev/progressive-web-apps/ • [11] Basic offline page for web apps on Chrome Android, https://developer.chrome.com/blog/default-offline/ • [12] Trusted Web Activity, https://developer.chrome.com/docs/android/trusted-web-activity/
31. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. Thanks!