Fixing The National Rail Mobile Website For iPhones

I’ve been frustrated that the National Rail Enquiries mobile website doesn’t work properly on my Apple iPhone 4s, running iOS7, so I decided to take a look and see what is actually going on.

You can turn on debugging on your iPhone in the settings, so I turned this on, and loaded Safari on my Macbook Pro to take a look at what was actually happening.

The “Go” button on the mobile website acts as a submit button so I put a breakpoint on it to see what happened.

The event handler calls a function called setRecents, and it fails when it tries to save my recent stations to localStorage.

if (hasStorage) {
    localStorage.setItem("recentStations", recVal);
} else {
    setCookie("recentStations", recVal, 365);
}

The hasStorage global variable has a true value, allowing it to try to save to local storage, so I tried setting this to false and tried again. This time to website worked as it falls back to using cookies. So the problem is with localStorage on mobile Safari, I’m not sure why.

I then took a look to see how hasStorage was set. It was being set in the following function.

function checkStorage() {
    // Feature detect + local reference
    var storage,
    fail,
    uid;
    try {
        uid = new Date;
        (storage = window.localStorage).setItem(uid, uid);
        fail = storage.getItem(uid) != uid;
        storage.removeItem(uid);
        fail && (storage = false);
    } catch (e) {}
    if (storage) {
        hasStorage = true; //if localstorage available
    }
};

I set breakpoints through the function, reloaded and single stepped what was happening in the debugger.

The uid was correctly set to a Date object with the current date and time. The next line was where the problem occured. storage was assigned as a Storage object, but the setItem method failed. This meant that the storage variable was set, but an exception was thrown. The exception handler does nothing, so the line after was executed. This sees that storage is available, but not that it didn’t work, so sets hasStorage incorrectly to true.

The fix would be to modify the exception handler to set storage to false instead of doing nothing.

If any developers of the National Rail website are reading this, please add this line so I can use your website to plan my train journeys again using my iPhone!

The National Rail mobile website on an iPhone

All information correct at time of writing and publishing. 20th April 2014.

Faking A Fixed Background In An iOS Web App

If the lack of a fixed background image position has been bugging you when your building your HTML / CSS based iOS apps, then I thought I’d share a work around I’ve been using.

If you are creating a native app from this in XCode then you would almost certainly be embedding the web page in a UIWebView. This is where the magic works.

Create a UIImageView with your background image on, then place your UIWebView directly over this image.

In your Objective-C you need to set the UIWebView‘s background colour to clearColor and make the UIWebView opaque. If your UIWebView is called webView the following two lines of Objective-C will do this.

[webView setBackgroundColor:[UIColor clearColor]];
[webView setOpaque:NO];

Your background image should now show through the webpage and be visible as the background.

iPhone Time Bug

I seem to have fallen victim of the iPhone daylight saving time bug that has affected owners in the southern hemisphere.

Today, my recurring alarms woke me an hour early.

The time at the top of the phone is an hour ahead of the time shown in the clock app.

It would seem the iPhone has forgotten the UK is still in British Summer Time for a few more days.

Very annoying!