Latest iPhone Software supports full-screen Web apps

***AppleInsider*** · 10-03-2008, 12:42 PM

One unpublicized feature introduced by Apple's latest iPhone software updates is the ability to save Web apps to the home screen and have them launch in full-screen mode without the Safari wrapper, essentially mimicking the experience of a native app.

Clancy, an AppleInsider reader who brought the matter to our attention, believes the undocumented feature arrived as part of the most recent iPhone Software 2.1 update. He notes that the capability is only present in Web applications specifically authored to include the full-screen code.

To illustrate the feature, he's created a demo application for iPhone users to try out. In order to trigger the full-screen mode, follow these steps:
Load the demo app in Safari on your iPhoneHit the "+" button at the base of the Safari appSelect "Add to Home Screen"Save the App to the Home ScreenTap the icon that was just saved to your Home ScreenThe demo App should load in full screen without the Safari wrapper.
Once the app is loaded in full-screen, it behaves just like a native app acquired from the App Store, though it may perform slightly slower as all the resources and interface elements are being downloaded in real-time over the Internet.

You can even pull the interface down (screenshot, below) like a native app without the Safari interface coming into play.

Saving a Web app to the Home Screen

Steps to prep a Web app to launch as a full-screen app.

Launching a Web app in full-screen mode

Steps to prep a Web app to launch as a full-screen app.

[ View this article at AppleInsider.com ]

palegolas · 10-03-2008, 12:49 PM

Nice. Sometimes web-apps are simply more stable and makes more sense than the native apps. All native iPhone apps I've tried so far have crash bugs. The Safari doesn't crash as often.

fabsgwu · 10-03-2008, 01:07 PM

Quote:

Originally Posted by palegolas

Nice. Sometimes web-apps are simply more stable and makes more sense than the native apps. All native iPhone apps I've tried so far have crash bugs. The Safari doesn't crash as often.

If you have any apps left over from the 2.0.1 or 2.0.2 days, sometimes its best to delete them and do a fresh install. That has solved a great deal of my crashing problems.

mxpx5678 · 10-03-2008, 01:25 PM

Anyone think there is still a chance they would let you have offline web apps? This would be a good way to make use of those.

Galley · 10-03-2008, 01:34 PM

Quote:

Originally Posted by mxpx5678

Anyone think there is still a chance they would let you have offline web apps? This would be a good way to make use of those.

Kiwi, a Wikipedia app, allows you to store content for offline viewing.

jfischetti · 10-03-2008, 01:53 PM

This is a cool feature.

Can anyone share the code that allows the pages to act like the demo.

solipsism · 10-03-2008, 02:01 PM

Why isn't Apple's own Web Apps page for the iPhone not formatted for the iPhone.

jaimecham · 10-03-2008, 02:03 PM

Gmail Chat and Meebo work pretty well this way, going so far as to have very nice icons for the homescreen.

rdepom · 10-03-2008, 02:04 PM

This was in 2.0 and was dadvertised in the SDK intro videos - there was one about new features for web app developers which had stuff about css3 features etc, plus this stuff. It annoys me that no web developers seem to have found it...

Johnny Mozzarella · 10-03-2008, 02:17 PM

Quote:

Originally Posted by jfischetti

This is a cool feature.

Can anyone share the code that allows the pages to act like the demo.

I think this is the relevant code...
<meta name="apple-mobile-web-app-capable" content="yes" />

Johnny Mozzarella · 10-03-2008, 02:23 PM

Quote:

Originally Posted by rdepom

This was in 2.0 and was dadvertised in the SDK intro videos - there was one about new features for web app developers which had stuff about css3 features etc, plus this stuff. It annoys me that no web developers seem to have found it...

That's because AppStore GoldRush Fever™ hasn't subsided yet.
In a few months the novelty will wear off and developers will go back to choosing the best tool for the job.
In many cases that is a web app.
I'm glad to see this as it gives more parity between native and web apps on the iPlatform™.

Booga · 10-03-2008, 02:23 PM

