Faking native iOS apps with HTML/CSS/JavaScript  MAR 09 2011

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.

Read more posts on kottke.org about:
iPad   iPhone   Matt Might   web development

this is kottke.org

   Front page
   About + contact
   Site archives

You can follow kottke.org on Twitter, Facebook, Tumblr, Feedly, or RSS.

Ad from The Deck

We Work Remotely

 

Enginehosting

Hosting provided EngineHosting