WKWebView vs UIWebView

[SamJWeissman]

mapbox-gl-js version:

Question

Currently using MapboxGL (0.50.0) within a Cordova (8.1.2) app ( I understand that using the iOS SDK is probably the best option, but due to time constraints and limited resources, we're trying to get one codebase to work across multiple environments for now ). The current iOS platform version is 4.5.5.

Will start by saying that MapboxGL is working spectacularly in browser, and Android. It had also been working great in UIWebView on iOS.

Unfortunately, after getting off of UIWebView in favor of WKWebView, the map loads but does not include any of the styles/details/terrain/etc. IE: The continents are rendered but no relevant information shows.

Note: We're not using any fancy/custom styles. Have tried the basic template, and streets/v10.

The app is loaded via file:// ... I know there are some known issues with XHR requests in WKWebView (as a result I am using https://github.com/oracle/cordova-plugin-wkwebview-file-xhr ). I'm not sure if there's something going on there that is preventing the style URL from being fetched. With that being said, I even tried hard-coding the style JSON directly into the mapbox initialization ie:

    this.map = new mapboxgl.Map({
      container: this.mapIdentifier,
      style: {...MASSIVE JSON BLOB ...},
    });

... but saw the exact same results.

If anyone on your team has seen this kind of problem or is aware of any issues between mapbox-gl and iOS WKWebView, I'd greatly appreciate any advice.

Thank you!

Links to related documentation

[mourner]

Can you show some screenshots of how Mapbox Streets look in the faulty state?

[SamJWeissman]

@mourner

Thank you in advance for looking at this!

[mourner]

@SamJWeissman also, can you try out the master branch build? Worth a shot to check if related to #7471.

[SamJWeissman]

@mourner

It looks like there is some kind of request issue going on after looking deeper into the logs. I tried swapping out the

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>

in favor of

<script src='https://chrisloer.github.io/mapbox-gl-clear-depth.js'></script> (was referenced in the Issue you linked as having bundled the fix you mentioned ) but on further inspection of the logs in both cases -- when I zoom the map, i continously get Error: "Bad Request" regardless of the Source I am using.

Will have to keep playing with this one to try and figure out what the hell is going wrong here.

That being said, I had originally been using a module bundler to install mapbox-gl, so not positive that's it either.

[SamJWeissman]

Just wanted to follow up here.

Based on some digging, I still believe this is related to how WKWebView is handling XHR requests.

As I mentioned above, I'm using a plugin to get around some of WKWebViews current limitations (https://github.com/oracle/cordova-plugin-wkwebview-file-xhr). The plugin intercepts MOST XHR requests and then handles them at the Native layer for CORS.

The issue seen here sounds like it's very similar to the one I was experiencing with Mapbox.

As a workaround, I am using Cordova InAppBrowser plugin, and Cordova Device Plugin. In my application, whenever I need to open a map, I check whether the current platform is iOS, and if it is, I open the Map inside of the InAppBrowser. Once inside the InAppBrowser, all of the maps render perfectly.

[Seeryos]

Hello,

I dig up the subject a bit but I'm facing the same problem. I tried a lot of things to make the security rules too permissive.

<preference name="AllowUntrustedCerts" value="on" />
<preference name="InterceptRemoteRequests" value="none" />
<preference name="NativeXHRLogging" value="none" />

Unfortunately, this still does not work only on iOS. In xCode, I get the following error:
ERROR: {"line":29,"column":12478,"sourceURL":"https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"}

I also tried to include this library locally but it's the rest of his calls that crash. If I resume the UIWebView same problem, probably because depreciated.

Do you have an idea ? Do you know if the subject is being resolved?

EDIT : Same app work with Leaflet API... Strange.

[seamlink-aalves]

Hello

I'm having this exact same problem.

After some investigation I see that there's a XMLHTTPRequest being mage to "https://api.mapbox.com/fonts/v1/mapbox/DIN Offc Pro Regular,Arial Unicode MS Regular/0-255.pbf?access_token=XXX" (omitted the token key which is correct on the request)gets a Bad Request error.

When I put the URL on the browser I can download the file and I get no errors.

Can you provide any assistance on this?

Thank you

[seamlink-aalves]

Hi,

Did you make changes on the web server? Today it's working fine with no changes since my previous comment.

[seamlink-aalves]

Hi,

For anyone interested I figured out what was the problem. The plugin which is used to support the XHR requests (cordova-plugin-wkwebview-file-xhr) is not updated in the NPM. If you use the latest version on github it works fine. There was a recent change to encode the URL of the request that seems to solve the problem.

Regards

[Pigsnuck]

I am still having this issue (continents rendering, but nothing else).

My plugins are as follows:

cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
cordova-plugin-wkwebview-file-xhr 2.1.4 "Cordova WKWebView File XHR Plugin"

In my config.xml, I have set the following for the XHR plugin:

<preference name="InterceptRemoteRequests" value="all" />

I get a bunch of "ERROR: {"message":"Bad Request"}" messages in the Xcode output, but I can't see what's going on in the Safari Developer tools.

Anyone have any idea how to resolve this?

[Pigsnuck]

OK, I figured it out. cordova-plugin-wkwebview-file-xhr is not correctly escaping URLs. I have forked the plugin and applied a fix for anyone else experiencing this problem.

https://github.com/Pigsnuck/cordova-plugin-wkwebview-file-xhr