8 Replies Latest reply on Jun 11, 2017 1:47 AM by wilf1970

    Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" /> ?

    wilf1970

      I'm looking to build an app that uses the geolocation API.

       

      Chrome since v50 doesn't allow the use of geolocation from non-secure origins.

      I'm using wkwebview and have assumed that this is the same framework as is used in Chrome. I may be wrong.

      But I receive an error when attempting this:

       

      watchID = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

       

      It works fine when running on my local machine against a self-signed certificate.

      It builds fine through Phonegap Build but when deployed to the iPhone via itunesconnect it fails at runtime.

       

      Appreciate any help that could be offered.

        • 1. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
          kerrishotts Adobe Community Professional
          1. WKWebView does not use Chrome. WKWebView is a webkit-based web view (and Chrome on iOS is also forced to use it). It has different policies than does Chrome on a desktop.
          2. The default setup with WKWebView would have you still using the file:// origin. If you've added the local web server, you'd be serving from http://localhost[:port].
            1. The local web server does not support SSL.
          3. What works on your local machine obviously does not guarantee anything on-device, as you've already discovered. In this case, for geolocation on iOS (and Android, too), you don't need to worry about Chrome's restrictions on geolocation -- but you do need to be concerned with Apple's own restrictions on geolocation (namely, you need to supply permission strings). See the cordova-plugin-geolocation plugin for more.
          4. You say you receive an error -- please share what the error is. That might guide us to what the problem is.
          5. It might be useful to see your config.xml file and your CSP (Content Security Policy) meta tag (in your index.html file). Please mask/remove any sensitive/private information before posting.

           

          Hope that helps.

          • 2. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
            wilf1970 Level 1

            Thanks so much for the insights.

            Here is my config.xml.

            I'd be interested to know if my NSLocationWhenInUseUsageDescription declaration is accurate?

               <content src="http://localhost:4159" />

                <feature name="Geolocation">

                    <param name="ios-package" value="CDVLocation" />

                </feature>   

                <gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">

                    <array>

                        <string>UIInterfaceOrientationLandscapeOmg</string>

                    </array>

                </gap:config-file>   

                <gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">

                    <string>Does not use photo library</string>

                </gap:config-file>    

                <gap:config-file platform="ios" parent="NSLocationWhenInUseUsageDescription" overwrite="true">

                    <string>This app uses Geo-Location and will ask for your permission to access your current location</string>

                </gap:config-file>    

                <preference name="DisallowOverscroll" value="true" />

                <preference name="android-minSdkVersion" value="14" />

                <preference name="orienation" value="portrait" /> 

                <preference name="fullscreen" value="true" />

                <preference name="exit-on-suspend" value="true" />

                <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />

                <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />

                <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />

                <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />

                <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />

                <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />

                <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />

                <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />

                <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />

                <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />

                <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />

                <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />

                <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />

                <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />

                <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />

                <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />

                <plugin name="cordova-plugin-wkwebview-engine-localhost" spec="https://github.com/apache/cordova-plugins.git#wkwebview-engine-localhost" />

                <platform name="android">

                    <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />

                    <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />

                    <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />

                    <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />

                    <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />

                    <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />

                    <splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />

                    <splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />

                    <splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />

                    <splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />

                    <splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />

                    <splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />

                    <splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />

                    <splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />

                    <splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />

                    <splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />

                    <splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />

                    <splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />

                </platform>

                <platform name="ios">

                    <icon height="57" platform="ios" src="www/res/icon/ios/icon-57.png" width="57" />

                    <icon height="114" platform="ios" src="www/res/icon/ios/icon-114.png" width="114" />

                    <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />

                    <icon height="80" platform="ios" src="www/res/icon/ios/icon-80.png" width="80" />

                    <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />

                    <icon height="100" platform="ios" src="www/res/icon/ios/icon-100.png" width="100" />

                    <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />

                    <icon height="120" platform="ios" src="www/res/icon/ios/icon-120.png" width="120" />

                    <icon height="180" platform="ios" src="www/res/icon/ios/icon-180.png" width="180" />

                    <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />

                    <icon height="144" platform="ios" src="www/res/icon/ios/icon-144.png" width="144" />

                    <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />

                    <icon height="152" platform="ios" src="www/res/icon/ios/icon-152.png" width="152" />

                    <icon height="29" platform="ios" src="www/res/icon/ios/icon-29.png" width="29" />

                    <icon height="58" platform="ios" src="www/res/icon/ios/icon-58.png" width="58" />

                    <icon height="87" platform="ios" src="www/res/icon/ios/icon-87.png" width="87" />

                    <splash height="2208" platform="ios" src="www/res/screen/ios/iphonesplash.png" width="1242" />

                    <splash height="2732" platform="ios" src="www/res/screen/ios/ipadsplash.png" width="2048" />

                    <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~iphone.png" width="640" />

                    <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />

                    <splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />

                    <splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />

                    <splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />

                    <splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />

                    <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />

                    <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />

                    <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x~iphone.png" width="640" />

                    <splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />

                </platform>

                <platform name="wp8">

                    <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />

                    <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />

                    <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />

                </platform>

                <platform name="windows">

                    <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />

                    <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />

                    <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />

                    <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />

                    <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />

                    <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />

                    <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />

                    <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />

                    <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />

                    <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />

                    <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />

                    <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />

                    <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />

                    <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />

                    <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />

                </platform>

                <splash src="splash.png" />

                <access origin="*" />

                <allow-intent href="http://*/*" />

                <allow-intent href="https://*/*" />

                <allow-intent href="tel:*" />

                <allow-intent href="sms:*" />

                <allow-intent href="mailto:*" />

                <allow-intent href="geo:*" />

                <allow-navigation href="http://*/*" />

                <allow-navigation href="https://*/*" />

                <platform name="android">

                    <allow-intent href="market:*" />

                </platform>

                <platform name="ios">

                    <allow-intent href="itms:*" />

                    <allow-intent href="itms-apps:*" />

                </platform>

            </widget>

            I will put some diags in to generate the error message received.

             

            Thank you.

            Mark

            • 3. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
              wilf1970 Level 1

              The error that I receive is:

               

              code: 2

              message: Origin does not have permission to use Geolocation service

               

              Many thanks.

              Mark.

              • 4. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
                kerrishotts Adobe Community Professional

                I see several problems with your config.xml:

                 

                • Your project's configuration should not have <feature> tags; those are platform-specific and generated during the prepare phase.
                • You're using config-file to specify the geolocation permission usage description. That may work, but you should use the plugin's variable instead. See Geolocation - Apache Cordova
                • Apple may not approve usage descriptions that simply say the app uses the feature. You need to say /why/ you need the feature and what you're using it for. For example, "This application uses your position in order to provide navigational features"
                • That's an awful lot of plugins. Do you need them all? If not, remove the ones you don't need.

                 

                I suspect you're managing to use wkwebview's native geolocation features instead of the plugin. Make sure that you are including "cordova.js" in your index.html and that you are waiting until you receive deviceready before using geolocation.

                • 5. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
                  wilf1970 Level 1

                  Thank you so much for your help with this.

                  I've started the project again and gone with the default "Hello, world" config.xml

                  i.e. no local web server and just the default plug-ins. Also, no <feature> elements.

                  I'd also fallen into the trap of thinking that I could side-step the deviceready with a standard onload() in the <body> and I also deleted the cordova.js from index.html as I couldn't find it in the file system.

                  So I wasn't using the app{} object and therefore not using app.initialize() to kick things off.

                  So many mistakes.

                  But your replies have helped me to massively understand what I'm doing here and how it all works.

                   

                  My final question is in relation to the prompting of the app to use the location.

                  When I run the package through PhoneGap Build and then add the .ipa to Testflight to install on the device, the app doesn't prompt me until I actually close it! Actually 'onexit' as it were.

                  Is there a way I can have the app prompt me the moment it launches rather than the moment I close it?

                   

                  Many thanks.

                  Mark.

                  • 6. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
                    kerrishotts Adobe Community Professional

                    Might be missing "gap:" in your Content Security Policy (CSP) meta tag in index.html. Make sure that the "default-src" directive has "gap:" so that plugins can work correctly.

                     

                    That said, permission will not be asked until your app attempts to use it. If you need permissions to be asked at app start, you'll need to request the location immediately after deviceready is received. Be sure to prime the user, because if they deny permissions, you don't get the chance to ask ever again (the user has to manually grant permissions in their privacy settings).

                    • 7. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
                      wilf1970 Level 1

                      Excellent. Thank you. I added gap: to the default-src directive and will build and test.

                       

                      When the deviceready event is fired I execute the following (g{} is my general namespace for most things):

                       

                          if ("geolocation" in navigator) {

                                  g.watchID = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

                          } else {

                                  console.log("No geolocation support.");

                          }  

                       

                      With these options:

                      var geo_options = {

                        enableHighAccuracy: false,

                        maximumAge        : 0,

                        timeout          : 0

                      };

                       

                      Once I've built the latest version and tested it I will feed back.

                      Thanks once again.

                      Very much appreciated.

                      Mark.

                      • 8. Re: Is it possible to use a certificate inside of the Phonegap application and request <content src="https://localhost:[port]" ></content> ?
                        wilf1970 Level 1

                        Tested and works perfectly.

                        Thanks so much kerrishotts

                        I'll mark your first response as the correct answer but they've all helped me to resolve the issues.

                        Mark.