Safari Punch-out (And A Possible Solution!) with Web Applications in MobileIron 7.0.3

So about 4 hours after an enthusiastic post welcoming it I'm back to report the first (major) issue. Unfortunately it's a bit of a showstopper.

When you deploy a web application via MobileIron rather than opening that web application in Safari it instead opens the application in a browser of MobileIrons own making. For 90% of things this isn't an issue and the screen layout, not having a tonne of tabs visible, shortcuts, menu bar, etc is certainly a visual improvement that the somewhat cluttered view you get in Apps@Work which uses Safari.

This screenshot from within the MobileIron browser looking at the html5test.com website shows that it's basically wrapping Safari;

This is the same number Safari (iOS) scored when I ran the test. You'll notice how clean the top of the image is - maximum space for the web application.

However the issue is that as it's not Safari it's possible that links within the Web Apps will punch out into Safari when the users touch them. Where the system requires a login they will then have to authenticate again.

It's not easy to create a link which punches out ... I would suspect 99% of links will be unaffected. However when the users hit that 1% the effect - to say the least - is jarring.

So how do you solve this? Well the bad news is there is no real solution other than re-writing your application. We do, however, have a workaround: why not just punch out to Safari at the beginning?

Here's the code you'll need to host on a website to punch out (both in the body of a HTML page);

(div id="foz" data-href="http://www.google.com">

(script>
document.getElementById("foz").addEventListener("click", function(evt) {
    var a = document.createElement('a');
    a.setAttribute("href", this.getAttribute("data-href"));
    a.setAttribute("target", "_blank");

    var dispatch = document.createEvent("HTMLEvents");
    dispatch.initEvent("click", true, true);
    a.dispatchEvent(dispatch);
}, false);
(/script>

You'll need to replace ( with the proper bracket - I can't get Blogger to render the tags!

This code comes courtesy of stackoverflow.com (follow the link).

I tried a large number of ways to punch out from the MobileIron app and this was the first one I found that worked. There might be others but I tried all the common ones I could think of/ find!