Ti.WKWebView

Summary

Ti.WKWebView is an open source project to support the WKWebView API with Titanium.

Requirements

• Titanium Mobile SDK 5.0.0.GA or later
• iOS 9 or later
• Xcode 7.0 or later

Download + Setup

Download

• Stable release
• 

Setup

Unpack the module and place it inside the modules/iphone folder of your project. Edit the modules section of your tiapp.xml file to include this module:

<modules>
    <module>ti.wkwebview</module>
</modules>

Features

API's

Name	Example
WebView	WK.createWebView(args)
ProcessPool	WK.createProcessPool()

WebView

Properties

Name	Type
disableBounce	Boolean
suppressesIncrementalRendering	Boolean
scalePageToFit	Boolean
allowsInlineMediaPlayback	Boolean
allowsAirPlayMediaPayback	Boolean
allowsPictureInPictureMediaPlaback	Boolean
allowsBackForwardNavigationGestures	Boolean
allowsLinkPreview	Boolean
scrollsToTop	Boolean
disableContextMenu	Boolean
userAgent	String
url	String
data	Ti.Blob, Ti.File
html	Boolean
title	Boolean
progress	Double
backForwardList	Object
ignoreSslError	Boolean
mediaTypesRequiringUserActionForPlayback	AUDIOVISUAL_MEDIA_TYPE_*
preferences	Object - minimumFontSize (Double) - javaScriptEnabled (Boolean) - javaScriptCanOpenWindowsAutomatically (Boolean)
basicAuhentication	Object - username (String) - password (String) - persistence (CREDENTIAL_PERSISTENCE_*)
cachePolicy	CACHE_POLICY_*
timeout	Double
SelectionGranularity	SELECTION_GRANULARITY_*
processPool	ProcessPool

Methods

Name	Parameter	Return
stopLoading	-	Void
reload	-	Void
goBack	-	Void
goForward	-	Void
canGoBack	-	Boolean
canGoForward	-	Boolean
isLoading	-	Boolean
evalJS	Code (String), Callback (Function)	Void
startListeningToProperties	Properties (Array)	Void
stopListeningToProperties	Properties (Array)	Void

Events

Name	Properties
message	name, body, url, isMainFrame
progress	value, url
beforeload	url, title
load	url, title
redirect	url, title
error	url, title, error

Constants

Name	Property
CREDENTIAL_PERSISTENCE_NONE	basicAuthentication.persistence
CREDENTIAL_PERSISTENCE_FOR_SESSION	basicAuthentication.persistence
CREDENTIAL_PERSISTENCE_PERMANENT	basicAuthentication.persistence
CREDENTIAL_PERSISTENCE_SYNCHRONIZABLE	basicAuthentication.persistence
AUDIOVISUAL_MEDIA_TYPE_NONE	mediaTypesRequiringUserActionForPlayback
AUDIOVISUAL_MEDIA_TYPE_AUDIO	mediaTypesRequiringUserActionForPlayback
AUDIOVISUAL_MEDIA_TYPE_VIDEO	mediaTypesRequiringUserActionForPlayback
AUDIOVISUAL_MEDIA_TYPE_ALL	mediaTypesRequiringUserActionForPlayback
CACHE_POLICY_USE_PROTOCOL_CACHE_POLICY	cachePolicy
CACHE_POLICY_RELOAD_IGNORING_LOCAL_CACHE_DATA	cachePolicy
CACHE_POLICY_RETURN_CACHE_DATA_ELSE_LOAD	cachePolicy
CACHE_POLICY_RETURN_CACHE_DATA_DONT_LOAD	cachePolicy
SELECTION_GRANULARITY_AUTOMATIC	selectionGranularity
SELECTION_GRANULARITY_CHARACTER	selectionGranularity

WebView <-> App Communication

You can send data from the Web View to your native app by posting messages like this:

window.webkit.messageHandlers.Ti.postMessage({message: 'Titanium rocks!'},'*');

Please note that you should use the Ti message handler to ensure the message event is triggered. This also ensures that your app does not receive unwanted messages by remote pages.

After sending the message from your HTML file, it will trigger the message event with the following event keys:

• url (The url of the triggered message)
• body (The message body. In this case: {message: 'Titanium rocks'}
• name (The name of the message. In this case: 'Ti')
• isMainFrame (A boolean determing if the messsage was sent from the main-frame)

For sending messages from the app to the Web View, use evalJS to call your JS methods like this:

webView.evalJS('myJSMethod();');

Check out the example file for sending and receiving message back and forth.

Generic Property Observing

You can listen to changes in some of the native properties (see the native KVO-capability). Example:

// Start listening for changes
webView.startListeningToProperties(['title']);

// Add an event listener for the change
webView.addEventListener('title', function(e) {
    // Check for e.value
});

// Remove listening to changes (remove the event listener as well to keep it more clean)
webView.stopListeningToProperties(['title']);

Process Pool

Use process pools to share cookies between web views. Process pools do not take arguments, just pass the same reference to multiple web views. Example:

var WK = require('ti.wkwebview');

var pool = WK.createProcessPool();

var firstWebView = WK.createWebView({
    processPool: pool
});

var secondWebView = WK.createWebView({
    processPool: pool
});

Author

Hans Knoechel (@hansemannnn / Web) for Appcelerator

License

Apache 2.0

Contributing

Code contributions are greatly appreciated, please submit a new pull request!