WKWebView advanced tutorial (catch JS events, access properties etc...) (Swift)

Introduction

I have never been a fan of cross-platform, HTML based iOS and Android frameworks (PhoneGap, Cordova). They always seem to lag behind in features and responsiveness, and that’s a compromise I’m rarely willing to take.
However, sometimes you can’t avoid embedding HTML and JavaScript into your project. In those situations, iOS uses the WKWebView component for loading and displaying web pages embedded within the application. WKWebView is based on Safari browser and uses webkit so it’s speed and responsiveness are on par with the latest and greatest of the mobile browser world.
In this tutorial, I’ll show how to:
  1. Embed a WKWebViewinside of your iOS Universal App
  2. Load an HTML webpage via URL
  3. Perform an action on the WKWebView html via JavaScript as a result of native controll action
  4. Respond to JavaScript events from your native application
  5. Access JavaScript variables from your native application

Preparation

In order to test our WKWebView behaviour, we will create a simple, static HTML page using node.js. NodeJS is a simple, lightweight JavaScript based web server, and as such - is perfect for the needs of this tutorial.
If you only need the iOS tutorial, you can skip this step.
Begin by cloning this git repository.
Make sure that you have NodeJS installed. There are a lot of tutorials on how to install NodeJS on the platform of your choice so that won’t be covered in this tutorial.
After that move to the cloned folder and run
npm install
and start the server by calling
node server.js
Now go to your browser and open localhost:3000. You should see an image of either Brad Pitt or Edward Norton in the role of Tyler Durden from the 90’s SF classic Fight Club
All this simple sample site does is expose a JS function changeImage(actorName). Inspecting the JS code shows
function changeImage(actorName){
    var image = $("#tyler_durden_image");
    if(actorName == "pitt"){
        image.attr("src", "/durden_pitt.jpg");
        image.trigger("imagechanged", [true]);
    } else if(actorName == "norton"){
        image.attr("src", "/durden_norton.jpg");
        image.trigger("imagechanged", [true])
    } else{
        image.trigger("imagechanged", [false]);
    }
}

$("#tyler_durden_image").on("imagechanged", function(event, isSuccess){
    if(isSuccess){
        console.log("did it");
    }
});
We attached an event imagechanged to the img DOM object and we trigger it when the function changes the image. We also respond to that event by logging "did it"onto the JS console.
If you’ve done everything correctly, you should have your Node server running smoothly on localhost:3000 and you’re ready to begin with the iOS development.

Creating the WKWebView and the WebView Wrapper

If you’d like to access the files of the project used in this sample, it’s available on github - https://github.com/mislavjavor/WKWebViewTutorial-iOS

Setting up

Create a new iOS Universal App. Select Swift as a language. Once the project is open in Xcode, create a new .swift file called WKWebViewWrapper. This whill be the file into which we put our code for accessing variables and calling events

Creating a WKWebView using Storyboards

Allow Arbitrary Loads

In order to comply to Apples App Transport Security you must whitelist all the domains your app will use. We will allow all domains with Allow Arbitrary Loads
You should never use Allow Arbitrary Loads - this is for demonstration purposes only
Copy and paste this code into your Info.plist file
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
      <true/>
</dict>

Create and bind storyboard views

In your storyboard , place one UIView and one UIButton. Assuming the UIView is called WKContainerView and the UIButton is called ChangeImageButton, your storyboard should look like this:
storyboard
  1. Ctrl+drag WKContainerView to the ViewController as an outlet and call it containerView.
  2. Ctrl+drag ChangeImageButton to the ViewController as an action of the TouchUp Inside type and call it changeImageButtonClicked

Create a WKWebView and load localhost:3000

In the ViewController, import WebKit
In your ViewController override the viewWillAppear method and initialize the WKWebView inside like this:
override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        let wkWebView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: containerView.frame.height))
        view.addSubview(wkWebView)
        wkWebView.loadRequest(NSURLRequest(URL: NSURL(string: "http://localhost:3000")!))
    }
This process will, of course, vary massively from project to project since it’s UI specific. Creating UIs is not the topic of this tutorial so those specifics are not important.
What is important is how you load the request into the WKWebView. You do this by calling
if let url = NSURL(string: "http://localhost:3000") {
    wkWebView.loadRequest(NSURLRequest(URL: url));
}
It’s implemented somewhat differently in the upper snippet of code but for a reason. The code in the latter snippet is good while the good in the first snippet is bad
I’m leaving to the reader to deduce why the first code snippet is much worse than the second one

Finishing up in the ViewController

