使用URLSession、Data下載資料、如何顯示網頁 WKWebView

Anny
5 min readOct 25, 2020

--

除了在手機本身上操作之外,我們也需要從網路下載資料到手機中。

可能是JSON文字檔或是圖片等等…

今天來看看如何顯示網頁~以及如何下載資料吧~~~

本篇內容包含:

  • 連結網路顯示網頁 — WKWebView
  • 等待網頁 Loading 的符號 — UIActivityIndicatorView
  • 使用 Data 下載資料
  • 使用 URLSession 下載資料 — DataTask & DownloadTask
  • 處理沒有連網的錯誤

連結網路顯示網頁 — WKWebView

  1. 在 Main.storyboard 加入 WebKit View
  2. 連結到程式碼中 然後記得 import WebKit 才能使用喔!
  3. 將網址轉成 URL
  4. 將 URL 放進 myWebView.load()
@IBOutlet weak var myWebView: WKWebView!override func viewDidLoad() {
super.viewDidLoad()
if let url = URL(string: "https://www.youtube.com/"){
let request = URLRequest(url: url)
myWebView.load(request)
}
}

有些網址會有打不開的情況,這時候就需要去 Info.plist 修改設定。

  1. 在 Info.plist 中增加 App Transport Security Settings
  2. 在裡面(打開三角形) 再次新增 Allow Arbitrary Loads
  3. 並將原本設定的 No 改成 Yes !!!

等待網頁 Loading 的符號 — UIActivityIndicatorView

  1. 在 Main.storyboard 加入 Activity Indicator View
  2. 將設定中的 Hides When Stopped 打勾,這樣當程式碼呼叫停止時 ,Loading 的符號就會隱藏。

再來就是!我們要讓網頁在讀取載入時,出現等待網頁的 Loading 符號。

所以,我們要得知網頁正在載入中,以及網頁什麼時候載入成功。

WKWebView在讀取網頁的過程中,如需要用到navigationDelegate。

  1. 要先服從 WKNavigationDelegate 的協定
  2. 接著 myWebView.navigationDelegate = self
  3. 使用兩個 func didStartProvisionalNavigation & didFinish navigation

接著進入重點啦!!!要來使用URLSession、Data下載資料了!!!

使用 Data 下載資料

  1. 先將網址放進常數中
  2. 使用 URL 將剛剛存好的網址型態轉成URL
  3. 將 URL 放進 Data 中下載資料 (需要使用try do catch)
  • 在主佇列上(main queue)上 — 要放非同步
  • 在共時佇列上(global queue)上 — 同步非同步都可

下載圖片要在共時佇列上( global queue)上,才不會讓main的畫面卡住不動,載好之後 再到 main queue上 更新畫面!

使用 URLSession 下載資料 — DataTask & DownloadTask

DataTask— 使用在連結網站拿到文字XML或JSON — 因為回傳data

  1. 建立 URLSession
  2. 將網址放進常數中
  3. 使用 URL 將剛剛存好的網址型態轉成URL
  4. 接著開一個task — 使用 URLSession.dataTask 後面帶入 URL 以及一個Closure函式
  5. data 就是我們下載到的資料啦
  6. 最後記得呼叫 task.resume()

URLSession 跟 Data 下載方式不一樣的地方在於

  • URLSession 是在 共時佇列上(global queue)下載
  • Data 是在主佇列上(main queue)下載

所以 只需要在最後顯示時回到 主佇列上(main queue)上

使用 URLSession 下載資料

DownloadTask — 使用在下載圖片 — 因為回傳url

基本上 DownloadTask 的使用方式跟 DataTask 一樣

差別在於 DownloadTask Closure函式 回傳的是url

  • DataTask — 使用在連結網站拿到文字XML或JSON — 因為回傳data
  • DownloadTask — 使用在下載圖片 — 因為回傳url

處理沒有連網的錯誤

最後簡單說明一下,如何判斷沒有網路連線的錯誤

  1. 先將 error 使用 NSError.code 得到錯誤資訊
  2. error 錯誤訊號為 -1009 代表 沒有網路連線
  3. show 一個Alert 警告視窗,提醒告知使用者沒有網路連線

--

--

Anny
Anny

Written by Anny

If You Think You Can, You Can!

No responses yet