<< Androidにおける Webの進歩 YUMEMI.grow Mobile #4

● 株式会社ゆめみ ● AndroidとFlutterをぼちぼち ● Twitter: @mono33__ みかみ

[1] What's new in Web on Android, https://youtu.be/sLn3wszcnGU

アジェンダ 1. AndroidにおけるWebコンテンツ 2. WebViewの進歩 3. Custom Tabsの進歩 4. PWAの進歩 5. TWAの紹介 6. まとめ

1. AndroidにおけるWebコンテンツ

AndroidにおけるWebコンテンツ ● AndroidにおけるWebコンテンツの扱いは主に4つ ○ WebView ○ Custom Tabs ○ Progress Web Apps（PWA） ○ Trusted Web Activity（TWA） ● Webの資源を有効活用することができる

2. WebViewの進歩

WebView ● Androidアプリに Webコンテンツを埋め込むた めのView ● ウェブコンテンツを制御・変 更するAPI [2] WebView, https://developer.android.com/reference/android/webkit/WebView WebView

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 アプリケーション名

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

ラージスクリーン端末のサポート ● ラージスクリーン向けのWebViewの機能開発 ○ WebViewから画像とテキストのドラッグ & ドロップ ○ ハンドライティング機能

https://www.youtube.com/watch?v=sLn3wszcnGU&t=250s

ドラッグ & ドロップ対応 ● WebViewから画像やテキストをドラッグ & ドロップ ● AndroidManifest.xmlに追加するだけ [5] DropDataContentProvider, https://developer.android.com/reference/androidx/webkit/DropDataContentProvider

https://www.youtube.com/watch?v=sLn3wszcnGU&t=270s

ハンドライティング機能について ● Android 14 のChromeとWebViewでHTMLの入力フォー ムで手書き機能の完全サポートや入力ジェスチャーがサ ポート ● Android 13では開発者向けオプションで手書き機能を検 証することができる（タッチペンで手書き入力）

Jetpack JavaScript Engine ● アプリ内でJavaScriptを実行するライブラリ ● ウェブアプリとモバイルアプリでビジネスロジックを共有す る場合などに利用 ● 別プロセスで実行できたり、WebViewを表示する必要がな いので少ないリソースで実行できたり [6] JavascriptEngine, https://developer.android.com/jetpack/androidx/releases/javascriptengine

Jetpack JavaScript Engineのイメージ

Jetpack JavaScript Engineのイメージ

3. Custom Tabsの進歩

Custom Tabs ● アプリ内でシームレスにWeb コンテンツを表示 ● ブラウザアプリを内部的に 使用するのでブラウザに 保存されている情報や機 能を利用できる [7] Custom Tabs, https://developer.chrome.com/docs/android/custom-tabs/

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コンテンツを表 示

タブレット向けのPartial Custom Tabsの展望 ● ボトムシート/オーバーレイ/サイドバイサイドから切替

4. PWAの進歩

Progress Web Apps（PWA） ● Webプラットフォーム技術を使用して構築されたインストールでき るWebアプリ ● AndroidやiOSといったクロスプラットフォームで動作 ● オフラインやバックグラウンドでも動作させることができる [10] Progressive Web Apps, https://web.dev/progressive-web-apps/ PWAのイメージ

インストール可能条件の緩和 ● PWAにおいてオフライン機能での動作を 実現するService Workerの fetch handlerの対応が不要に ● オフラインを表すデフォルトのページが用 意 [11] Basic offline page for web apps on Chrome Android, https://developer.chrome.com/blog/default-offline/

5. TWAの紹介

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/

まとめ ● AndroidのWebコンテンツの扱いは年々進歩 ● ラージスクリーン対応が熱い ● PWA/TWAなども徐々に新機能が開発されている印象

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

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/

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. Thanks!