$30 off During Our Annual Pro Sale. View Details »

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

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

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

marcy731

March 22, 2023
Tweet

More Decks by marcy731

Other Decks in Programming

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. 54

    View Slide