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

kottke.org

Front page
About + contact
Site archives

Subscribe

Follow kottke.org on Twitter

Follow kottke.org on Tumblr

Like kottke.org on Facebook

Subscribe to the RSS feed

Advertisement

Ads by The Deck

Support kottke.org shop at Amazon

And more at Amazon.com

Looking for work?

More at We Work Remotely

Kottke @ Quarterly

Subscribe to Quarterly and get a real-life mailing from Jason every three months.

 

Enginehosting

Hosting provided EngineHosting