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
   

   View Slide

2. アジェンダ
   2
   ❏ WebViewとNativeアプリの違い
   ❏ WebViewを使うメリットとデメリット
   ❏ WebViewをNativeアプリのように使う方法を考える
   ❏ まとめ
   

   View Slide

3. WebViewはお好きですか？
   3
   WebView
   

   View Slide

4. WebViewはお好きですか？
   4
   モ
   バ
   イ
   ル
   エ
   ン
   ジ
   ニ
   ア
   

   View Slide

5. WebViewとNativeの違い
   5
   WebView
   ❏ Webページを表示するコンポーネントを利用して実装
   Native
   ❏ iOS/AndroidのSDKを利用して実装
   

   View Slide

6. WebViewを使うメリットとデメリット
   6
   メリット
   ❏ Web資産の再利用
   ❏ 開発時間・コストの削減
   ❏ サーバー側での変更が即座に反映
   デメリット
   ❏ Nativeに比べ、パフォーマンスが劣る
   ❏ Native UIとの親和性が低い
   

   View Slide

7. WebViewを使うメリットとデメリット
   7
   メリット
   ❏ Web資産の再利用
   ❏ 開発時間・コストの削減
   ❏ サーバー側での変更が即座に反映
   デメリット
   ❏ Nativeに比べ、パフォーマンスが劣る
   ❏ Native UIとの親和性が低い　⇨　UXの低下にもつながる
   

   View Slide

8. WebViewという選択
   8
   好き嫌い、メリットデメリットはありつつ
   ビジネス上
   あえてWebViewを使う
   という選択を取ることは多々ある
   

   View Slide

9. STORES ブランドアプリとWebView
   9
   Native WebView
   

   View Slide

10. Native UIとの親和性を上げる
    10
    WebViewを使う場合、
    ❏ Native UIとの親和性が低い
    ⇨　親和性をあげる
    ⇨　アプリ全体としてのユーザー体験の向上
    

    View Slide

11. WebViewをNativeアプリのように使う方法を考える
    

    View Slide

12. 12
    Native
    - NavigationBar
    - title view
    - back buttom
    - TabBar
    WebView
    WebViewをNativeアプリのように使う方法を考える
    Push
    ❏ 今回は一覧画面はNative、詳細画面はWebView という構成を考える
    

    View Slide

13. WebViewをNativeアプリのように使う方法
    1. 不要な要素の削除
    

    View Slide

14. ❏ NavigationBar / Header
    ❏ ToolBar / TabBar
    ⇨ 二重に表示され、統一感がない
    ⇨ Native操作とWebView操作が異なる
    一般的なWebView実装
    14
    WebView
    SFSafariViewController
    

    View Slide

15. ❏ NavigationBar / Header
    ❏ ToolBar / TabBar
    ⇨ 不要なHeader/Footerの削除
    ⇨ 不要なToolBarの削除（実装しない）
    一般的なWebView実装
    15
    WebView
    SFSafariViewController
    

    View Slide

16. 不要なHeader/Footerの削除
    

    View Slide

17. 17
    不要なHeader/Footerの削除
    ❏ header/footerに対してremove()するJavaScriptを用意し挿入
    

    View Slide

18. ❏ WKUserScriptを利用してJSをドキュメント読み取り前後に仕込む
    JavaScriptでWebView内のDom操作
    18
    

    View Slide

19. 19
    JavaScriptでWebView内のDom操作
    

    View Slide

20. 20
    JavaScriptでWebView内のDom操作
    ⇨ Document読み込み後にJSを挿入
    

    View Slide

21. ❏ 不要な要素は削除されるが…一瞬削除前の要素がチラつく
    21
    JavaScriptでWebView内のDom操作
    

    View Slide

22. MutationObserverの利用
    

    View Slide

23. MutationObserverとは
    ❏ DOM要素の変更を監視し、変更が検出された場合にコールバック関数
    を実行するJavaScriptのAPI
    23
    MutationObserverの利用
    

    View Slide

24. ❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視
    ❏ 対象を検知次第、すみやかに削除
    ❏ 削除前の要素がチラつくことはなくなる
    24
    MutationObserverの利用
    

    View Slide

25. 25
    MutationObserverの利用
    

    View Slide

26. 26
    MutationObserverの利用
    

    View Slide

27. 27
    MutationObserverの利用
    

    View Slide

28. 28
    MutationObserverの利用
    

    View Slide

29. 29
    MutationObserverの利用
    

    View Slide

30. ❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視
    ❏ 対象を検知次第、すみやかに削除
    ❏ 削除前の要素がチラつくことはなくなる
    30
    MutationObserverの利用
    

    View Slide

31. WebViewをNativeアプリのように使う方法
    2. WebView操作をNative操作へ統合
    

    View Slide

32. 2. Native操作への統合
    32
    Before After
    ❏ ToolBarを実装しない代わりに、同等の操作をNativeに置き換える
    

    View Slide

33. 「戻る」をNavigationBarに統一
    

    View Slide

34. 「戻る」をNavigationBarに統一
    34
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる
    Push
    Native WebView WebView
    Link
    

    View Slide

35. NavigationBarに「戻る」を統一
    35
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる
    Push
    Native WebView WebView
    Link
    Back
    

    View Slide

36. NavigationBarに「戻る」を統一
    36
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる
    Push
    Native WebView WebView
    Link
    Back
    ❎
    

    View Slide

37. NavigationBarに「戻る」を統一
    37
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる
    Push
    Native WebView WebView
    Link
    Back
    ❎
    

    View Slide

38. NavigationBarに「戻る」を統一
    38
    ❏ navigationBar(_:shouldPop:) を利用
    

    View Slide

39. NavigationBarに「戻る」を統一
    39
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
    

    View Slide

40. NavigationBarに「戻る」を統一
    40
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
    

    View Slide

41. NavigationBarに「戻る」を統一
    41
    ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
    Push
    Native WebView WebView
    Link
    Back
    ✅
    

    View Slide

42. NavigationBarに「戻る」を統一
    42
    ❏ ただし、NavigationStackにWebViewしかない時は「戻る」がない
    Link
    WebView WebView WebView
    Link
    

    View Slide

43. NavigationBarに「戻る」を統一
    43
    ❏ NavigationStackがWebViewのみの時、Push遷移を行う
    Push
    WebView WebView WebView
    Link
    

    View Slide

44. 44
    NativeのPush遷移をおこなう
    

    View Slide

45. 45
    NativeのPush遷移をおこなう
    

    View Slide

46. NavigationBarに「戻る」を統一
    46
    ❏ NavigationStackがWebViewのみの時、Push遷移を行う
    Push
    WebView WebView WebView
    Link
    

    View Slide

47. 「更新」はPull to Refreshで実装
    

    View Slide

48. 48
    「更新」はPull to Refreshで実装
    ❏ 「更新」はNative UIのPull to Refreshに統合
    

    View Slide

49. 49
    「更新」はPull to Refreshで実装
    ❏ WKWebView > UIScrollViewにUIRefreshControlを設定
    

    View Slide

50. まとめ
    

    View Slide

51. まとめ
    51
    ❏ WebView UIとNative UIの親和性の向上が大事
    ❏ 不要な要素を削除
    ❏ header/footerなどを削除
    ❏ MutationObserverはとても便利
    ❏ Native操作への統合
    ❏ 「戻る」はNavigationBarに
    ❏ 「更新」はPull to Refresh
    

    View Slide

52. 52
    WebView
    まとめ
    

    View Slide

53. まとめ
    53
    

    View Slide

54. View Slide