gistfile1.txt

test

Native App 與 Web View 的恩怨情仇 - Art Huang

Agenda

• 混用 web view 的時機與決定點
• 嵌入 web 頁面之事前準備工作
• 混用遭遇的疑難雜症與治病良方

你要開始一個新的 APP Project

• 你跟BE的時間都不夠
• APP 功能與現有網頁重疊
• 公司有強大的web FE team

身為一個資深 APP 工程師
你應該想到的是
小孩子才做選擇
我全部都要

需要考慮的

• 功能
• 時程
• 人力資源

設計

Designer: ???
Engineer: 我們用 web view 好不好？

Preparations

• Design -UI

  • Search Bar
  • Header & Footer

• Design -UX

  • Navigation
    • Support web backward and forward?
    • Native back or web backward?
  • Web view boundary

瀏覽行為需要跟 Designer 討論清楚，確認 Designer 能接受這種現象和限制。

• Identify Requests From App
  • URL query string
  • Cookie
  • User script
  • User agent(判斷網站從哪邊來)

需要得知用戶是從 Web View 瀏覽或純瀏覽器連進來。

• Custom User Agent

  • App name
  • App version
  • OS

• Cookie

  • MUST manipulate cookies in main thread
  • They are async operations
  • Use shared WKProcessPool for cookie sharing

DispatchGroup: 確認所有的 Web View 都正確的塞入 Cookie

• Account System
  • Handle web login page
  • Sync cookies between native and web view
  • Reload web pages if account status changed

帳號狀態變動需要連動 Web View

• Handling Links
  • Check URLs in very requests loaded in web view
  • Need a URL matching mechanism
  • A table of URL regular expression

載入網頁時決定網頁是否繼續載入

• App & Web Data Transfer
  • By URL query string
  • By JavaScript

App 可以讓 Web View call JavaScript
WebViewMessageHandler: 讓 Native App 能接收從 Web View 內傳入的資料
JavaScript Webkit message handler

• Web View

  • Create custom web view type
  • Shared WKWebViewConfiguration
    • User agent
    • Process pool
  • Other shared configurations
    • Media playback

• HTTPS

  • Use HTTPS web pages
  • App transport security
    • NSAllowsArbitrayLoadsInWebContent
  • Upgrade http to https
    • WKContentRuleListStore

將 HTTP 升級為 HTTPS
WKContentRuleListStore: 編譯規則，將規則加入 contentRuleList

Problems & Solutions

• JavaScript Push State

  • Will not trigger navigation delegate method
  • App loses the opportunity to check URL changes
  • Not using Javascript push state if app user agent

• Crash

  • webView(_:decidePolicyFor:decisionHandler:)
    • Not calling decisionHandler
    • Taking too long to call decisionHandler

檢查所有的路徑都有在 decisionHandler 路徑內

• White Pages
  • Too many web views on view hierarchy
    • At most 2, if there are complicated web pages
  • The web content process is terminated
  • Implement a method in WKNavigtionDelegate

強制 reload？
檢查 Web View title，如果是空的就 reload

• Background Sound

  • Problem: Video or audio will keep playing even if web view is colsed.
  • Solution: Use Javascript to turn them off

• JavaScript Alert

  • Need to implement a method in WKUIDelegate
  • Better checking the URL

Summary

• Use Carefully
  • DISCUSS with web FE engineers
  • EVALUATE the pros and cons
  • PREPARE the custom web view type

• Pros and Cons of Hybrid App

• Pros

  • 不用重新做 web 已經存在的頁面
  • 很適合做 prototyping
  • 可以把精力放在native app features
  • 完全當作native app 使用
  • 更有彈性的運用個 team 的資源

• Cons

  • Web UX 其實不適合用在app上
  • Web 的問題會同時影響app
  • App 會變得相對耗電

• IOS Design GUide for WebView

  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →
  • enable forward and back navigtion when appropriate

tags: MOPCON 2019