I recently found a bug on my phonegap application.
So, I decided to correct it (nice!) and I needed to update phonegap client to the new version 6.4.2.
Once done, I ran my application via "phonegap serve" and test my app on Android device and an iPhone device (with iOS 10).
Our application is a simple HTML page with an iframe inside in order to encapsulate our responsive design website.
Everything works great on Android AND on old iPhone (iOS 7.1.2) but on the new iPhone with iOS 10, the iframe doesn't load !!!
I search for a long time why... I do not understand...
So, I planned to create a new application
phonegap create TestApp
Here is the index.html code
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; frame-src *; ">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<iframe id="webview" src="https://www.google.com" onload="checkPage();">
</iframe>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
It's really the started page with an iframe inside and this iframe doesn't load and the checkPage() is never fired.
I tried to change "Content-Security-Policy" but... did not work...
I'm out of ideas, so, if somebody had the same issue and know how to resolve this... You're welcome !
Thanks,
I can provide you more code if you want
Laurent
The answer can be found in this question:
Cordova iOS blank iframe
Simply add the following to your config.xml file:
<allow-navigation href="*" />
Related
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}, (err) => {
console.log(err);
});
}
I’m creating an app that needs to access get current location of the user but i got the position error in the chrome console and i have tried below link for resolve this issue :
https://forum.ionicframework.com/t/geolocation-not-possible-due-to-only-secure-origins-are-allowed-see-https-goo-gl-y0zknv/58678
but its not working for me as well as i tried other solution but not working for me and I have also generated the google map API key from the console and i have used below command:
sudo ionic cordova run android --livereload
Since I get the same error in the emulator and when debugging on the phone, I am not sure how to resolve this error when dealing with Ionic. I use Ionic 3.9
Any help or hints are greatly appreciated, thanks!
below our index.html and home.ts file
If you are still having this issue, and you are running on ionic4 just run
ionic cordova run android -livereload --ssl
in some cases, you'll be required to add an address, if that's the case use your public ip where your device is connecting
https://forum.ionicframework.com/t/ionic-geolocation-only-secure-origins-are-allowed-error/61333/30
Also, this link has some insights about the issue:
https://github.com/ionic-team/ng-cordova/issues/1413
To clarify, this is not an ionic issue, it's due to some changes on the google policies.
In my case the location was working perfectly when running on the device, only failing when running with livereload option
It is possible to display an react/angular web application on WebView component ?
I build angular(angular cli) and react application in prod mode.
Next, prepared files I put inside ./assets folder.
After changes inside webpack.config.js and run
tns run android --bundle than nothing is shown beside of static texts.
home.component.tns.html
<GridLayout>
<WebView src="~/assets/seatmap/index.html"></WebView>
</GridLayout>
home.component.tns.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.x.css"></head>
<body>
<img src="favicon.ico"> // not displayed
<img src="./favicon.ico"> // displayed
<app-root></app-root> // nothing is displayed
<b>This text is displayed</b>
<script type="text/javascript" src="runtime.x.js"></script>
<script type="text/javascript" src="polyfills.x.js"></script>
<script type="text/javascript" src="main.x.js"></script>
</body>
</html>
Javascript files are loaded. There is no problem with path.
When I change src to any external web site (src="http://facebook.com") everything is ok.
Duplicate of NativeScript WebView loading local resources in src document
It's known issue with iOS, please refer my answer there which includes possible workarounds.
I use cordova regular on ubuntu for android.
I compile with build.phonegap.com for ios, uploading zip project.
with Android all fine, but with ios deviceready not fire until i tap or change the focus to other thing.
Mi index is simple:
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' https://ssl.gstatic.com data:* gap://* file://* tel:* 'unsafe-inline' 'unsafe-eval' ;
style-src 'self' 'unsafe-inline';
frame-src 'self' s-static.ak.facebook.com static.ak.facebook.com www.facebook.com;
connect-src 'self' https://app.mypage.es/ connect.facebook.net www.facebook.com;
media-src *;
img-src 'self' www.google-analytics.com www.facebook.com;
script-src 'self' 'unsafe-inline' www.google-analytics.com connect.facebook.net www.facebook.com">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="fastclick.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
and the index.js
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {....stuff}
i try diferent alternatives to content-policy and diferent ways to atach event
What is the correct way?
finally removing all platforms and plugins, and adding them after, solve my problems.
have you tried restarting?
I have a bootstrap/angular js ui-router app that is created in windows visual studio on a windows tablet. Originally the need was to have the app for Windows users, now its needed for all devices.
After the app was created for browser, I was able to import it into visual studio for cordova. I got everything working testing in Windowsx64 - local machine settings. I tried plugging my iphone to tablet to test the iOS version of the app but I never got that working. So I tried testing with the Ripple simulator that Visual Studio comes with. The simple start page and any other apps would work great from device to device, but just this specific app ui-router and styles do not transfer over and do not show up on iOS and Android. No errors logs show up when in iOS or Android mode.
the code behind the app:
index.html
<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- STYLE SHEETS-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Clinical Cases Program</title>
</head>
<!-- apply our angular app to our site -->
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="landing">Clinical Cases App</a>
</div>
</div>
</nav>
<h1>The device is running</h1>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<!-- SCRIPTS -->
<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/ui-router.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>
script.js
routerApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME VIEWS =================================
.state('landing', {
url: '/home',
templateUrl: 'templates/partial-landing.html'
})
// FILTERS VIEWS ========================================
.state('filters', {
url: '/filters',
templateUrl: 'templates/partial-filters.html',
controller: 'FilterToggleController',
controllerAs: 'vm'
})
// CASES VIEWS =================================
.state('cases', {
url: '/cases',
templateUrl: 'templates/partial-cases.html',
controller: 'CasesController',
controllerAs: 'vm'
});
});
//"myApp" is the your module
routerApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|ms-appx-web|x-wmapp0):|data:image\//);
}]);
Is there a specific folder in Visual Studio or Cordova that overwrites these style/script? Is there something wrong with Ripple simulators?
Attached are screenshots of the original windows app and other iOS and Android Ripple.
Windows x64 - local machine
Android - Ripple-Nexus(Galaxy)
Android Ripple - Nexus 7 (tablet)
iOS - Ripple iphone 5
iOS - Ripple ipad 3
I'm struggling to integrate Cordova(=Phonegap) with Ember.js, and jQuery Mobile. Ember.js + jQuery Mobile works fine, as loading index.html in any desktop browser successfully loads the app.
Using xCode 4 and the iPhone 5.1 simulator, it doesn't show any content within handlebar tags. Which means Ember.js fails to load.
index.html:
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>
<body>
<script type="text/x-handlebars" data-template-name="main">
this text is NOT displayed
</script>
<div> this text IS displayed </div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/jquery.mobile.js"></script>
<script src="js/vendor/ember.js"></script>
<script src="js/app/app.js"></script>
<script src="js/vendor/cordova-1.5.0.js"></script>
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
function preventBehavior(e){
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
document.addEventListener("deviceready", onDeviceReady, false);
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady(){
// do your thing!
}
</script>
</body>
</html>
Found the problem. XCode was reporting:
ERROR whitelist rejection: url='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css'
Following this, I added *.jquery.com to the ExternalHosts array, within Cordova.plist.