Comments on: iPhone Webapps 101: Getting Safari out of the way

By: Niels Leenheer

Niels Leenheer — Wed, 23 Sep 2009 08:18:25 +0000

@Teye and @Ryan:
A full screen iPhone webapp can only be a single web page. Any link you try to open will launch Safari instead of replacing the current page.

The most common way to solve this would be use an AJAX call to fetch the information you want to show it on the current page. Most libraries that help with iPhone development such as iUI use this technique. My own webapp is also a single HTML page which loads additional information using AJAX.

By: Ryan

Ryan — Wed, 23 Sep 2009 08:06:54 +0000

On my first web-app that I am building I notice that whenever I click one of my buttons that should load the content in the current web-app, it instead opens the link in safari and ruining the whole point of making it a web-app. Any suggestions? Each link is currently the simple style of:

By: Teye

Teye — Wed, 23 Sep 2009 07:04:04 +0000

Hi!

When I add my application to the main screen and open it, it’s fine. But when I click a link in the screen it opens a new “window” in safari, and the complete layout is ruined again. I make use of the iwebkit.

Anybody a clue what I do wrong?

By: Chris

Chris — Mon, 21 Sep 2009 14:47:07 +0000

Possibly the dimming I’m seeing is because my webapp has a canvas covering the whole screen, running code written in processing.js …?

By: Nate

Nate — Tue, 15 Sep 2009 23:52:06 +0000

This will swap out your status bar with the black version.

By: Niels Leenheer

Niels Leenheer — Tue, 15 Sep 2009 08:33:02 +0000

I have not experienced the first issue you mentioned. Regarding the second issue. Being able to drag the whole app, including toolbars and other interface elements is something that I also ran into. I use a very similar trick to prevent it.

document.body.addEventListener('touchmove', function(e) {
    e.preventDefault();
});

Just be aware that you need to provide another means of scrolling if you want to show content that is larger than the screen will fit. I will spend some time on this issue in one of the next tutorials.

By: Chris

Chris — Mon, 14 Sep 2009 22:46:34 +0000

This is great!

One other thing that’s bothering me is that webapps seem to dim the screen when you press it, and un-dim when you release. This makes it seem like the screen is flashing on re-draw.

Any idea how to stop that?

Another one to disable is the behaviour which lets you drag a webapp up or down slightly, revealing unused canvas at top or bottom. I used a handler for document.body.ontouchmove as described here: http://ajaxian.com/archives/iphone-web-app-spin-the-bottle

cheers