iOS development: WebKit, Safari, and Safariviewcontroller

• This article by Cocoachina Translator ztdj121 (blog) translation, proofreading: Starry Night Twilight

• Eva Diaz-santana

• Original: WebKit, Safari and Safariviewcontroller

iOS and the Web have always been shadow since the advent of iOS. After all, when iOS was born, the site was 15 years old (the first site was created even back to 1991, and iOS only appeared in 2007 years). The iphone has a lot of web content when it appears, so iOS must provide a way to display Web content.

In iOS 9, we have different ways to render Web content, and depending on the needs, developers can evaluate different methods and then choose a method that is more appropriate for them. Let's look at the different solutions that developers can take.

WebView

WebKit is the architecture and rendering engine behind safari in OS X and iOS. It allows parsing and rendering of HTML, loading and displaying pictures, and executing JavaScript code.

The UIWebView class was introduced in iOS 2 and is part of the Uikit. It is now widely used and has been going on for quite a long time. In an iOS app, UIWebView is the only tool that can embed Web content.

On iOS 8, Apple introduced Wkwebview to replace UIWebView on iOS and webview on OS X. The new API interface provides exactly the same functionality for two platforms, simplifying communication between applications and Web pages, while multi-process architectures can also be used on safari.

Wkwebview offers many features that were previously available only on Safari. It uses hardware accelerators and core animation to provide a 60fps scrolling response, fast execution of JavaScript code, and gestures like sliding back and zooming built into safari. One of the major improvements beyond UIWebView is simplifying the communication between applications-Web pages (app-webpage), simplifying the interaction between applications and their web content, and how data is delivered.

Wkwebview is easy to implement. This is evidenced by the code written in swift language here:

123456

let viewFrame = ... //1let webView = WKWebView.init(frame: viewFrame) //2let url = NSURL(string: "https://www.invasivecode.com") //3let request = NSURLRequest(URL: url!) //4webView.loadRequest(request) //5view.addSubview(webView) //6

The following is the OBJECTIVE-C version:

123456

< Code class= "JS plain" >CGRECT&NBSP;VIEWFRAME&NBSP;=&NBSP;...&NBSP; //1 Code class= "JS Plain" >wkwebview *webview = [[wkwebview alloc] initwithframe:viewframe];   //2 nsurl *url = [nsurl  urlwithstring:@ "https://www.invasivecode.com" ];&NBSP;//3 nsurlrequest *request = [ nsurlrequest requestwithurl:url];  //4 [webview loadrequest:request];  //5 [ self.view addsubview:webview];  //6

The first line defines the frame that is used to initialize the WebView for the second row. The third line creates and returns a Nsurl object initialized with a URL string. Line four creates and returns a URL request. In line five, the Web page loads the URL request. Finally, line sixth adds the page to the View Controller page.

Here is the result of the above code running:

Wkwebview is a view of Web content that allows the use of JavaScript and HTML rendering. You can add your own Back button, forward button and progress indicator. In iOS 9, you can load the URL and data of the file in addition to the security.

Introduced in iOS 9 and Os X 10.11, Wkwebsitedatastore is a new API for managing data stored on a site site, such as cookies, which is a read-write property on the wkwebviewconfiguration of your Web page. You can delete data based on type or time, such as cookies and caches, and you can change the configuration with non-persistent data storage.

Wkwebview provides many features, and if you have Web content and need customization, you can use this tool to control the page in real time using JavaScript parameters.

However, if you just want to display Web content, you can either use Safari or use Sfsafariviewcontroller. Let's take a look at both of these methods.

Safari

Use Safari to allow you to delegate the task of rendering Web content to safari. This way you can write less code than when you use Wkwebview.

To launch Safari from the app, you can call the OpenURL: method in UIApplication, then iOS will take Safari to the foreground and put your app in the background.

A new feature on IOS9 is allowing the user to return to your app via a Back button that automatically appears in the upper-left corner of the user interface (see a).

