Les WebViews sont fréquemment utilisées dans les applications iOS pour un rendu Web hautes performances.
Apple rend ça simple car ils fournissent un excellent cadre pour les utiliser : WebKit.
Nous allons utiliser WKWebView pour un rendu web de base et voir comment nous pouvons gérer la navigation entre les pages du site.
Afficher un site Web
Voici le code pour afficher un site web comme un navigateur l’aurait fait :
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
var webview: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
var urlStr = "http://ravenhacks.com"
if let url = URL(string: urlStr) {
let req = URLRequest(url: url)
webview.load(req)
}
}
override func loadView() {
webview = WKWebView(frame: .zero)
webview.navigationDelegate = self
view = webview
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
navigationItem.title = webview.title
}
}Tout d’abord, nous créons une propriété de classe qui contiendra notre WebView (n’oubliez pas d’importer WebKit)
Ensuite, dans la méthode loadView, nous créons une WebView avec la configuration par défaut et un cadre.
Vous pouvez voir que nous avons également défini la navigationDelegate de la WebView à self. afin que nous puissions plus tard gérer la navigation dans nos WebViews.
Le contrôleur doit se conformer au protocole WKNavigationDelegate mais toutes les méthodes sont optionnelles pour que nous puissions le garder comme ça pour le moment.
Nous pouvons maintenant définir notre vue pour être la WebView ! Lorsque la WebView est configurée, vous devez charger une URL.
Dans viewDidLoad, nous utilisons la méthode de chargement de notre WebView pour afficher un site Web et c’est tout !
Vous pouvez maintenant voir le site Web et naviguer dans ses pages.
Manipulation de la navigation
Tout d’abord, si vous voulez reproduire mon code, le contrôleur de vue qui contient la WebView doit être intégré dans un NavigationController.
Dans les projets réels, vous pouvez faire la même chose sur tous les boutons que vous voulez.
Voici le code :
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
var webview: WKWebView!
var progressView: UIProgressView!
override func viewDidLoad() {
super.viewDidLoad()
var urlStr = "http://ravenhacks.com"
if let url = URL(string: urlStr) {
let req = URLRequest(url: url)
webview.load(req)
}
let left = UIImage(systemName: "chevron.left")
let right = UIImage(systemName: "chevron.right")
navigationItem.rightBarButtonItems = [
UIBarButtonItem(image: right, style: .plain, target: self, action: #selector(goForward)),
UIBarButtonItem(image: left, style: .plain, target: self, action: #selector(goBack)),
]
progressView = UIProgressView(progressViewStyle: .default)
progressView.sizeToFit()
let progressButton = UIBarButtonItem(customView: progressView)
toolbarItems = [progressButton]
navigationController?.isToolbarHidden = false
webview.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)
webview.allowsBackForwardNavigationGestures = true
}
override func loadView() {
webview = WKWebView(frame: .zero)
webview.navigationDelegate = self
view = webview
}
@objc func goBack() {
if webview.canGoBack {
webview.goBack()
}
}
@objc func goForward() {
if webview.canGoForward {
webview.goForward()
}
}
@objc func refresh() {
webview.reload()
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
navigationItem.title = webview.title
navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .refresh, target: self, action: #selector(refresh))
navigationController?.isToolbarHidden = true
}
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?)
{
if keyPath == "estimatedProgress"
{
progressView.progress = Float(webview.estimatedProgress)
}
}
}Tout d’abord, nous ajoutons simplement les bons boutons à notre barre de navigation.
L’une est de revenir en arrière dans l’historique de la page web (si c’est possible) et l’autre est d’avancer dans l’historique de la page web (à nouveau, si c’est possible).
On crée également une progressBar qui indiquera le chargement de la page en faisant en sorte que la valeur de la barre de chargement “observe” celle du chargement de la WebView et qu’elles soient égales.
Une fois le chargement terminé, la méthode de délégation webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) est appelée.
Dans cette méthode, on définit le titre de notre barre de navigation comme étant le titre de la page Web, on ajoute un bouton pour rafraîchir la page et on cache la barre de chargement.
Conclusion
Félicitations, vous avez crée un navigateur en utilisant des WebViews !
Les WebViews sont très puissantes si vous voulez ouvrir un lien dans votre application tout en gardant l’utilisateur dans l’application.
C’est le code que j’utilise dans mes projets avec des clients quand je dois créer des WebViews. Libre à vous de l’utiliser et de le modifier !