Integrating WebViews In a Mobile App

Integrating WebViews In A Mobile App

Koupon Media’s Offer Viewer tool makes it easy to create offer experiences within a single web page. To expedite the development of offers in a mobile app, many developers embed Offer Viewer using a web view. This article provides some tips and best practices to ensure this is done successfully.

Adding a WebView to your Application on Android

To add a WebView to your Application, simply include the WebView element in your activity layout. For example, here’s a layout file in which the WebView fills the screen:

    
?xml version="1.0" encoding="utf-8"?
WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/
    

To load a web page in the WebView, use loadUrl(). For example:

    
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://offers.kou.pn/OfferViewer/Redirect.aspx");
    

Before this will work however, your application must have access to the Internet. To get Internet access, request the INTERNET permission in your manifest file. For example:

    
manifest ... 
    uses-permission android:name="android.permission.INTERNET" /
    ...
/manifest
    

Enable Javascript and Cookies in your Android application

JavaScript and cookies are disabled in a WebView by default. You can enable it through the WebSettings attached to your WebView. You can retrieve WebSettings with getSettings(), then enable JavaScript with setJavaScriptEnabled() and setAcceptCookie(true).

For example:

    
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
CookieManager.getInstance().setAcceptCookie(true);
    

Adding a WebView to your Application on iOS

In order to integrate a WebView into your iOS application we are going to be using WKWebView which is an updated version of UIWebView which is faster and provides far more configurability than UIWebView. This tutorial will be in Swift instead of Objective-C.

Setting Up

This will create a Main.storyboard file and a ViewController.swift file which are the two files we are concerned with in this article. Open ViewController.swift and add an import statement for WebKit using import WebKit, put this line just below the existing UIKit import statement.

Creating an outlet

Next create an outlet to reference the container view in Interface Builder. Enter the following at the top of the ViewController class.

    
@IBOutlet var containerView : UIView = nil
    

This piece of code allows the ViewController to get a reference to our WKWebView. To finish this connection select the Main.storyboard in the assistant editor, so you can see both the storyboard and the ViewController. To tell the view in interface builder to reference this outlet you can make a connection by dragging from the outlet to the view and letting go.

Creating a variable for the WebView

Back in ViewController.swift, below the containerView outlet make a variable

    
var webView : WKWebView!
    

Add a delegate and load the URL

Within the ViewController.swift file, we will add a delegate to WKNavigationDelegate and then load the offer Viewer URL. Below is included the entire ViewController.swift file so that you can see what a fully formed loading of an Offer Viewer URL looks like.

    
import UIKit
import WebKit

class ViewController: UIViewController , WKNavigationDelegate{
    
    var webView : WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // loading URL :
        let myURL = "http://offers.kou.pn/OfferViewer/Redirect.aspx"
        let url = NSURL(string: myURL)
        let request = NSURLRequest(URL: url!)
        
        // init and load request in webview.
        webView = WKWebView(frame: self.view.frame)
        webView.navigationDelegate = self
        webView.loadRequest(request)
        self.view.addSubview(webView)
        self.view.sendSubviewToBack(webView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //MARK:- WKNavigationDelegate
    
    func webView(webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: NSError) {
        print(error.localizedDescription)
    }
    func webView(webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("Strat to load")
    }
    func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
        print("finish to load")
    }

}