After everything, your ViewController should look like this
import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var containerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        let wkWebView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: containerView.frame.height))
        view.addSubview(wkWebView)
        wkWebView.loadRequest(NSURLRequest(URL: NSURL(string: "http://localhost:3000")!))
    }

    @IBAction func changeImageButtonClicked(sender: AnyObject) {

    }
}

Creating the WKWebViewWrapper

Navigate to the WKWebViewWrapper.swift file and do the following:
  1. Create a class called WKWebViewWrapper
  2. Import Foundation and WebKit
  3. Make WKWebViewWrapper class inherit NSObject and implement the WKScriptMessageHandler protocol
  4. Make an initializer that thakes a single WKWebView as a parameter
The end result should look something like this:
import Foundation
import WebKit

class WKWebViewWrapper : NSObject, WKScriptMessageHandler{

    wkWebView : WKWebView

    init(forWebView webView : WKWebView){
        wkWebView = webView
        super.init()
    }

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {

    }
}
Once you’ve done this, create a method called setUpPlayerAndEventDelegation. In it, we’ll configure the WKWebView for receiveing JS events.
Before implementing that method, create a constant called eventNames in which you will save the names of all the events that your objects can fire (to be more precise - all the events that you want to catch) e.g.
let events = ["imagechanged", "documentReady"]
Now in the setUpPlayerAndEventDelegation create a WKUserContentController and assign it to the controller property of wkWebView.configuration. After that, use the controller to add all the events and make self the event listener.
self can be the event listener only because before we made WKWebViewWrapperimplement the WKScriptMessageHandler protocol.
The setUpPlayerAndEventDelegation function should look something like this
func setUpPlayerAndEventDelegation(){

        let controller = WKUserContentController()
        wkWebView.configuration.userContentController = controller

        for eventname in eventNames {
            controller.addScriptMessageHandler(self, name: eventname)
        }
    }

Initializing events as a dictionary of <String, EventHandler>

Here we use the very interesting property of the Swift programming lanugage that states
Functions are first class objects
In the WKWebViewWrapper class, create a variable called eventFunctions. It should be a dictionary where the key is a String and the value a function that receives a Stringand returns Void. Declare the variable like this
var eventFunctions : Dictionary<String, (String)->Void> = Dictionary<String, (String)->Void>()
in the setUpPlayerAndEventDelegation function, initialize each and every one of the functions declared in eventNames to be an empty function (we to this to assure that it’s different than null)
To do that, in the for eventname in eventNames loop, under the addScriptMessageHandler, add the following line of code
eventFunctions[eventname] = { _ in }
What this does is it initializes an empty function that does nothing for every entry in the eventNames constant

Inject event handlers

Requires JQuery on the web server. It can be done without it, but I prefer using JQuery
In the setUpPlayerAndEventDelegations for loop add the following line at the end:
wkWebView.evaluateJavaScript("$(#tyler_durden_image).on('imagechanged', function(event, isSuccess) { window.webkit.messageHandlers.\(eventname).postMessage(JSON.stringify(isSuccess)) }", completionHandler: nil)
When we called addScriptMessageHandler before, WKWebView created a new messageHandler object on the webkit object that it injected during initialization. The name of the messageHandler is the name we gave to it in the addScriptMessageHandlerand calling the postMessage(String) function on that message handler triggers the userContentController function that we implemented in order to satisfy the WKScriptMessageHandler protocol.
The userContentController function in our WKWebViewWrapper will be called every time the postMessage function is called on a messageHandler.
In the userContentController we will handle this triggering in the following way:
func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
        if let contentBody = message.body as? String{
            if let eventFunction = eventFunctions[message.name]{
                eventFunction(contentBody)
            }
        }
    }
Now every time the function gets triggered, one of those “empty” functions that we declared earlier get called. Those functions will later be implemented by the ViewController that uses the WKWebViewWrapper so this function will effectively trigger those functions.

Accessing javascript properties

Reasoning behind certain decisions

The main issue we will face here is approaching this issue from a proper perspective. We would like for our variables in the native app to be synchronized with the variables in the JavaScript frontend.
The easiest way to do this would be to simply call
wkWebView.evaluateJavaScript("yourJavaScriptVariable", {
    result in
      //Handle your variable
})
but this gets us deep into closures and makes everything dependant on callbacks. It’s safe to say that this is not the ideal solution for every situation.
However, in some cases it may just be enought to get the job done without much hesitation.
Personally, what I like to do is define a JavaScript object with relevant data, and send it to the application once a second via an event. The time period of one second is arbitrary and you can set it anyway you like.
If your object gets too heavy, you might want to employ batching and have several separate functions. Store all things in compartments filtered by access times and weight. This will be very specific for each project and I won’t be getting into this topic very much in this article.
As a rule of thumb, I allocate a 100th of a second to each primitive variable sans strings. I have not empirically tested this practice, but it’s proven to be efficient in all of my tests so far.

