I have created demo app using Ionic with Worklight and it worked on Android but got error on IOS, when i used mobile browser simulator and debugged on IOS environment, i got the folowing error message:
Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('platform-ios - iphone') contains HTML space characters, which are not valid in tokens.
I just add Ionic files in index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="ionic/css/ionic.css">
<script src="ionic/js/ionic.bundle.js"></script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I also tested on mobile device on both Android and IOS and only got error on IOS device.
I don't know how to fix this. Can anyone help? Thanks.
update May 28th: here is a blog post about Worklight and Ionic with a full sample project: http://mobileroly.blogspot.co.il/2014/04/using-angular-js-and-ionic-on-ibm.html
Well, this seems like some incompatibility between the ionic framework and Worklight.
Worklight does not officially support ionic.
The MBS sends "ios - iphone".
ionic in turn does not like that because there are spaces...
I don't quite know what ionic expects to have there, but you can overcome the error by finding this code in the ionic.bundle.js file:
for(var i = 0; i < ionic.Platform.platforms.length; i++) {
document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
}
And replacing it with the following.
The error will be gone.
for(var i = 0; i < ionic.Platform.platforms.length; i++) {
if (ionic.Platform.platforms[i] = "ios - iphone") {
document.body.classList.add('platform-ios');
// or maybe 'platform-ready', I don't know...
} else {
document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
}
}
This, however, does not help in displaying the app in the MBS...
But at least you can then run in Xcode's iOS Simulator to see the app.
It seems that ionic and Worklight's iPhone/iPad environments don't play well together.
index.html:
<head>
...
...
<link href="ionic/ionic.css" rel="stylesheet">
<script src="ionic/ionic.bundle.js"></script>
</head>
<body ng-app="ionicApp">
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
<div style="margin-top:38px">
<p>test test test</p>
</div>
...
...
</body>
main.js:
angular.module('ionicApp', ['ionic']);
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
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
In My Worklight hybrid sample application I want google map in I phone (IOS) environment.I am using worklight 7.1, Jquery Mobile 1.4.5
I've done it in android environment but i am not able to seeing map in iphone.
My JS code:
var x=document.getElementById("demo");
function getLocation()
{
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLGeoLocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HTMLGeoLocation.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<!--application UI goes here-->
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script src="js/initOptions.js"></script>
<script src="js/HTMLGeoLocation.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
There are many examples online demonstrating integration of Google Maps in Web apps, including those that use the Worklight client framework.
It is unclear what is your Worklight version, so here are some links you can explore. These also provide sample projects for you to review their implementation and run them locally.
How to display a Google Map on Worklight App
https://www.dropbox.com/s/vozn1hcbs2fb70g/GoogleMapsInWorklight.zip
I am new to ios phonegap . I started to cordova based application.My code does not show header and footer in emulator but works fine in browser. My index.html code is something like this.
<!doctype html>
<html>
<head>
<title>JQM Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
</head>
<body >
<div data-role="page">
<div data-role="header" data-position="fixed" >
<h1>Header</h1>
</div>
<div data-role="content">
<p>Welcome</p>
...
</div>
<div data-role="footer" data-position="fixed" >
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Am i missing something?
My ios version is 5.1.I have also added URL in Cordova.plist,still not working.
You need to add the remote URL code.jquery.com to the whitelist. If you expect your app to be used offline it is best to include the JS files as part of your app and use the local copy.
To add the URL to the whitelist edit the Cordova.plist file in your project and add code.jquery.com under ExternalHosts.
What's the version of IOS did you try on?
It's well known and documented by JQM team, that old platforms like IOS 4.3 do not support fixed toolbars positioning out of the box. You'll need to polyfill.
Just look at their docs: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
Also don't forget to update *.plist as already mentioned in this topic.
I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<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="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.