App with openstreetmap not working in apps packed with Voltbuilder. Packing for ios and android without any error. Same app packed as PWA, openstreetmap is working. What could be the problem?
Are you testing on iOS or Android?
Have you looked at the device browser Console for messages?
I tested on iOS. No messages at device browser Console (Safari).
Now you’ll have to do some digging. It looks like VoltBuilder did its job properly, but something in the native environment is stopping openstreemaps from working. You’ll need to trace where it’s working differently than the PWA.
It’s like my other reported problem: i18n does not work as Voltbuilder project.
I have tested your nsb appstudio test project “LeafletMap” with Voltbuilder for ios. Also this project did not work for me. You can try it by yourself.
Excellent - we’ll give it a try.
I tested on Android, and got a bunch of Content Security Policy messages. You can set your CSP in Project Properties.
Here is more information on Content Security Policy.
leaflet.js:5 Refused to load the image 'https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
q @ leaflet.js:5
index.html:1 Refused to load the image 'http://c.tile.osm.org/13/3006/4460.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://a.tile.osm.org/13/3007/4460.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://b.tile.osm.org/13/3006/4459.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://c.tile.osm.org/13/3007/4459.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://a.tile.osm.org/13/3006/4461.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://b.tile.osm.org/13/3007/4461.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://b.tile.osm.org/13/3005/4460.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://b.tile.osm.org/13/3008/4460.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://a.tile.osm.org/13/3005/4459.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://a.tile.osm.org/13/3008/4459.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://c.tile.osm.org/13/3005/4461.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://c.tile.osm.org/13/3008/4461.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon-2x.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'https://unpkg.com/leaflet@1.3.4/dist/images/marker-shadow.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://c.tile.osm.org/13/3009/4460.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://b.tile.osm.org/13/3009/4459.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
index.html:1 Refused to load the image 'http://a.tile.osm.org/13/3009/4461.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
I then tried the app on iOS. Same problem:
[Error] Refused to load http://c.tile.osm.org/13/3006/4460.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://a.tile.osm.org/13/3007/4460.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://b.tile.osm.org/13/3006/4459.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://c.tile.osm.org/13/3007/4459.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://a.tile.osm.org/13/3006/4461.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://b.tile.osm.org/13/3007/4461.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://b.tile.osm.org/13/3005/4460.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://b.tile.osm.org/13/3008/4460.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://a.tile.osm.org/13/3005/4459.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://a.tile.osm.org/13/3008/4459.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://c.tile.osm.org/13/3005/4461.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load http://c.tile.osm.org/13/3008/4461.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon-2x.png because it does not appear in the img-src directive of the Content Security Policy.
[Error] Refused to load https://unpkg.com/leaflet@1.3.4/dist/images/marker-shadow.png because it does not appear in the img-src directive of the Content Security Policy.
Can you run nsb appstudio test project “LeafletMap” with Voltbuilder for ios and android now without errors and can you provide please your config.xml and voltbuilder.json?
Thank you in advance.
In former times with “Adobe phonegap build” I used a file “AndroidManifest.xml” for permission purposes. Does Voltbuilder support this file?
It gets generated automatically from what’s in config.xml.
What’s more likely the cause here is new requirements from Apple and Google surrounding CORS. They’ve been working on improving security of the web for the past couple of years. This has happened since PhoneGap.
Sorry, if I am insisting: I need this for my App packed with Voltbuilder:
Can you run nsb appstudio test project “LeafletMap” with Voltbuilder for ios and android now without errors and can you provide please what is necessary for running?
Thank you in advance.
This isn’t really an AppStudio or VoltBuilder issue, but rather something you’re trying to do using these tools.
We would have to do pretty much the same as you: figure out what the CORS requirement and come up with a content-security-policy.
Here’s a blog post dating back to the PhoneGap days with describes what needs to be done:
https://blog.appstudio.dev/2015/12/phonegap-no-content-security-policy-message/
Thank you very much for your kind endeavours.
Gerrit.
Have a look here for CSP - it’s come up in this forum before.
Sorry, but my problems with Voltbuilder for ios and CORS persist.
I have tested nsb appbuilder project “LeafletMap”. This project has 2 buttons. button1 goes to a map with fixed latitude/longitude and runs well. Button2 uses geolocation and tries to find my location. This works in webbrowser on macos but not as output from Voltbuilder for ios as iphone app.
My own app I am developing gives the message “geolocation error: origin does not have permission to use geolocation service.”.
Following I have done in my project:
- Inserted CSP in projects contentProjectSecurity
- inserted cordova-plugin-geolocation in config.xml
- inserted
‘’’
|||
|—|---|
|| |
|| Allow the app to know your location|
|| |
|| |
|| Allow the app to know your location|
| ||
|||
‘’’
I have all this done without success. It would be some help, when you could make running test-app “LeafletMap” as output from Voltbuilder-ios.
Thank you.
I’ve not used openstreetmaps/leaflet but have built an app that works successfully with GoogleMaps as a PWAS as well as iOS and Android apps. For iOS I had to set the following permissions in config.xml
<platform name="ios">
<edit-config target="NSLocationAlwaysUsageDescription" file="*-Info.plist" mode="merge">
<string>This app would like to use your location to deliver information specific to your location.</string>
</edit-config>
<edit-config target="NSLocationAlwaysAndWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>This app would like to use your location to deliver information specific to your location.</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>This app would like to use your location to deliver information specific to your location.</string>
</edit-config>
The app does more than just showing data on a map (including user’s current location) but I did also update the config.xml with the following which includes a specific geo intent:
<plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" />
<allow-navigation href="https://*youtube.com/*"/>
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
I also defined my content security policy as follows:
default-src *; font-src * 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:Dear Michael, thank you very much for helping. All statements you have in config.xml I had too. I tried your security policy and entered it in nsb appstudio’s “contentSecurityPolicy” field, but with no luck. When I am starting Openstreetmap-card, message is visible: “Geolocation error: Origin does not have permission to use Geolocation service.”.
You also must use https javascript - Origin does not have permission to use Geolocation service -- even over HTTPS - Stack Overflow
This stackoverflow message was asked 4 years ago and does not bring new knowledge . I think the problem was created by the new security conditions of apple safari mobile.