Implementation

In your JavaScript, call
window.setInterval(function(){
  //We'll fill this later in the tutorial
}, 1000)
NOTE: All of this can be done via injection of JavaScript in the WKWebView, but for the sake of tutorial, this gives the content much more clarification
This function repeats itself every 1000 milliseconds. This would be our “very slow” function for sending heavy objects. You could implement something like this:
window.setInterval(function(){

}, 10)
for sending one int variable 100 times a second. Remember to never put any logic in these functions. They are for fetching only.
Let’s prepare the scene for the sending of the event to the application:
Firstly, create an object which contains all of your data. So in the JavaScript project add:
 var applicationState = {
   // your application state
 }
In our concrete case it will be
var applicationState = {
  actorName = window.actorName
}
since this is the only variable we have. This may not be the best way to demonstrate this, but I believe it server the purpose of demonstrating the principle quite well
After you created your applicationState object, you can now send it to your Swiftcode in your setInterval function.
window.setInterval(function(){
  window.webkit.messageHandlers.updateApplicationState.postMessage(JSON.stringify(window.applicationState))
}, 10)
Now add updateApplicationState into your eventNames variable. In the section where you handle the events, add special case for the updateApplicationState event, parse the applicationState JSON object and update your local or external variables

Performing actions of JavaScript properties and general behaviour

Now we’ve established getting our properties is a matter of interval updates, but accessing them is even easier. All you need to do is call evaluateJavaScript with the desired javascript and you’re done. Let’s handle this the following way. Create a function in JavaScript that performs some setting operation, such as
function setVariable(string actorName){
  window.actorName = actorName
}
Now in your wrapper, call
wkWebView.evaluateJavaScript("setVariable(\(self.actorName)") //self.actorName is just a placeholder of course
or any other action you wish to perform

Using the WKWebView

And you’re more or less done. All you need to do now, is create the instance of your Wrapper in the ViewController and add a function by calling
wrapper.eventFunctions["functionName"] = {
  result in
    // Handle
}
Now with this knowledge, you should be able to modify the github projects and make your iOS device perform actions on your JavaScript app

Comments

Post a Comment

Most popular posts

Image

Implementing a Custom Back Button in Swift

I’ve recently been working on a personal project and the past week has mostly been focused on design. I finally decided on a color scheme, downloaded some cool fonts, and made the app look a lot cleaner than the mess I had before. During this process, I noticed that the back button on my navigation bar didn’t look great — the standard Apple blue just didn’t mesh well with my design scheme. I knew it was possible to change that button but what was supposed to be a simple design fix turned into a harrowing journey. Let me just state: the way to do this is actually very simple, I just overcomplicated it. So I’m going to walk through how to do it and offer some tips along the way so you can avoid unnecessarily raising your blood pressure. Selecting Your Image What I thought was going to be the easiest part turned out to be the thing that tripped me up the most. I had found a button online that I liked but the color just wasn’t right. So I put it into Figma, changed the color, an...
Image

Chronometer Tutorial With Example In Android Studio

In Android,  Chronometer  is a class that implements a simple timer. Chronometer is a subclass of  TextView . This class helps us to add a timer in our app. You can give Timer start time in the elapsedRealTime() timebase and it start counting from that. If we don’t give base time then it will use the time at which time we call start() method. By default a chronometer displays the current timer value in the form of MM:SS or H:MM:SS. We can set our own format into an arbitrary string. Chronometer code in  XML : <Chronometer android:id = "@+id/simpleChronometer" android:layout_width = "wrap_content" android:layout_height = "wrap_content" /> Table Of Contents  [ hide ] 1  Methods Of Chronometer In Android: 2  Attributes of Chronometer In Android: 3  Chronometer Example in Android Studio: Methods Of Chronometer In Android: Let’s discuss some important methods of chronometer that may be calle...
Image

SQL injection in Android content providers and how to be protected

If you are familiar with Android apps development, you have dealt with  components  for sure (although maybe you don’t know them with that name) and specifically, with  content providers . In this post, I am going to talk about how to use SQL injection to access data provided by this kind of components and how to be protected against this kind of attacks. But before, a bit of context to introduce the components of an Android app and content providers. What is a component in an Android app? An android app can contain several components with a specific aim and different lifecycle. These components, according to the official Android documentation, are entry points through which the system or a user can enter our app and help to define the general behaviour. The four components of an Android app are: Activities Services Content providers Broadcast receivers. Apart from the content providers, I am not going to explain in detail each component because I woul...
Image

Exploring Background Execution Limits on Android Oreo

