iOS 9: Premiers pas avec SFSafariViewController

Les applications mobiles et l’affichage de contenu sur le Web sont désormais omniprésents. Pendant des années, les développeurs iOS ont été chargés de créer leur propre expérience de visualisation Web dans leur application ou de transmettre l’URL à Safari. Ces deux approches présentent des inconvénients inhérents qui étaient auparavant inévitables.

Tout cela a changé avec iOS 9 et l’introduction du SFSafariViewController classe. Grâce à lui, vous pouvez désormais offrir une expérience de visualisation Web complète dans votre application sans avoir à passer un temps de développement important à la fournir.

1. Présentation de la démo

Avant de commencer, je vais exposer l’approche que j’ai adoptée avec le application de démonstration qui accompagne ce tutoriel. Comme vous le verrez plus tard, il n’y a vraiment pas beaucoup de code impliqué dans l’utilisation du contrôleur de vue safari. La vraie valeur du contrôleur de vue safari vient de la compréhension quand pour l’utiliser et, plus important encore, Pourquoi.

Options d’affichage du contenu Web

À partir d’iOS 9, les développeurs ont trois options pour afficher le contenu Web à un utilisateur:

• Safari: Utilisation openURL(_:) pour afficher la page à l’intérieur de safari, forçant l’utilisateur à quitter votre application.
• Expérience de visualisation personnalisée: Vous pouvez tirer parti WKWebView ou UIWebView pour créer une expérience de navigation à partir de zéro.
• SFSafariViewController: Avec SFSafariViewController, vous pouvez profiter de presque tous les avantages de l’affichage de contenu Web dans Safari sans forcer les utilisateurs à quitter votre application.

Avant iOS 9, les deux premières options étaient les seules options pour les développeurs. Savoir quand il fallait utiliser l’un ou l’autre dépendait du contexte du contenu présenté. Tout en travaillant sur l’application de démonstration, nous allons utiliser les trois options.

Maintenant que nous savons comment le contenu peut être affiché, expliquons pourquoi il peut être affiché dans une application. Sur iOS, il existe deux cas d’utilisation majeurs pour afficher du contenu Web.

• Contenu Web personnalisé: Ce contenu n’est pas destiné à la navigation. Cela peut être un rapport ou quelque chose de similaire généré à partir d’une API ou d’un serveur. Ici, l’utilisateur regarde un élément de contenu et ne fait pas grand-chose d’autre.
• Affichage des sites Web: C’est le scénario le plus courant. L’utilisateur doit parcourir momentanément le Web pour se connecter à un service ou naviguer sur un site Web.

Gardez également à l’esprit qu’il existe un troisième cas d’utilisation, l’authentification Web. Pour ce didacticiel, nous n’allons pas nous concentrer sur ce scénario.

Contenu Web personnalisé

Si l’étendue de l’expérience Web de votre utilisateur à l’intérieur de votre application relève du premier cas d’utilisation, le contrôleur de vue safari n’est probablement pas ce dont vous avez besoin. Dans ces cas, vous affichez du contenu que vous possédez et contrôlez et que vous devrez peut-être personnaliser en profondeur.

Si vous trouvez que votre application s’inscrit dans ce scénario, utilisez WKWebView. C’est le successeur de UIWebView et comprend plusieurs améliorations, telles que l’utilisation du Moteur JavaScript Nitro. Cette approche vous permet de créer l’intégralité de l’interface utilisateur à partir de zéro. Vous avez également d’autres possibilités, telles que le chargement de fichiers en toute sécurité et l’utilisation WKWebsiteDataStore pour interroger les cookies.

Affichage des sites Web

Cependant, la majorité des applications ont juste besoin de fournir une expérience de visualisation Web généralisée. C’est le scénario parfait pour le contrôleur de vue safari. Avant iOS 9, les développeurs passaient du temps à créer leur propre interface utilisateur pour la navigation Web, ce qui pouvait entraîner des problèmes pour les utilisateurs.