I was saving web pages to the iPod Touch home screen before 2.0, and if the web page happened to be the size of an "app" it looked an awful lot like this. I'm not clear what's new here... maybe just that when you do it, Safari gets more out of your way now?

teckstud · 10-03-2008, 02:44 PM

Wha- no whines for cut 'n paste?

Lafe · 10-03-2008, 02:51 PM

Quote:

Originally Posted by teckstud

Wha- no whines for cut 'n paste?

Where's my cut and paste????

(Happy now?)

mjtomlin · 10-03-2008, 02:58 PM

Quote:

Originally Posted by Booga

I was saving web pages to the iPod Touch home screen before 2.0, and if the web page happened to be the size of an "app" it looked an awful lot like this. I'm not clear what's new here... maybe just that when you do it, Safari gets more out of your way now?

Before it would just save a link to the web page as an icon on the home screen. When clicked, it would load up the link in Safari.

This new implementation doesn't use Safari, but creates a simple self-contained application that uses a WebKit view to display the web page. This means of course, there's no Safari browser interface, such as the address bar, search field, bookmarks, etc.

Safari 4 will have the same feature, "Save as Web Application..."

Virgil-TB2 · 10-03-2008, 02:59 PM

Quote:

Originally Posted by Johnny Mozzarella

That's because AppStore GoldRush Fever™ hasn't subsided yet.
In a few months the novelty will wear off and developers will go back to choosing the best tool for the job.
In many cases that is a web app.
I'm glad to see this as it gives more parity between native and web apps on the iPlatform™.

Indeed.

At the risk of incurring the fearful wrath of the sacred developers, who are of course ALWAYS RIGHT ... *looks around fearfully* ...

A lot of apps in the app store would be better as Web apps, most notably almost all the apps that were rejected by Apple for inclusion. The Gmail app switcher, or pretty much any new interface for Gmail, as well as Podcaster would totally work better as web apps and Apple would not be able to reject them.

mstone · 10-03-2008, 03:19 PM

I started fooling around with some iPhone web code after reading this article and discovered an interesting however completely unrelated item. The navigator.vendor property for the iPhone version of Safari reads Apple Computer, Inc. You'd think they would change that to just Apple since they dropped the Computer from their legal name.

deanburchell · 10-03-2008, 03:23 PM

Has anyone found any more examples of sites using this code?

pikey · 10-03-2008, 03:32 PM

For those of you with jailbroken phones, you can make any webclip do this by editing the plist file for the webclip, found in /private/var/mobile/Library/WebClips/ to include

<key>FullScreen</key>
<true/>

and then respringing your phone.

Johnny Mozzarella · 10-03-2008, 03:48 PM

The webapp.net Demo app looked pretty good...until I tried it in Internet Explorer 7.
Unfortunately webapp.net's CSS does not degrade nicely for IE7.

I'll be sticking with iUI.

Reaperducer · 10-03-2008, 04:48 PM

Quote:

Originally Posted by Johnny Mozzarella

I think this is the relevant code...
<meta name="apple-mobile-web-app-capable" content="yes" />

I just inserted that <meta> into the HAIF CW39 Houston Weather forecast web app and it works really well! Thanks for that.

dominik67 · 10-03-2008, 05:08 PM

Isn’t possible to publish, for downloading, in one zip file the whole source code ?

Best Regards,
Dominique.

Johnny Mozzarella · 10-03-2008, 05:19 PM

Quote:

Originally Posted by dominik67

Isn’t possible to publish, for downloading, in one zip file the whole source code ?

Best Regards,
Dominique.

The webapp.net Demo app and all source are available on their site.

However, as I mentioned above, this is only a good solution if it is only intended for use on Safari and Firefox.
It is not compatible with Internet Explorer.

Another solution that is compatible with Interent Explorer and probably a bit more polished is iUI.

mickmel · 10-03-2008, 08:06 PM

Quote:

Originally Posted by Reaperducer

I just inserted that <meta> into the HAIF CW39 Houston Weather forecast web app and it works really well! Thanks for that.

