Updated Cordova config to support WKWebView for iOS 9. Closes #94

thaliproject · Jan 5, 2016 · e8f68d3 · e8f68d3
1 parent 7db62b1
commit e8f68d3
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 17 deletions.
diff --git a/app/jxcore/public/elements/page-editor/page-editor.html b/app/jxcore/public/elements/page-editor/page-editor.html
@@ -169,8 +169,9 @@
       navigator.camera.getPicture( this._cameraSuccess.bind(this), this._cameraError.bind(this) );
       return;
     }
-    // Mobile targetOrigin is 'file://'
-    parent.postMessage('navigator.camera.getPicture', 'file://');
+    console.log("Trigger camera");
+    // NB: using "*" so no origin check is made.
+    parent.postMessage('navigator.camera.getPicture', "*");
   },
   _cameraSuccess: function(imageData) {
     console.log("Camera imageData loaded");

diff --git a/app/jxcore/public/scripts/app.js b/app/jxcore/public/scripts/app.js
@@ -168,11 +168,13 @@ window.addEventListener('message', receiveMessage, false);
 
 // Handle cross origin message
 function receiveMessage(event) {
-	console.log('iframe received message');
+	console.log('iframe received message from:', event.origin);
 
-  if (event.origin !== "file://") {
-    console.log("Access denied :[");
-    return;
+	if (event.origin === "null" && event.data) {
+		console.log("Allow WKWebView message event data");
+	} else if (event.origin !== "file://") {
+		console.log("Access denied :[");
+	  return;
   }
 
 	if (event.data.error) {

diff --git a/config.xml b/config.xml
@@ -38,6 +38,7 @@
         <preference name="EnableViewportScale" value="false" />
         <preference name="KeyboardDisplayRequiresUserAction" value="false" />
         <preference name="SuppressesIncrementalRendering" value="true" />
+        <preference name="DisallowOverscroll" value="true" />
         <feature name="CDVWKWebViewEngine">
             <param name="ios-package" value="CDVWKWebViewEngine" />
         </feature>
@@ -73,10 +74,8 @@
         <splash height="2208" src="assets/ios/Resources/splash/Default-736h.png" width="1242" />
         <splash height="1242" src="assets/ios/Resources/splash/Default-Landscape-736h.png" width="2208" />
     </platform>
-    <preference name="DisallowOverscroll" value="true" />
     <hook src="app/jxcore/hook.js" type="before_build" />
-    <plugin name="cordova-plugin-whitelist" spec="~1.2.0" />
-    <plugin name="cordova-plugin-wkwebview-engine" spec="~1.0.0" />
     <plugin name="cordova-plugin-statusbar" spec="~2.0.0" />
-    <plugin name="cordova-plugin-camera" spec="~1.2.0" />
+    <plugin name="cordova-plugin-camera" spec="~2.0.0" />
+    <plugin name="cordova-plugin-wkwebview-engine" spec="~1.0.1" />
 </widget>
diff --git a/readme.md b/readme.md
@@ -96,8 +96,8 @@ git clone https://github.com/thaliproject/postcardapp.git
 
 cd postcardapp
 
-cordova platform add android
-cordova platform add ios
+cordova platform add android@5.0.0
+cordova platform add ios@4.0.1
 
 cd app/jxcore
 jx npm install --production --autoremove "*.gz"

diff --git a/www/index.html b/www/index.html
@@ -3,15 +3,15 @@
 <head>
 <meta charset="utf-8">
 <title>App</title>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
 <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/index.js"></script>
 <style>
 html,body{width:100%;height:100%;margin:0px;padding:0px;}
 .logo{background:white url("img/logo.png") center center no-repeat;}
-@media 
-(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){ 
+@media
+(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
 .logo{background-image:url("img/logo@2x.png");background-size:100%;}
 }
 </style>

diff --git a/www/js/index.js b/www/js/index.js
@@ -95,11 +95,11 @@ function getPicture() {
 function cameraSuccess(imageData) {
   console.log("cameraSuccess");
   // post message back to iframe
-  contentWindow.postMessage( {image:imageData}, HOST);
+  contentWindow.postMessage( {image:imageData}, "*"); // HOST
 }
 
 function cameraFail(message) {
   console.log("cameraFail");
   // post message back to iframe
-  contentWindow.postMessage( {error:message}, HOST);
+  contentWindow.postMessage( {error:message}, "*"); // HOST
 }