2023/03/22に行われたEbisu.mobile #1で登壇した時の資料です。 https://hey.connpass.com/event/276211/
ヘイ株式会社WebViewをNativeのように使いたいSTORES株式会社iOSエンジニア長谷川 将司(@marcy731)2023/03/22 Ebisu.mobile #1
View Slide
アジェンダ2❏ WebViewとNativeアプリの違い❏ WebViewを使うメリットとデメリット❏ WebViewをNativeアプリのように使う方法を考える❏ まとめ
WebViewはお好きですか?3WebView
WebViewはお好きですか?4モバイルエンジニア
WebViewとNativeの違い5WebView❏ Webページを表示するコンポーネントを利用して実装Native❏ iOS/AndroidのSDKを利用して実装
WebViewを使うメリットとデメリット6メリット❏ Web資産の再利用❏ 開発時間・コストの削減❏ サーバー側での変更が即座に反映デメリット❏ Nativeに比べ、パフォーマンスが劣る❏ Native UIとの親和性が低い
WebViewを使うメリットとデメリット7メリット❏ Web資産の再利用❏ 開発時間・コストの削減❏ サーバー側での変更が即座に反映デメリット❏ Nativeに比べ、パフォーマンスが劣る❏ Native UIとの親和性が低い ⇨ UXの低下にもつながる
WebViewという選択8好き嫌い、メリットデメリットはありつつビジネス上あえてWebViewを使うという選択を取ることは多々ある
STORES ブランドアプリとWebView9Native WebView
Native UIとの親和性を上げる10WebViewを使う場合、❏ Native UIとの親和性が低い⇨ 親和性をあげる⇨ アプリ全体としてのユーザー体験の向上
WebViewをNativeアプリのように使う方法を考える
12Native- NavigationBar- title view- back buttom- TabBarWebViewWebViewをNativeアプリのように使う方法を考えるPush❏ 今回は一覧画面はNative、詳細画面はWebView という構成を考える
WebViewをNativeアプリのように使う方法1. 不要な要素の削除
❏ NavigationBar / Header❏ ToolBar / TabBar⇨ 二重に表示され、統一感がない⇨ Native操作とWebView操作が異なる一般的なWebView実装14WebViewSFSafariViewController
❏ NavigationBar / Header❏ ToolBar / TabBar⇨ 不要なHeader/Footerの削除⇨ 不要なToolBarの削除(実装しない)一般的なWebView実装15WebViewSFSafariViewController
不要なHeader/Footerの削除
17不要なHeader/Footerの削除❏ header/footerに対してremove()するJavaScriptを用意し挿入
❏ WKUserScriptを利用してJSをドキュメント読み取り前後に仕込むJavaScriptでWebView内のDom操作18
19JavaScriptでWebView内のDom操作
20JavaScriptでWebView内のDom操作⇨ Document読み込み後にJSを挿入
❏ 不要な要素は削除されるが…一瞬削除前の要素がチラつく21JavaScriptでWebView内のDom操作
MutationObserverの利用
MutationObserverとは❏ DOM要素の変更を監視し、変更が検出された場合にコールバック関数を実行するJavaScriptのAPI23MutationObserverの利用
❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視❏ 対象を検知次第、すみやかに削除❏ 削除前の要素がチラつくことはなくなる24MutationObserverの利用
25MutationObserverの利用
26MutationObserverの利用
27MutationObserverの利用
28MutationObserverの利用
29MutationObserverの利用
❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視❏ 対象を検知次第、すみやかに削除❏ 削除前の要素がチラつくことはなくなる30MutationObserverの利用
WebViewをNativeアプリのように使う方法2. WebView操作をNative操作へ統合
2. Native操作への統合32Before After❏ ToolBarを実装しない代わりに、同等の操作をNativeに置き換える
「戻る」をNavigationBarに統一
「戻る」をNavigationBarに統一34❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なるPushNative WebView WebViewLink
NavigationBarに「戻る」を統一35❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なるPushNative WebView WebViewLinkBack
NavigationBarに「戻る」を統一36❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なるPushNative WebView WebViewLinkBack❎
NavigationBarに「戻る」を統一37❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なるPushNative WebView WebViewLinkBack❎
NavigationBarに「戻る」を統一38❏ navigationBar(_:shouldPop:) を利用
NavigationBarに「戻る」を統一39❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
NavigationBarに「戻る」を統一40❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
NavigationBarに「戻る」を統一41❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一PushNative WebView WebViewLinkBack✅
NavigationBarに「戻る」を統一42❏ ただし、NavigationStackにWebViewしかない時は「戻る」がないLinkWebView WebView WebViewLink
NavigationBarに「戻る」を統一43❏ NavigationStackがWebViewのみの時、Push遷移を行うPushWebView WebView WebViewLink
44NativeのPush遷移をおこなう
45NativeのPush遷移をおこなう
NavigationBarに「戻る」を統一46❏ NavigationStackがWebViewのみの時、Push遷移を行うPushWebView WebView WebViewLink
「更新」はPull to Refreshで実装
48「更新」はPull to Refreshで実装❏ 「更新」はNative UIのPull to Refreshに統合
49「更新」はPull to Refreshで実装❏ WKWebView > UIScrollViewにUIRefreshControlを設定
まとめ
まとめ51❏ WebView UIとNative UIの親和性の向上が大事❏ 不要な要素を削除❏ header/footerなどを削除❏ MutationObserverはとても便利❏ Native操作への統合❏ 「戻る」はNavigationBarに❏ 「更新」はPull to Refresh
52WebViewまとめ
まとめ53
54