Same problem I have, though. If you click any link, it takes you out of there and drops you into a Safari page. Quite annoying.

Any way around that?

palegolas · 10-03-2008, 08:14 PM

Quote:

Originally Posted by fabsgwu

If you have any apps left over from the 2.0.1 or 2.0.2 days, sometimes its best to delete them and do a fresh install. That has solved a great deal of my crashing problems.

Thanks for the tip. I've only got new fresh apps though, and not many of them. (Two pages) There's about one crash a day (or more if I use the apps more). So I guess it's just like any computer platform with developers just getting started. They release buggy software, and optimize them over time.

**JeffDM** · 10-03-2008, 09:44 PM

Quote:

Originally Posted by Johnny Mozzarella

That's because AppStore GoldRush Fever™ hasn't subsided yet.
In a few months the novelty will wear off and developers will go back to choosing the best tool for the job.
In many cases that is a web app.
I'm glad to see this as it gives more parity between native and web apps on the iPlatform™.

Web apps already had 12 months of head start. What more could you reasonably want?

Web apps are fine in many circumstances, especially if it needs up-to-the-minute data from the internet anyway. But I would prefer a local app with local data for other circumstances, it's no fun to try to access a web app when the internet signal is weak or nonexistent, doubly so if the data is largely static.

jeffcox65 · 10-04-2008, 01:24 AM

Quote:

Originally Posted by pikey

For those of you with jailbroken phones, you can make any webclip do this by editing the plist file for the webclip, found in /private/var/mobile/Library/WebClips/ to include

<key>FullScreen</key>
<true/>

and then respringing your phone.

Every way I try to do this causes the webapp to no longer work. The icon turns to black and doesn't launch.

I've tried vi on the phone itself, I've tried copying the file to my Mac and editing it there and moving it back.

When I used vi, i got a message that said "DB_CREATE must be specified to create databases."

Is there a trick to editing this plist that I'm missing?

nlrz · 10-04-2008, 03:14 AM

Anyone know how to make an offline web app? Would only setting the http "cache-control" header to "public" work?

**melgross** · 10-04-2008, 03:37 AM

Hello to all the new people.

jbwk · 10-04-2008, 08:16 AM

Nothing undocumented here. See
https://developer.apple.com/webapps/...002051-CH3-SW2

I thought this was common knowledge? It's even possible to change the status bar style (black translucent for example)

pollarm · 10-04-2008, 12:01 PM

This is a nice idea, but unfortunately running webapps in this fullscreen mode seems to disable orientation events ... so you can't have a landscape version aswell as portrait

leorou · 10-04-2008, 12:40 PM

Quote:

Originally Posted by mickmel

Same problem I have, though. If you click any link, it takes you out of there and drops you into a Safari page. Quite annoying.

Any way around that?

That is because Apple wants people to develop Ajax Webapps or some sort of self sufficient app. I don't think there is an immediate way to avoid this.

TenoBell · 10-04-2008, 12:51 PM

Quote:

Originally Posted by mxpx5678

Anyone think there is still a chance they would let you have offline web apps? This would be a good way to make use of those.

Yes I'd read some info that Apple told developers this would be coming with Safari 4. It was likely under NDA so no one is widely talking about it.

TenoBell · 10-04-2008, 01:55 PM

Quote:

Originally Posted by solipsism

Why isn't Apple's own Web Apps page for the iPhone not formatted for the iPhone.

I agree. Apple should have a web app store designed like the native app store. The current site is difficult to navigate on the iPhone.

TenoBell · 10-04-2008, 02:02 PM

Quote:

Originally Posted by JeffDM

Web apps already had 12 months of head start. What more could you reasonably want?

I can see the point that all of the hype has shifted to native apps. I agree several of those native apps would work fine as web apps. Because many of them are just a front end UI that connect to a database.

Quote:

Web apps are fine in many circumstances, especially if it needs up-to-the-minute data from the internet anyway. But I would prefer a local app with local data for other circumstances, it's no fun to try to access a web app when the internet signal is weak or nonexistent, doubly so if the data is largely static.

