Getting Started With SFSafariViewController iOS 9

View: 1066    Dowload: 0   Comment: 0   Post by: hanhga   Category: iPhone OS   Fields: Other

0 point/1 review File has been tested

As you'll see later, there really isn't much code involved with using the safari view controller.

The real value of the safari view controller comes from understanding when to use it and, more importantly, why.

As of iOS 9, developers have three options to display web content to a user:

  • Safari: Use openURL(_:) to show the page inside of safari, forcing the user to leave your application.
  • Custom Viewing Experience: You can leverage WKWebView or UIWebView to create a browsing experience from scratch.
  • SFSafariViewController: With SFSafariViewController, you can use nearly all of the benefits of viewing web content inside Safari without forcing users to leave your app.

Before iOS 9, the first two options were the only options for developers. Knowing when you had to use one or the other depended on the context of the presented content. While working on the demo application, we are going to use all three options.

Now that we know how content can be displayed, let's cover why it might be displayed in an app. On iOS, there are two major use cases for viewing web content.

  • Custom Web Content: This is content not meant for browsing. This could be a report or something similar generated from an API or server. Here, the user is looking at one piece of content and not doing much else.
  • Viewing Websites: This is the most common scenario. The user needs to browse the web momentarily to either log in to a service or navigate a website.

Also keep in mind that there is a third use case, web-based authentication. For this tutorial,  we aren't going to focus on that scenario.

If the extent of your user's web experience inside of your app falls into the first use case, the safari view controller is probably not what you need. In those cases, you are displaying content that you own and control, and may need to extensively customize.

If you find your app fits into this scenario, then use WKWebView. It's the successor to UIWebView and includes several enhancements, such as utilizing the Nitro JavaScript engine. This approach lets you build the entire user interface from scratch. You also have other affordances, such as loading files securely and using WKWebsiteDataStore for querying cookies.

The majority of apps, however, just need to provide a generalized web viewing experience. This is the perfect scenario for the safari view controller. Before iOS 9, developers spent time creating their own user interface for web browsing, which could lead to problems for users.

The browsing experience is inconsistent across different apps, which may confuse the user. Some interfaces may also lack the things users expect, such as a progress bar indicating how much of the page is loaded.

Further, you don't have access to all of Safari's features. This includes the reader view, the iCloud keychain for autofill capabilities, and more. If you wanted to have those features before iOS 9, you were forced to have the user leave your app entirely by opening the content inside Safari. The SFSafariViewControllerclass solves every one of these problems.

To begin, build and run the demo application. You'll be presented with a very minimal user interface that has three options. Each option corresponds to one of the methods mentioned earlier to present web content.

Running the demo app

The first option we'll demonstrate is the more traditional route, which is handing off the URL to Safari. Open ViewController.swift and notice the urlString property at the top of the file. This will define what's presented in the coming examples, so feel free to set it to whatever you desire.

private var urlString:String = ""

One important thing to note is that in iOS 9, TLS 1.2 is enforced by default. If the server you are trying to reach doesn't support this, you may see the following error in the console:


There are ways around this, such as adding a key to your app's Info.plist file. This was a change made by Apple to increase security around the web browsing experience. Moving on, add the following code to the openInSafari(_:) action:

@IBAction func openInSafari(sender: AnyObject)
    let url = NSURL(string: self.urlString)!

Build and run the app. When you tap the top button, "Open in safari", the operating system will leave your app and open the URL in Safari.

Opening a link in Safari

While this option is certainly viable, we've forced the user to leave our app. As developers, ideally we want the experience to stay contained within our app. One improvement iOS 9 has made with this approach, however, is the small back button in the top left:

Its now easier for the user to navigate back to the application

Tapping this button will take the user back to the app that handed off the URL to Safari. To fix the issue of the user being forced to leave our app, let's move on to the next approach.

We'll now open the same URL inside our app. To do this, we'll use an embedded UIWebView. The logic for this simple web browser is found in the CustomWebViewController class.

Since we don't need any of the advanced features of WebKit, we'll just open the page inside a web view. In the ViewController class, replace the code in prepareForSegue(_:sender:) as follows:

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

Go ahead and run the app. Tap the middle button, "Open with webview", and the page should now load inside the app.

Opening the link in a custom web view

Even though the user stays in the app, the disadvantages with this approach are obvious. Without more development work on our end, there is no loading indication, URL address bar, and other things users expect when browsing the web. Let's now use the SFSafariViewController class to solve those issues.

Before we can use the SFSafariViewController class, we need to import Safari Services. At the top of ViewController.swift, add the following import statement below the import statement for UIKit:

import SafariServices

Next, update the implementation of openWithSafariVC(_:) as shown below:

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

Run the app and tap the bottom button, "Open with safari view controller", to see the content now being displayed inside a SFSafariViewController instance.

Load the content inside a SFSafariViewController instance

We've now let the user stay inside of our app and they have all the advantages of Safari. Share sheets are available from the tab bar along with the option to add the page as a favorite or open the content in Safari.

There are a number of interesting configurations to take advantage of. For instance, we could let the user easily launch the browser in reader mode by passingtrue to entersReaderIfAvailable.

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

Additionally, the Safari view controller respects tint color. This makes it easy to keep the branding of your app present while still keeping Safari's familiar user interface intact.

However, one issue we need to resolve is that the user currently can't dismiss the view controller. Let's fix that now.

To dismiss the view controller, we need to conform to the SFSafariViewControllerDelegate protocol. Open ViewController.swift and make the ViewController class conform to the SFSafariViewControllerDelegateprotocol.

class ViewController: UIViewController, SFSafariViewControllerDelegate

Next, add the following delegate method to the ViewController class:

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

This delegate method is called when the user taps the Done button in the Safari view controller. It should be used to dismiss the view controller and return to your app.

The only thing left to do is assign our view controller to be the delegate of the Safari view controller. Update the implementation of the openWithSafariVC(_:) method as shown below:

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

If you run the app and open the Safari view controller, you'll see that you can now dismiss the Safari view controller by tapping the Done button in the top right.

Getting Started With SFSafariViewController iOS 9

Getting Started With SFSafariViewController iOS 9 Posted on 18-01-2016  As you'll see later, there really isn't much code involved with using the safari view controller. 5/10 1066


To comment you must be logged in members.

Files with category

File suggestion for you
File top downloads - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. Develope by Vinagon .Ltd