The same great user experience provided by Safari, which is a simple solution for developers. The next picture highlights the UI components (see B and C locations), and you can easily get this feature.

Here are some examples of code to show you how to launch safari from your app to render some Web content:

Swift

1234	@IBAction func showWebSite() {    let url = NSURL(string: "https://www.invasivecode.com")    UIApplication.sharedApplication().openURL(url!)}

This has the same source code written in objective-c language:

1234	- (IBAction)showWebSite:(id)sender {    NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"];    [[UIApplication sharedApplication] openURL:url];}

Safari View Controller

Let's take a look at the Sfsafariviewcontroller. This class has been introduced in the iOS9. With Sfsafariviewcontroller,safari embedded in your app, users don't have to quit your app.

Safari Viewcontroller eliminates distractions, converts the URL field to read-only (fancy D), and a Finish button to return to your app (see E on the image).

Here, some example code shows how to provide Web content to your users through Safariviewcontroller.

Let's take a look at the implementation of the Swift language first:

12345

@IBAction func showWebSite() {    let url = NSURL(string: "https://www.invasivecode.com")    let safariVC = SFSafariViewController(URL: url!)    self.showViewController(safariVC, sender: nil)}

Now look at the same implementations written in the Objective-c language:

12345

- (IBAction)showWebSite:(id)sender {    NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"];    SFSafariViewController *safariVC = [[SFSafariViewController alloc] initWithURL:url];    [self showViewController:safariVC sender:nil];}

The result of the above code is similar to the following:

Now, let's classify one by one of the features you use in your application in Safariviewcontroller.

A familiar user interface

Safariviewcontroller offers the same interface as Safari, allowing you to seamlessly integrate into your application and respect your app's hue. You'll find it has the same sharing method that Safari offers, and users can add pages to reading lists or send pages to friends (see F). In addition, developers can add special buttons to the form.

Passwords, credit cards, and contact cards are automatically populated

Sfsafariviewcontroller allows users to automatically populate sensitive information and certificates in icloud keychain securely. This includes populating passwords, credit cards, and contact information.

Cookies shared with Safari

The sharing of cookies between safari and Sfsafariviewcontroller means that user conversations and preferences between the two are still present. For example, if a user has already registered with Safari or has their password in an icloud keychain, authorizing an app to access Twitter or Facebook will be a smooth user experience.

Safari Reader

The Safari Reader button will allow users to display an easy-to-read version of the Web site for users to choose from the themes and fonts provided.

Content Blocking (blocking/content blocking plug-ins)

IOS9 start, any application can write a description of the Web content, when the user browses the webpage when Safari and Safariviewcontroller intercept. In addition, the user can also add content interception elements (contents blocking elements) in the settings. Those elements will be intercepted and not displayed to the user. This means that the content of the Web page displayed by the app in Safari or Safariviewcontroller will be affected by the content blocking elements that the user or developer chooses. Content blocking elements can be a Web page or a separate element that blocks loading, just like all the pictures and scripts in the page.

Summarize

When displaying Web content in your application, you can choose a different approach depending on your needs. If you need to modify or manipulate Web content, the Wkwebview introduced in iOS8 gives us a great deal of flexibility. Launching Safari in the app will give the user and safari the same experience, but your users may not be back in your app. Sfsafariviewcontroller like to embed Safari in your app, and it's easy to use.

About the author

Eva Diaz-santana (@evdiasan) is the founder of Invasivecode. Since 2008, she has developed iOS apps and taught iOS development courses. At the same time, she worked at Apple as a Cocoa architect and user experience designer.

Ask--One-click Programmer to answer the question artifact, one-man service for cattle, developer Programming Essentials official website: www.wenaaa.com

QQ group 290551701 gathers a lot of Internet elite, technical director, architect, project Manager! Open source technology research, Welcome to the industry, Daniel and beginners are interested in engaging in IT industry personnel to enter!

iOS development: WebKit, Safari, and Safariviewcontroller