Background Execution Limits Last week came the official announcement of the Android O release. This release of Android comes with some really cool new additions, and in this post I want to look specifically at the new restrictions that have been introduced for background services. If you’re using background services in your app then changes could affect your app, so let’s take a look at what these changes are and some alternative approaches we can take in our implementation. There could be a bunch of reasons why our application is utilising background services — maybe it’s keeping our application data up-to-date with what’s on the server, maybe it’s shifting tasks to the background to unblock the UI or maybe we’re just carrying out some other long running task in the background. Whatever it is we’re doing, we’re going to be affected by these new changes in Android Oreo. But why has this change been introduced? Well to begin with, Background Services are battery d...
Image

The Android Kotlin style guides

Style guide This document serves as the complete definition of Google’s Android coding standards for source code in the Kotlin Programming Language. A Kotlin source file is described as being in Google Android Style if and only if it adheres to the rules herein. Like other programming style guides, the issues covered span not only aesthetic issues of formatting, but other types of conventions or coding standards as well. However, this document focuses primarily on the hard-and-fast rules that we follow universally, and avoids giving advice that isn’t clearly enforceable (whether by human or tool). Last update: 2018-05-18 Source files All source files must be encoded as UTF-8. Naming If a source file contains only a single top-level class, the file name should reflect the case-sensitive name plus the  .kt  extension. Otherwise, if a source file contains multiple top-level declarations, choose a name that describes the contents of the file, apply PascalCase, an...

How to adjust image content mode using aspect fill, aspect fit and scaling

All views (including those that don't hold images) have a content mode that affects the way they draw their content. The default is  Scale To Fill  because it's fastest: the contents of the view just get stretched up (or down) to fit the space available. But there are two others that you'll be using a lot: Aspect Fit and Aspect Fill. "Aspect Fit" means "stretch this image up as large as it can go, but make sure that all the image is visible while keeping its original aspect ratio." This is useful when you want an image to be as large as possible without stretching its proportions, and it's probably the most commonly used content mode. "Aspect Fit" means "stretch this image up as large as it can go, cropping off any parts that don't fit while keeping its original aspect ratio." This is useful when you want an image to fill its image view, even when that means losing either the horizontal or vertical edges. If you want to f...

How to clear all activity stack in Android

Method 1 In API level 11 or greater, use  FLAG_ACTIVITY_CLEAR_TASK  and  FLAG_ACTIVITY_NEW_TASK  flag on Intent to clear all the activity stack. Intent i = new Intent(OldActivity. this , NewActivity. class ); // set the new task and clear flags i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK) startActivity(i); FLAG_ACTIVITY_NEW_TASK If set, this activity will become the start of a new task on this history stack. A task (from the activity that started it to the next task activity) defines an atomic group of activities that the user can move to. Tasks can be moved to the foreground and background; all of the activities inside of a particular task always remain in the same order. See Tasks and Back Stack for more information about tasks. This flag is generally used by activities that want to present a "launcher" style behavior: they give the user a list of separate things that can be done, which otherwise run comp...
Image

Using Realm Mobile Database with Swift 4.0 (Insert, Update, Delete, List)

A big problem that many developers face now a days is dealing with database. To have your app in app store in top list is not quite easy and to make the app ready for scalability is pretty hard. When our app is reached to many users, say a million, we have to care about everything in the app from performance to scalability. As far as I see till date developers have only two options “SQLite” and “Core Data”. Though both have a lot of advantages over each, I love to work with “Core Data” because of ease of dealing with records and persisting data and also due to the native advantages of “Core Data”. Very Recently I started using Realm that can be considered as a perfect replacement for “SQLite” and “Core Data”. What is Realm? Realm, it’s a cross platform mobile database for iOS and Android and designed specifically for mobile applications. It is available in both Swift and Objective-C. It is framed to be faster and better than SQLite and CoreData. With just f...
Image

From Swift to Javascript and Back

’s been added to the  JSVirtualMachine  using  addManagedReference:withOwner  method and has not been removed using the  removeManagedReference:withOwner  method. Otherwise, the  JSManagedValue  gets set to nil, releasing the  JSValue , and is free to be garbage-collected on the JavaScript side. JSExport A  JSValue  can represent and convert all of the JavaScript builtin types to Objective C/Swift and can convert them in the other direction to JavaScript types. However, a  JSValue  can’t convert Objective C/Swift classes to JavaScript objects without help. The  JSExport  protocol provides a way to convert Swift/Objective C classes and their underlying instance methods, class functions, and properties into JavaScript objects. By default when using  JSValues ,  JavascriptCore  will convert a Swift/Objective C class into JavaScript object but will not populate instance methods, class function...