L’expérience de navigation est incohérente entre les différentes applications, ce qui peut dérouter l’utilisateur. Certaines interfaces peuvent également ne pas répondre aux attentes des utilisateurs, comme une barre de progression indiquant la quantité de page chargée.

De plus, vous n’avez pas accès à toutes les fonctionnalités de Safari. Cela inclut la vue du lecteur, le trousseau iCloud pour les capacités de remplissage automatique, etc. Si vous vouliez disposer de ces fonctionnalités avant iOS 9, vous étiez obligé de laisser l’utilisateur entièrement quitter votre application en ouvrant le contenu dans Safari. le SFSafariViewController class résout chacun de ces problèmes.

2. Exécutez l’application de démonstration

Pour commencer, créez et exécutez l’application de démonstration. Vous serez présenté avec une interface utilisateur très minimale qui a trois options. Chaque option correspond à l’une des méthodes mentionnées précédemment pour présenter le contenu Web.

3. Ouverture de contenu dans Safari

La première option que nous allons démontrer est l’itinéraire plus traditionnel, qui transfère l’URL à Safari. Ouvert ViewController.swift et remarquez le urlString propriété en haut du fichier. Cela définira ce qui est présenté dans les exemples à venir, alors n’hésitez pas à le définir comme vous le souhaitez.

private var urlString:String = "https://google.com"

Une chose importante à noter est que dans iOS 9, TLS 1.2 est appliqué par défaut. Si le serveur que vous essayez d’atteindre ne prend pas en charge cela, vous pouvez voir l’erreur suivante dans la console:

Il existe des moyens de contourner cela, comme l’ajout d’une clé à votre application Info.plist fichier. Il s’agissait d’un changement effectué par Apple pour augmenter la sécurité autour de l’expérience de navigation Web. Continuez, ajoutez le code suivant à la openInSafari(_:) action:

@IBAction func openInSafari(sender: AnyObject)
{
    let url = NSURL(string: self.urlString)!
    UIApplication.sharedApplication().openURL(url)
}

Créez et exécutez l’application. Lorsque vous appuyez sur le bouton du haut, « Ouvrir en safari », le système d’exploitation quittera votre application et ouvrira l’URL dans Safari.

Bien que cette option soit certainement viable, nous avons forcé l’utilisateur à quitter notre application. En tant que développeurs, idéalement, nous voulons que l’expérience reste contenue dans notre application. Cependant, une amélioration apportée par iOS 9 avec cette approche est le petit bouton de retour en haut à gauche:

Appuyez sur ce bouton pour ramener l’utilisateur à l’application qui a transmis l’URL à Safari. Pour résoudre le problème de l’utilisateur forcé de quitter notre application, passons à l’approche suivante.

4. Ouverture de contenu dans Webkit ou WebView

Nous allons maintenant ouvrir la même URL dans notre application. Pour ce faire, nous utiliserons un UIWebView. La logique de ce simple navigateur Web se trouve dans le CustomWebViewController classe.

Comme nous n’avons besoin d’aucune des fonctionnalités avancées de WebKit, nous allons simplement ouvrir la page dans une vue Web. Dans la classe ViewController, remplacez le code dans prepareForSegue(_:sender:) comme suit:

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?)
{
    if let navVC = segue.destinationViewController as? UINavigationController
    {
        let cwvc = navVC.topViewController as! CustomWebViewController
        cwvc.urlString = self.urlString
    }
}

Allez-y et exécutez l’application. Appuyez sur le bouton du milieu, « Ouvrir avec la vue Web », et la page devrait maintenant se charger dans l’application.

Même si l’utilisateur reste dans l’application, les inconvénients de cette approche sont évidents. Sans plus de travail de développement de notre part, il n’y a pas d’indication de chargement, de barre d’adresse URL et d’autres choses auxquelles les utilisateurs s’attendent lorsqu’ils naviguent sur le Web. Utilisons maintenant le SFSafariViewController classe pour résoudre ces problèmes.