From what I've read offline web apps will be a reality when webkit fully utilizes HTML 5 in Safari 4.

Haggar · 10-04-2008, 04:49 PM

Quote:

Originally Posted by Lafe

Where's my cut and paste????

(Happy now?)

Nobody needs cut and paste.

Nobody needs third party iPhone applications.

There will be no iPhone SDK.

Web apps are really, really SWEET.

Apple will not enter the cell phone market.

Balance in the universe restored.

NSCocoa · 10-05-2008, 01:23 AM

http://nscocoa.com/products

sunshine · 10-05-2008, 04:49 AM

That sounds pretty cool.

mickmel · 10-05-2008, 08:37 PM

Quote:

Originally Posted by leorou

That is because Apple wants people to develop Ajax Webapps or some sort of self sufficient app. I don't think there is an immediate way to avoid this.

I'm trying to keep my mobile sites as platform-independent as possible. I like them to work well on iPhone, but also work for Blackberry, Nokia N95, WinMo, etc. It seems like making them with more ajax will kill that compatibility.

I want the best of both worlds, please.

KDarling · 10-06-2008, 09:11 AM

Quote:

Originally Posted by mjtomlin

This new implementation doesn't use Safari, but creates a simple self-contained application that uses a WebKit view to display the web page. This means of course, there's no Safari browser interface, such as the address bar, search field, bookmarks, etc.

Self-contained application? No, that would be more like a MS .hta web app, which can actually access local files, etc.

Seems more like this meta-tag simply turns off the Safari browser chrome.

?

10-03-2008, 12:42 PM	#1
*AppleInsider* Kasper's Automated Slave Join Date: Nov 1997 Posts: 6,151	Latest iPhone Software supports full-screen Web apps One unpublicized feature introduced by Apple's latest iPhone software updates is the ability to save Web apps to the home screen and have them launch in full-screen mode without the Safari wrapper, essentially mimicking the experience of a native app. Clancy, an AppleInsider reader who brought the matter to our attention, believes the undocumented feature arrived as part of the most recent iPhone Software 2.1 update. He notes that the capability is only present in Web applications specifically authored to include the full-screen code. To illustrate the feature, he's created a demo application for iPhone users to try out. In order to trigger the full-screen mode, follow these steps: Load the demo app in Safari on your iPhoneHit the "+" button at the base of the Safari appSelect "Add to Home Screen"Save the App to the Home ScreenTap the icon that was just saved to your Home ScreenThe demo App should load in full screen without the Safari wrapper. Once the app is loaded in full-screen, it behaves just like a native app acquired from the App Store, though it may perform slightly slower as all the resources and interface elements are being downloaded in real-time over the Internet. You can even pull the interface down (screenshot, below) like a native app without the Safari interface coming into play. Saving a Web app to the Home Screen Steps to prep a Web app to launch as a full-screen app. Launching a Web app in full-screen mode Steps to prep a Web app to launch as a full-screen app. [ View this article at AppleInsider.com ]

10-03-2008, 01:25 PM	#4
mxpx5678 Registered User Join Date: Jul 2008 Posts: 2	Offline WebApps? Anyone think there is still a chance they would let you have offline web apps? This would be a good way to make use of those.

10-03-2008, 01:53 PM	#6
jfischetti Registered User Join Date: Oct 2008 Posts: 1	Code to do this function? This is a cool feature. Can anyone share the code that allows the pages to act like the demo.

10-03-2008, 02:01 PM	#7
solipsism Registered User Join Date: Apr 2006 Location: The Ansible Posts: 11,779	segue... Why isn't Apple's own Web Apps page for the iPhone not formatted for the iPhone. Do your part to clean up AppleInsider forums: User CP » Edit Ignore List » Teckstud

10-03-2008, 02:04 PM	#9
rdepom Registered User Join Date: Oct 2008 Posts: 1	Not new... This was in 2.0 and was dadvertised in the SDK intro videos - there was one about new features for web app developers which had stuff about css3 features etc, plus this stuff. It annoys me that no web developers seem to have found it...

