iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
自我挑戰組

一天一蘋果,Bug 遠離我。系列 第 18

Day 18: 在 App 中開啟一個 Safari 瀏覽器吧!

使用 SFSafariController 來開啟我們 QRCode 獲取的網址連結吧!

https://ithelp.ithome.com.tw/upload/images/20181102/20107701MARXIbJ5LS.png

iPhone 內建的瀏覽器 - Safari

前言:

https://ithelp.ithome.com.tw/upload/images/20181102/20107701mT7dfEwPvM.png

天瓏書局自助刷卡說明

前面我們有實作過在 App 中透過 WebView 顯示出書局網站內容,這次教學我們將使用上次 QR Code 掃描過後的結果,如果是網址我們就透過 SFSafariController 來在 App 中開啟網站掃描到的網站吧。


#SFSafariController

SFSafariController 跟使用 URL 一般跳出 Safari 瀏覽器的功能是不太一樣的,SFSafariController 是在 App 中使用完整的 Safari 瀏覽器功能,並沒有離開 App 本身,如此一來就能讓使用者存留在 App,並且也能夠使用 Safari 的完整功能。

要使用 SFSafariController 之前,我們需要先 import SafariServices 之後才能開始我們的實作,這邊我們想仿照 Line 的 QR Code 掃描的方式:

image

Line 掃描 QR Code 過程所以我們打算在我們掃描 QR Code 的 ScannerViewController 掃描後,透過 Delegate 將我們掃描到的結果傳回首頁跳出讀取結果的 AlertController,並且詢問使用者是否開啟。
首先我們先到我們的 ScannerViewController 的 metadataOutput 方法,在我們獲取到 QR Code 的字串值後,新增下面這段程式碼:

// dismiss ScannerViewController,並且在 dismiss 後
// 執行我們自定義的 qrCodeDelegate 方法
self.dismiss(animated: false) {
  self.qrCodeDelegate?.getUrlString(urlString: string)
}

接著我們到我們的首頁 HomeViewController 實作我們 QRCodeDelegate 的 getUrlString 的方法:

// MARK: QRCode Delegate
extension HomeViewController: QRCodeDelegate {
    func getUrlString(urlString: String) {
        let alertController = UIAlertController(title: "讀取資訊", message: "確認要開啟以下連結嗎?\n\(urlString)", preferredStyle: .alert)
        let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)
        let comfirmAction = UIAlertAction(title: "開啟", style: .default) { (_) in
            // 當使用者按下開啟後,判斷是否能夠轉換為 url   
            // 如果成功轉換成 url,初始化 SFSafariViewController,並且 present 它                                                             
            if let url = URL(string: urlString) {
                let safariVC = SFSafariViewController(url: url)
                self.present(safariVC, animated: true, completion: nil)
            } else {
                // 若無法轉換為 url,跳出 errorAlertController
                let errorAlertController = UIAlertController(title: "開啟失敗", message: "無效的 URL,請確認後在試一次", preferredStyle: .alert)
                let okAction = UIAlertAction(title: "OK", style: .cancel, handler: nil)
                errorAlertController.addAction(okAction)
                self.present(errorAlertController, animated: true, completion: nil)
            }
        }
        alertController.addAction(cancelAction)
        alertController.addAction(comfirmAction)
        self.present(alertController, animated: true, completion: nil)
    }
}

如此一來我們就完成整個 QR Code 掃碼流程了,接著我們實際運行一次吧!

image

成功在 App 中使用 SFSafariController 功能


後記:

透過這次教學後,大家對於能夠在 App 中應用 Web 瀏覽器又多了一項,但至於要使用跳出瀏覽器、WKWebView 或是 SFSafariController 完全都是看個人的需求,根據你的需求決定你要使用的方法,我們下次教學見~


上一篇
Day 17: 寫一個易讀的表單視圖!
下一篇
Day 19: 在 App 中加入一張地圖吧 !
系列文
一天一蘋果,Bug 遠離我。30

尚未有邦友留言

立即登入留言