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內顯示

1. 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統一實作，若有其他需求時，在另外設定代理人使用(此次未實作代理部分)，保留擴充的空間、方便重複使用、減少重複的程式碼。

詳細程式碼👇

kkaychang/EmbedSafariViewController