Web view on the way
- 1. Liddle Fang 2016 / 12 Xamarin WebView 的使用與 Cordova
- 2. 2 WebView 進階
- 3. 3 個人介紹 ■ 房懷安, Liddle Fang ■ 半路出家，2003年開始寫程式。 偏愛 .NET, Objective-C and Python ■ 2008 開始進入行動開發領域 ■ Github https://github.com/FangHuaiAn ■ 目前是昕力資訊產品暨顧問服務處資深顧問
- 4. 4 適合對象 n 對 Xamarin 有操作經驗 新設專案，在 iOS 可操作 Storyboard，在 Android 可 StartActivity 即可。
- 5. 5 課程綱要 n WebView 的需求與功能 n 使用的前提 n 結構 iOS : UIWebView and UIWebViewDelegate Android : WebView and WebViewClient n 四項功能 n Cordova 的思考邏輯 n IOC 下的 DI n Demo : SimCordova n JavascriptCore n ReactNative的思考邏輯 n Demo : SimReactNative
- 9. 9 時間是把殺豬刀 …… n Windows Phone 精雕細琢 n Android ：Time on Market
- 10. 10
- 11. 11 Steve Jobs n “I will spend my last dying breath if I need to, and I will spend every penny of Apple's $40 billion in the bank, to right this wrong. I'm going to destroy Android, because it's a stolen product. I'm willing to go thermonuclear war on this.”
- 12. 12 功能
- 13. 13 UIWebView – File Format n Excel, PowerPoint, Word n Numbers, Keynote, Page n PDF, RTF https://developer.apple.com/library/content/qa/qa1630/_index.html#//apple_ref/doc/uid/DTS40008 749
- 14. 14 WebView – File Format n Google Docs Viewer https://developer.apple.com/library/content/qa/qa1630/_index.html#//apple_ref/doc/uid/DTS40008 749
- 15. 15 前提
- 16. 16 在使用 WebView 之前 n 確認你的連結是 https 這邊應該是 n 規劃好互動規則 n Progressive Web Apps
- 17. 17 iOS n App Transport Security n 這些方向是對的。 你不應該想用例外忽略他！ n 當然，你強到可以偵測中間人攻擊以及 DNS 攻擊也是可以。
- 20. 20 結構
- 21. 21 基本結構 – 瀏覽器在做什麼？ n 解析檔案，呼叫相應 API 解譯內容 如遇 html 時，需要 Parsing DOM, 按 CSS 渲染 準備 javascript engine
- 22. 22 基本結構 n UI 顯示內容 n Core Feature 處理網路要求，註冊狀態
- 23. 23 看一下 Android 的 Source Code n 路徑 /Users/你的使用者名稱/Library/Developer/Xamarin/android- sdk-macosx/sources/android-API版本號/android/webkit
- 24. 24 Android 目錄 n JavaScriptCore n WebCore rendering, dom, html, accessibility, bindings, bridge, CSS, editing, history, icu, inspector, loader, mathml, notification, page ( 頁面結構,頁面操作,設定, javascript 環境 ), platform ( graphics, network, image, text), plugins, resources, storage, svg, websocket, wml, worker, xml n WebKit android/jni n WebKit2
- 25. 25 Android
- 26. 26 Android
- 27. 27 Android
- 31. 31 四項基本功能 n Load Local HTML n Load Url n Call Native Features from Content n Call Content’s Functions from Native Platform
- 32. 32 Load Local HTML n iOS n Android
- 33. 33 Load Url n iOS n Android
- 34. 34 Call Platform Feature n iOS n Android
- 35. 35 Call Content Functions n iOS n Android
- 36. 36 Adobe n Flex n PhoneGap, Cordova
- 38. 38 Cordova 功能解析 n 解析一個 GPS plugin 為例 n 以 Cordova 標準的使用方法至 https://cordova.apache.org/plugins/ 搜尋 以 GPS 搜尋 plug-in 獲得 4項結果 n 選擇 cordova-plugin-mauron85-background-geolocation n 可以看到呼叫方法: https://www.npmjs.com/package/cordova-plugin- mauron85-background-geolocation n 這邊我們可以看到 code https://github.com/mauron85/cordova-plugin- background-geolocation/tree/master/src n 所需功能以 Objective-C, Java 實現
- 39. 39 ReactNative n Facebook n Virtual DOM n JavaScriptCore