How to fake a user-agent on Jquery Mobile Ajax requests in iOS fullscreen mode (using apple-mobile-web-app-capable)?

Question

I'm pulling my hair out with this one...

My app is running on jquery-mobile (1.1.1), jquery (1.7.2) and requireJS on the front end. Running the app in Mobile Safari on (ipad1+3, iOS3+5) works fine, but if I open the app through the home screen icon using

   <meta name="apple-mobile-web-app-capable" content="yes" />

all my Jquery Mobile AJAX requests to load new pages or go back/forth between pages fail. Instead the error loading page message briefly blinks before the linked to page simply gets freshly loaded, restarting my app.

I have been sitting on this for two days now and have tried all of the following:

manifest (I'm actually not using a manifest, just tried to see whether it helped)

• add network resources > didn't help

requireJS

• remove requireJS completely from my app > still doesn't work
• cache busting > didn't help

offline

• set isLocal

But I'm still stuck with pages not being loaded and the navigation breaking.

The one cause that made sense to me was in this blog post, which argued that Safari uses a different HTTP User-Agent string in fullscreen mode vs Mobile Safari. The strings passed in fullscreen seem unrecognizable resulting in only basic browser settings being expected (such as no javascript support).

The workaround (for ASP.net) posted is faking the user-agent like so:

 protected void Page_PreInit(object sender, EventArgs e) {
     if (Request.UserAgent != null && Request.UserAgent.IndexOf("AppleWebKit", StringComparison.CurrentCultureIgnoreCase) > -1) {
        this.ClientTarget = "uplevel";
        }
      }

Question:
How would I include a fix like this (~ faking the user agent) in Javascript/Jquery when iOS fullscreen mode is active (is this detectable at all)? Also I'm curious whether there are any caveats to this approach? Seems wrong...

Answer 1

If it is the problem with user-agent then it is simply impossible to solve with javascript. The user-agent cannot be changed through a javascript. It is sent to the server by the application (web browser) before a javascript is downloaded. trying any trick with javascript does not work either since it is specified in the XMLHttpRequest standard that a request must be immediately terminated if the script is trying to change any of these headers ( JQuery Ajax Request: Change User-Agent ):

Accept-Charset
Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
Connection
Content-Length
Cookie
Cookie2
Content-Transfer-Encoding
Date
Expect
Host
Keep-Alive
Origin
Referer
TE
Trailer
Transfer-Encoding
Upgrade
User-Agent
Via

My guess is that this is for security reason.

Alternative, detect the user-agent on of the request on server-side and return code that work for that specific user-agent but, of course, no one wants to do more work.

Are you sure if the user-agent is really different? I cannot think of why your own code would not work if the user-agent is different without you knowing it. The only reason may be in the third party javascript library you use.