WebViewをNativeのように使いたい / Using-WebView-like-Native-App

2023/03/22に行われたEbisu.mobile #1で登壇した時の資料です。
https://hey.connpass.com/event/276211/

Transcript

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