Single WebView Xcode Project in Swift

Recently I was working on a hybrid mobile app design and front-end development. There is a strange issue that the all the animation rules doesn't work in iOS8 but work well in iOS9. And this issue can only be reproduced in iOS simulator.

As it is a hybrid app that based on webview, the development are all in HTML, CSS(SASS) and JavaScript(AngularJS) and use Grunt to manage the JavaScript tasks.

As an designer who also in charge of the HTML and CSS, I don't have the Xamarin and Visual Studio environment ready on my machine. It also looks complicated for me to set up all the build environment ready on my machine. The Visual Studio IDE is unfamiliar with me. How to debug the front-end issue on iOS simulator on my devices base on my limit knowledge base?

Here comes the simple Xcode project, Single WebView. When iOS8 released, I learned the base of the Swift and how to develop simple apps in iOS8 with Xcode. It helps now.

Start

  1. Create a new Xcode project with Single View Controller, drag and drop a WebView to the storyboard.

  2. Select "Add missing constrains" from the menu of the bottom-right button of the main.storyboard, the webview can be set as full screen on different devices.

  3. Open the ViewController.swift, press Ctrl and drag the view controller module from Main.storyboard to ViewController inside the class ViewController: UIViewController {} above the override func viewDidLoad() {. Add string to the NSURL of your expected URL.

``` import UIKit

class ViewController: UIViewController {

@IBOutlet weak var myWebView: UIWebView!
override func viewDidLoad() {
    super.viewDidLoad()
    let url = NSURL(string: "http://www.google.com")
    let requestObj = NSURLRequest(URL: url!)
    myWebView.loadRequest(requestObj)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

} ```

  1. Almost done here. If you want to hide the StatusBar. Please add following code to the ViewController

override func prefersStatusBarHidden() -> Bool { return true }

The final code of the webview will be

``` import UIKit

class ViewController: UIViewController {

@IBOutlet weak var myWebView: UIWebView!
override func viewDidLoad() {
    super.viewDidLoad()
    let url = NSURL(string: "http://www.google.com")
    let requestObj = NSURLRequest(URL: url!)
    myWebView.loadRequest(requestObj)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

override func prefersStatusBarHidden() -> Bool {
    return true
}

} ```

  1. Now, run the build, you should get the fullscreen webview.
  2. Open Safari, select menu item Develop > Simulator > *Your URL, a safari developer inspector will be launched.
  3. Start your journey to explore the HTML and CSS of your WebView there.

The Xcode Project Single WebView is ready on GitHub. Feel free to use it.

Download from Github

Star Download

Posted