gistfile1.txt
---
test

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

{%hackmd MNcuRlXoQDak0uCmtaJKwA %}

### 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 :iphone:
- enable forward and back navigtion when appropriate

###### tags: `MOPCON 2019`