https://github.com/kosso/titanium-postmessage-webview
WORK IN PROGRESS / PoC : Titanium modules for iOS and Android to expose 'postMessage' ability to fire events from remote HTML to a Titanium app JS
https://github.com/kosso/titanium-postmessage-webview
Last synced: 4 months ago
JSON representation
WORK IN PROGRESS / PoC : Titanium modules for iOS and Android to expose 'postMessage' ability to fire events from remote HTML to a Titanium app JS
- Host: GitHub
- URL: https://github.com/kosso/titanium-postmessage-webview
- Owner: kosso
- License: other
- Created: 2016-11-18T13:04:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-18T13:56:22.000Z (over 9 years ago)
- Last Synced: 2025-03-18T05:51:18.791Z (about 1 year ago)
- Language: Objective-C
- Size: 607 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# titanium-postmessage-webview
**WORK IN PROGRESS** / PoC : Titanium modules for iOS and Android to expose 'postMessage' ability to fire events from remote HTML to a Titanium app JS
### NOT PRODUCTION READY
iOS 9+.
Android 5+.
*Ideas and pull requests are welcome! Lots of room for improvement. ;)*
##### Motivation
To attempt to overcome some limitations with Titanium's built-in WebViews for iOS and Android, when it comes to remote HTML Javascript communication with native apps, these two experimental Titanium modules for iOS and Android should (when they both work properly) provide a *similar* method to a browser's `postMessage` and its ability to communicate with a parent iframe.
The prime reason for needing this ability is to provide access to some native Titanium app functionality *from* the remote website's Javascript.
##### Contents
- /tiwebview2_ios_
- /tiwebview2_android
- remote_test.html
These folders contain the module zip files for installing into Titanium Studio to build the enhanced webview apps for each platform in the `dist` folder.
##### Functional Requirements:
- Ability to receive Javascript 'messages' from remote HTML within a native Titanium iOS or Android app.
- Set custom UserAgent strings (To enable detection in the HTML to provide the right method)
- Use `evalJS`
- Navigation methods: `canGoBack()`, `canGoForward()`, `goBack()`, `goForward()` and `reload()`
- Set Request headers (for Authentication token etc.)
- Deal with links which try to open new tabs.
- …
#### Usage
Also see: remote_test.html showing the require JS to message each platform. You'll want to serve this somewhere.
```javascript
// .....
var tiwebview2 = require('com.kosso.tiwebview2'); // iOS and Android
var TEST_URL = 'http://SOMEWHERE.com/remote_test.html' // see file included in repo for postMessage examples.
var APPNAME = 'MY_APP';
// UserAgent 'MY_APP_ios' and 'MY_APP_android' will be created accordingly.
// We need to know what these are to to be able to provide the appropriate JS in the remote HTML.
// see: remote_test.html
var os = Ti.Platform.osname;
var webview2 = tiwebview2.createWebView({
top:0,
bottom:0,
left:0,
zIndex:1,
right:0,
userAgent:APPNAME + '_' + os, // ios only. Set in beforeload event on Android.
backgroundColor:'white',
url:TEST_URL
});
var btn_back = Ti.UI.createButton({
title:' < ',
width:50,
bottom:10,
zIndex:10,
left:10,
height:50,
borderRadius:25,
color:'white',
tintColor:'white',
textAlign:'center',
visible:false,
backgroundColor:'#333'
});
var btn_fwd = Ti.UI.createButton({
title:' > ',
width:50,
zIndex:10,
bottom:10,
right:10,
height:50,
borderRadius:25,
color:'white',
tintColor:'white',
textAlign:'center',
visible:false,
backgroundColor:'#333'
});
btn_back.addEventListener('click', function(){
webview2.goBack();
});
btn_fwd.addEventListener('click', function(){
webview2.goForward();
});
webview2.addEventListener('messageFromWebview', function(e) {
console.log("messageFromWebview:", e.message);
if(typeof e.message === 'object'){
alert(JSON.stringify(e.message));
} else {
alert(e.message);
}
// TODO: make android module convert to JSON Object
// Android verson still needs JSON.parse
// console.log(JSON.parse(e.message));
});
webview2.addEventListener('beforeload', function(e) {
console.log('webview beforeload : ');
// Set it now on Android
webview2.setUserAgent(APPNAME + '_' + os);
});
webview2.addEventListener('load', function(e) {
console.log('KOSSO: webview loaded : ', e);
// evalJS with callback (iOS only for now)
// webview2.evalJS('document.title', function(result){
// console.log('evalJS result: ', result);
//});
// with evalJSResult event.
// webview2.evalJS('document.title');
// console.log('evalJS : '+webview2.evalJS("document.title"));
console.log('webview canGoBack? : ', webview2.canGoBack());
if(webview2.canGoBack()){
btn_back.visible = true;
} else {
btn_back.visible = false;
}
if(webview2.canGoForward()){
btn_fwd.visible = true;
} else {
btn_fwd.visible = false;
}
});
/*
webview2.addEventListener('evalJSResult', function(e) {
//console.log('webview evalJSResult : ', e);
if(e.success){
console.log('webview evalJSResult : ', e.result);
}
});
*/
// etc...
```
-----------
##### Credits:
These modules have been cobbled together using some inspiration, ideas bits and bobs various sources which I'll try to list here:
- https://github.com/chreck/movento-webview
- https://github.com/kaga/Titanium-Module-WKWebview
- https://github.com/k0sukey/TiWebViewClearCache
- https://github.com/hansemannn/titanium_mobile/commits/TIMOB-17723
----------
Author : @kosso November 2016