Knew iOS。iOS SDK > 網頁: 好方便的SFSafariViewController
此篇著重在顯示網頁的方式及SafariViewController的應用
- 踩雷了?
- 開啟網頁的多種方式(Mobile Safari | WebView | SFSafariViewController)
- 簡易版
- 把SFSafariViewController包起來
踩雷了?
為什麼按鈕沒有反應!!
過去在開發時,會有內部(App內)顯示、外部顯示網頁的需求。之前專案在內容顯示網頁的部分,採用內嵌WebView來控制網頁開啟。遇到了幾次奇奇怪怪的問題,從剛開始的UIWebView到更換WKWebView後,對WebView的好感還是沒有提升。
主要是因為WebView在切換網頁實在是太麻煩了,WKWebView具備Nitro JavaScript引擎並提供更多其他的功能,聽起來很強大,但可能是我對WKWebView還不夠熟悉,無法好好駕馭,這次就又遇到了網頁中的按鈕點擊後沒有反應??
在確認後,決定
- iOS11前的用戶使用WebView
- iOS11後的用戶使用SafariViewController
顯示網頁的多種方式(Mobile Safari | WebView | SFSafariViewController)
在App中,應該很有機會需要顯示不同的網頁內容,iOS 9 開始,iOS SDK提供了以下選項來實現
App內顯示
- UIWebView / WKWebView (不實作內容)
優點:方便將網頁嵌入App
缺點:切換網頁不好控制
註:可以鞭策學習JavaScript
2. SFSafariViewController
簡易版 | 把SFSafariViewController包起來
優點:容易實現,可以使用所有Mobile Safari功能,用戶不需要離開App。
缺點:使用方便,用戶可能分心。
呼叫外部的Mobile Safari瀏覽器來顯示(iOS 10以上)
- 優點: 直接開啟指定網址,最容易實現
- 缺點:使用者會暫時離開你的App,然後可能一去不復返。
簡易版
專案 iOS 11.0以上
// 記得引用
import SafariServices/// 顯示簡易SafariViewController
func displaySimpleSafari(url: URL) {
let safariViewController = SFSafariViewController(url: url)
present(safariViewController, animated: true, completion: nil)
}// 使用範例
if let url = URL(string: "<https://www.google.com>") {
displaySimpleSafari(url: url)
}
把SFSafariViewController包起來
其實最基本的SafariViewController只要短短幾行程式碼就可以實現(參照簡易版)
就算要設定樣式,也只要在方法中設定參數就可以達成
方便以後使用,也只要將方法UIViewController裡extension即可
為何還要將它包起來呢?
這邊主要是因為,通常在專案中會使用同一個樣式或設定的SafariViewController,少數會有其他額外需求,當有需要使用到SFSafariViewControllerDelegate時,可以預先在包起來的ViewController統一實作,若有其他需求時,在另外設定代理人使用(此次未實作代理部分),保留擴充的空間、方便重複使用、減少重複的程式碼。
詳細程式碼👇