<!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
Related
I am trying to use the cordova-app-preferences plugin.
$( document ).ready(function() {
alert("doc ready");
function ok (value) {
alert("prefs.fetch value: "+value);
}
function fail (error) {
alert("prefs.fetch error: "+error);
}
var prefs;
try {
prefs = plugins.appPreferences;
}
catch (e) {
alert("can't find plugins.appPreferences");
}
prefs.fetch( ok, fail, "mode");
});
This fails (catch). When I step using Safari debugger, plugins is undefined. I am running this on my iPhone XS cordova run ios --device, cordova version is 8.0.0.
The redacted version of my html:
<!DOCTYPE html>
<html lang="en" >
<head>
<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">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<title>Login</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
So the question is: what am I missing to get a reference to plugins.appPreferences?
UPDATE:
The problem seems specific to this plugin. To replicate,
cordova create plugin-test com.mydomain.ptest PLUG
cd plugin-test
cordova plugin add cordova-plugin-app-preferences --save
cordova platform add ios
cordova run ios --device
(fails, need to specify code signer in xcode.)
cordova run ios --device
This time it builds and runs. If I open Safari debug window, cordova.plugins is null.
Now, if I add another plugin (eg. phonegap-plugin-barcodescanner) and run it again, cordova.plugins exists, but only contains barcodescanner.
Well, this is strange, but I discovered that this particular plugin registers itself at runtime using windows.plugins while the others that I've looked at use cordova.plugins.
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.
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 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']);
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.