Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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を使うメリットとデメリット 7 メリット ❏ Web資産の再利用 ❏ 開発時間・コストの削減 ❏ サーバー側での変更が即座に反映 デメリット

    ❏ Nativeに比べ、パフォーマンスが劣る ❏ Native UIとの親和性が低い ⇨ UXの低下にもつながる
  2. 12 Native - NavigationBar - title view - back buttom

    - TabBar WebView WebViewをNativeアプリのように使う方法を考える Push ❏ 今回は一覧画面はNative、詳細画面はWebView という構成を考える
  3. ❏ NavigationBar / Header ❏ ToolBar / TabBar ⇨ 二重に表示され、統一感がない

    ⇨ Native操作とWebView操作が異なる 一般的なWebView実装 14 WebView SFSafariViewController
  4. ❏ NavigationBar / Header ❏ ToolBar / TabBar ⇨ 不要なHeader/Footerの削除

    ⇨ 不要なToolBarの削除(実装しない) 一般的なWebView実装 15 WebView SFSafariViewController
  5. まとめ 51 ❏ WebView UIとNative UIの親和性の向上が大事 ❏ 不要な要素を削除 ❏ header/footerなどを削除

    ❏ MutationObserverはとても便利 ❏ Native操作への統合 ❏ 「戻る」はNavigationBarに ❏ 「更新」はPull to Refresh
  6. 54