Mobile Safari Debugging

One of the biggest challenges with developing mobile web applications is the ability to debug them.  In general the work the same as the desktop browsers and you can use their development tools.  But other times it can be a true nightmare when something works everywhere except on the mobile platform.

Fortunately Apple now supports debugging of Mobile Safari on iOS6  through the debugger provided on the Safari 6.0 (Mac Only) browser.

  1. On the device, go to Settings -> Safari -> Advanced and enable Web Inspector
  2. On the Mac, go to Safari -> Preferences -> Advanced and enable “Show Develop menu in the menu bar”
  3. Physically attach the device to the Mac.  A device menu will appear under the Develop menu on Safari.
  4. Select your device and begin debugging.

More detailed versions can be found here:

 

iScroll Input Button Broken

In our Mobile Web Applications we use iScroll to provide scrolling behavior.  The way it works is that iScroll takes all of the touch(mouse) events and converts them in to scrolling actions.

Unfortunately there is a problem with this when including some other controls that are also expecting to process the touch events.  In my case this is the input type=”button” which does not process the onClick event.  Other html fields including input, select, and textarea also exhibit this problem.  For instance:

<input type="button" onclick="return ShowItemInfo(2,0);" value="Details">

After searching, I found a couple of solutions that appear to relate to different versions of iScroll (we are using v4.2.4) which modify onBeforeScrollStart including this one under Issue 17 on the iScroll site:

// ORIGINAL
//            onBeforeScrollStart: function(e) { e.preventDefault(); },
// FIX:     Don't prevent the events for select input, and textarea.  Allows these inputs
//          to be used on iPad. 
            onBeforeScrollStart: function(e) {
                var target = e.target;
                while (target.nodeType != 1) target = target.parentNode;
                if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                    e.preventDefault();
            },

You can also configure onBeforeScrollStart without modifying by configuring the iScroll options.  I chose not to do this because we use iScroll in many parts of the application and it seemed safer to comment iScroll and fix it in one place instead of many.

References:

http://stackoverflow.com/a/10279215/86923

Mobile Safari Home Icon – Unable to Launch App

As part of one of our web applications, we launch a separate iOS payment application on the handheld, process the payment, and then returns to the web application.  This is done by calling a special URL to launch the application with the format “app://StartPage/…”.

On Mobile Safari, everything works fine regardless of how the launch URL is opened.  It works through all of the normal methods:

  • window.open(url)
  • window.location.href = url,
  • As a link: <a href=”hybridpins1s1test:/StartPage/…”/>

However, If we do the same thing when the application was launched from a “Home Icon”, it only works if we use a link.  The other methods give an error “Cannot Open App, … The URL can’t be shown”.  This is apparently related to the popup blocker.

I found this on Stack OverFlow, Open External Website/Address From Sencha Touch Application,  to fake launching from a link.  It was originally from a post on the Sencha site: window.open() from toolbar button opens window, from list item a new tab??.

Ext.util.openLink = function(href) { 
  var link = document.createElement('a');
  link.setAttribute('href', href);
  link.setAttribute('target','_blank');
  var clickevent = document.createEvent('Event');
  clickevent.initEvent('click', true, false);
  link.dispatchEvent(clickevent);
 return false;
}