Faking native iOS apps with HTML/CSS/JavaScript

Matt Might has a nice tutorial on how to make mobile web apps look like native iOS apps using HTML, CSS, and JavaScript.

If you a flick a web app past the bottom or top of the page, the page itself gets elastically tugged away from the URL bar or the button bar (or the bottom/top of the screen if it’s in full-screen mode).

This behavior is another giveaway that your app isn’t native, and it’s rarely the behavior you want in a native app.

To stop this behavior, capture touchmove events on the document in JavaScript and cancel them. You can do this by adding a handler to the body tag, and invoking the preventDefault method on the event object.

Huh, you can even do “pull to refresh” in JavaScript.

One big advantage of native apps that cannot be addressed by HTML/CSS/JS is the browser interface itself. The Gmail web interface is fantastic, but every time I open a link in my email, the browser goes through its elaborate new window opening process. And then when I want to go back to my email, I have to touch the windows button, close the current window, and then click back on the mail window. The whole process is too inefficient and slow compared to the same process in a native app: no starting browser animation process and one touch to get back to what you’re doing. If Apple addressed this issue — say by making it possible for a web app to “open” a sub-browser with different open/close interactions instead of a full-fledged new window — using web apps would be less of a pain in the ass.

• iPad
• iPhone
• Matt Might
• web development