iT 邦幫忙鐵人賽 Day 18: 在 App 中開啟一個 Safari 瀏覽器吧!

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

Jeremy Xue
3 min readNov 2, 2018
iPhone 內建的瀏覽器 — Safari

前言:

天瓏書局自助刷卡說明

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

#SFSafariController

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

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

Line 掃描 QR Code 過程

所以我們打算在我們掃描 QR Code 的 ScannerViewController 掃描後,透過 Delegate 將我們掃描到的結果傳回首頁跳出讀取結果的 AlertController,並且詢問使用者是否開啟。

首先我們先到我們的 ScannerViewControllermetadataOutput 方法,在我們獲取到 QR Code 的字串值後,新增下面這段程式碼:

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

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

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

成功在 App 中使用 SFSafariController 功能

後記:

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

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

Hi, I’m Jeremy. [好想工作室 — iOS Developer]

No responses yet