5. Ouverture de contenu dans Safari View Controller

Avant de pouvoir utiliser le SFSafariViewController classe, nous devons importer Services Safari. Au sommet de ViewController.swift, ajoutez l’instruction d’importation suivante sous l’instruction d’importation pour UIKit:

import SafariServices

Ensuite, mettez à jour l’implémentation de openWithSafariVC(_:) comme indiqué ci-dessous:

@IBAction func openWithSafariVC(sender: AnyObject)
{
    let svc = SFSafariViewController(URL: NSURL(string: self.urlString)!)
    self.presentViewController(svc, animated: true, completion: nil)
}

Exécutez l’application et appuyez sur le bouton du bas, « Ouvrir avec le contrôleur de vue safari », pour voir le contenu affiché dans un SFSafariViewController exemple.

Nous avons maintenant laissé l’utilisateur rester à l’intérieur de notre application et ils ont tous les avantages de Safari. Les feuilles de partage sont disponibles dans la barre d’onglets avec la possibilité d’ajouter la page en tant que favori ou d’ouvrir le contenu dans Safari.

Il existe un certain nombre de configurations intéressantes à exploiter. Par exemple, nous pourrions laisser l’utilisateur lancer facilement le navigateur en mode lecteur en passant true à entersReaderIfAvailable.

@IBAction func openWithSafariVC(sender: AnyObject)
{
    let svc = SFSafariViewController(URL: NSURL(string: self.urlString)!, entersReaderIfAvailable: true)
    self.presentViewController(svc, animated: true, completion: nil)
}

De plus, le contrôleur de vue Safari respecte la couleur de la teinte. Cela permet de conserver facilement la marque de votre application tout en préservant l’interface utilisateur familière de Safari.

Cependant, un problème que nous devons résoudre est que l’utilisateur ne peut actuellement pas ignorer le contrôleur de vue. Corrigeons ça maintenant.

6. SFSafariViewControllerDelegate Protocole

Pour ignorer le contrôleur de vue, nous devons nous conformer à la SFSafariViewControllerDelegate protocole. Ouvert ViewController.swift et faire le ViewController classe conforme à la SFSafariViewControllerDelegate protocole.

class ViewController: UIViewController, SFSafariViewControllerDelegate
{
    ...
}

Ensuite, ajoutez la méthode déléguée suivante au ViewController classe:

func safariViewControllerDidFinish(controller: SFSafariViewController)
{
    controller.dismissViewControllerAnimated(true, completion: nil)
}

Cette méthode de délégué est appelée lorsque l’utilisateur appuie sur le Terminé bouton dans le contrôleur de vue Safari. Il doit être utilisé pour ignorer le contrôleur de vue et revenir à votre application.

La seule chose à faire est d’assigner notre contrôleur de vue en tant que délégué du contrôleur de vue Safari. Mettre à jour la mise en œuvre du openWithSafariVC(_:) méthode comme indiqué ci-dessous:

@IBAction func openWithSafariVC(sender: AnyObject)
{
    let svc = SFSafariViewController(URL: NSURL(string: self.urlString)!)
    svc.delegate = self
    self.presentViewController(svc, animated: true, completion: nil)
}

Si vous exécutez l’application et ouvrez le contrôleur de vue Safari, vous verrez que vous pouvez maintenant fermer le contrôleur de vue Safari en appuyant sur le bouton Terminé bouton en haut à droite.

Conclusion

Le contrôleur de vue Safari est incroyablement facile à utiliser. En fait, c’est l’une des plus petites API que j’ai vues avec seulement deux initialiseurs et deux méthodes de délégation. Même ainsi, il apporte toutes les fonctionnalités que les utilisateurs attendent de Safari à votre application.

Ce qui est peut-être tout aussi excitant, c’est que les développeurs n’auront plus à passer du temps à créer des navigateurs Web personnalisés. Apporter une expérience de navigation Web de première classe à votre application nécessite quelques lignes de code avec le SFSafariViewController classe.