用Ionic包装Angular2应用-地理位置问题

Question

I have an existing, responsive, Angular 2 application that I would like to wrap using Ionic and deploy to the app store. The application will run on both web browsers, and as a native app on iOS and Android .

I've got this mostly worked out now, with one problem. I need to use geolocation on my first screen and my web app does this with navigator.geolocation.getCurrentPosition as you'd expect. This works great in the web, asking the user for permission and then performing the geolocation .

In the iOS version, after I tag in the cordova-plugin-geolocation I can get a message to pop-up to allow geolocation as well, but this message uses the long path

("/var/containers/bundle/application/{{GUID}}/{{APPNAME}}/www/index.html" would like to use your current location).

This looks hacky and amateurish and honestly, I'd probably delete any app that gave me a message like that. I'm trying to figure out how to get this message to just say the name of my app. Here are some things I've tried...

• Adding NSLocationWhenInUseUsageDescription and it's variations to my plist file. This results in me getting a message with the app name first, and then getting a second message with the path.
• Importing 'ionic-native' in my angular 2 app and trying to use Geolocation as a wrapper -- no change
• Waiting for the "deviceready" event to do geolocation -- no change
• Setting a long delay (up to 30 seconds) with setTimeout before doing geolocation -- no change

I hate the idea that I have to have two code bases just to deploy a simple web app via the app store distribution channel. Surely there's some way around this that I just haven't thought of yet. Any suggestions?

Answer 1

So, this turned out to be somewhat simple, actually. The built index.html file just needs to have the ionic javascript references, like this:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>

I modified my gulp file that processes by webpack build for ionic to throw these in right before the closing head tag and now my call to geolocation works with proper messaging.

navigator.geolocation.getCurrentPosition((pos) => { 
   //do things with pos
});