10-03-2008, 12:49 PM	#2
palegolas Registered User Join Date: May 2005 Posts: 383	Nice. Sometimes web-apps are simply more stable and makes more sense than the native apps. All native iPhone apps I've tried so far have crash bugs. The Safari doesn't crash as often.

10-03-2008, 02:03 PM	#8
jaimecham Registered User Join Date: Sep 2008 Posts: 4	Gmail Chat and Meebo work pretty well this way, going so far as to have very nice icons for the homescreen.

10-03-2008, 02:23 PM	#12
Booga Registered User Join Date: Jun 2003 Location: Tinton Falls, NJ Posts: 702	I was saving web pages to the iPod Touch home screen before 2.0, and if the web page happened to be the size of an "app" it looked an awful lot like this. I'm not clear what's new here... maybe just that when you do it, Safari gets more out of your way now?

10-03-2008, 02:44 PM	#13
teckstud Registered User Join Date: Oct 2007 Posts: 6,115	Wha- no whines for cut 'n paste?

10-03-2008, 03:19 PM	#17
mstone Registered User Join Date: Jan 2006 Location: SoCal Posts: 930	I started fooling around with some iPhone web code after reading this article and discovered an interesting however completely unrelated item. The navigator.vendor property for the iPhone version of Safari reads Apple Computer, Inc. You'd think they would change that to just Apple since they dropped the Computer from their legal name.

10-03-2008, 03:23 PM	#18
deanburchell Registered User Join Date: Oct 2008 Posts: 1	Any other examples? Has anyone found any more examples of sites using this code?

10-03-2008, 03:32 PM	#19
pikey Registered User Join Date: Oct 2008 Posts: 1	For those of you with jailbroken phones, you can make any webclip do this by editing the plist file for the webclip, found in /private/var/mobile/Library/WebClips/ to include <key>FullScreen</key> <true/> and then respringing your phone.

10-03-2008, 03:48 PM	#20
Johnny Mozzarella Registered User Join Date: Mar 2006 Posts: 955	The webapp.net Demo app looked pretty good...until I tried it in Internet Explorer 7. Unfortunately webapp.net's CSS does not degrade nicely for IE7. I'll be sticking with iUI. Last edited by Johnny Mozzarella; 10-03-2008 at 03:59 PM..

10-03-2008, 05:08 PM	#22
dominik67 Registered User Join Date: Oct 2008 Posts: 1	About : Latest iPhone Software supports full-screen Web apps Isn’t possible to publish, for downloading, in one zip file the whole source code ? Best Regards, Dominique.

10-04-2008, 03:14 AM	#28
nlrz Registered User Join Date: Oct 2008 Posts: 1	offline web app Anyone know how to make an offline web app? Would only setting the http "cache-control" header to "public" work?

10-04-2008, 03:37 AM	#29
melgross Global Moderator Join Date: Sep 2004 Location: NYC Posts: 19,612	Hello to all the new people.

10-04-2008, 08:16 AM	#30
jbwk Registered User Join Date: Oct 2008 Posts: 1	Nothing undocumented Nothing undocumented here. See https://developer.apple.com/webapps/...002051-CH3-SW2 I thought this was common knowledge? It's even possible to change the status bar style (black translucent for example)

10-04-2008, 12:01 PM	#31
pollarm Registered User Join Date: Oct 2008 Posts: 1	This is a nice idea, but unfortunately running webapps in this fullscreen mode seems to disable orientation events ... so you can't have a landscape version aswell as portrait

10-05-2008, 01:23 AM	#37
NSCocoa Registered User Join Date: Oct 2008 Location: Bermuda Triangle Posts: 1	iBrowser 4 iPhone http://nscocoa.com/products http://nscocoa.mp/

10-05-2008, 04:49 AM	#38
sunshine Registered User Join Date: Oct 2007 Posts: 51	That sounds pretty cool.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode