iPad user agent change migrating from Cordova

Update: I’ve cross-posted this on the Capacitor GitHub Discussions.


Hi All, :wave:

We’re currently migrating from Cordova to Capacitor and have run into some issues regarding the iPad user agent.

As you might know, since iOS 13 Safari/WKWebView on iPad has defaulted to “desktop browsing” mode if Safari is full-screen. It does this by using a Macintosh user agent string to make web servers and web sites/apps think that a desktop browser is being used.

Allow me to share some user agent string examples from an iPad 5th generation on iOS 13.4.

Here is a user agent string for Safari when it’s in full-screen mode. It uses a Macintosh user agent string to signify “desktop browsing” mode:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15

Here is a user agent string for Safari when it’s in Slide Over/multi-tasking/non-full-screen mode. This is what it would have been similar to pre-iOS 13. It contains iPad/iOS-specific values that would signify “mobile browsing” mode. One use is for requesting the mobile version of a website:
Mozilla/5.0 (iPad; CPU OS 13_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Mobile/15E148 Safari/604.1

For some reason, with Cordova (using cordova-ios 5.1.1, cordova-plugin-ionic-webview 4.0.0) the user agent string on iOS 13 and 14 still uses the pre-iOS 13-style user agent string. Looking at source code I was not able to determine in the time that I spent doing so how the user agent string gets set to this value vs. the WKWebView default. It looks like this:
Mozilla/5.0 (iPad; CPU OS 13_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

With Capacitor (using 2.4.5 but also tried the v3 beta) the user agent string now behaves more like Safari does in using a Macintosh user agent string (but it’s not exactly the same). It matches the default WKWebView user agent string if one wasn’t using Capacitor:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko)

We use some JavaScript libraries that internally perform user agent sniffing. Some of this is done to determine runtime environment capabilities for the library. I know that feature detection is a preferred methodology, but this is third-party library code that’s unlikely to be updated for this issue.

Other sniffing is done by analytics/error tracking libraries to know what types of devices our users are using (for example, iPhone vs. iPad, iOS version, etc.). I’m not sure what Web API alternatives there are to using the user agent string for this info and have yet to research what these libraries have done or plan to do to address it.

The way forward is clearly for us and other JavaScript libraries to embrace the lack of an iPad-specific user agent string, but I’m not sure we’re ready to make that jump right now during our Cordova to Capacitor migration given the constraints we have and the amount of effort we’ve already spent on migrating.

I know that Capacitor has the ability to override or append the user agent string. I don’t think we’d want to override it at code/build-time because we wouldn’t know for ios if it should be iPhone or iPad. Given that, if we appended something I’m not sure what we would append.

It appears that WKWebView has an API that can be used to force “mobile browsing” mode:

However, Capacitor doesn’t provide an API for us to set that. Is there a way to configure the WebView outside of the Capacitor config file?

Do folks think this could be added as a feature to Capacitor? Should I open an issue on the Capacitor GitHub?

Has anyone else had to deal with this issue?

Thanks much! :grinning:

Kevin

See the linked GitHub Discussion for the resolution. :grinning:

Thanks!

Kevin