Latest iPhone Software supports full-screen Web apps

Posted:
in iPhone edited January 2014
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.
«1

Comments

  • Reply 1 of 38
    palegolaspalegolas Posts: 1,274member
    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.
  • Reply 2 of 38
    Quote:
    Originally Posted by palegolas View Post


    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.
  • Reply 3 of 38
    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.
  • Reply 4 of 38
    galleygalley Posts: 971member
    Quote:
    Originally Posted by mxpx5678 View Post


    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.
  • Reply 5 of 38
    This is a cool feature.



    Can anyone share the code that allows the pages to act like the demo.
  • Reply 6 of 38
    solipsismsolipsism Posts: 25,726member
    Why isn't Apple's own Web Apps page for the iPhone not formatted for the iPhone.
  • Reply 7 of 38
    Gmail Chat and Meebo work pretty well this way, going so far as to have very nice icons for the homescreen.
  • Reply 8 of 38
    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...
  • Reply 9 of 38
    Quote:
    Originally Posted by jfischetti View Post


    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" />
  • Reply 10 of 38
    Quote:
    Originally Posted by rdepom View Post


    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?.
  • Reply 11 of 38
    boogabooga Posts: 1,077member
    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?
  • Reply 12 of 38
    teckstudteckstud Posts: 6,476member
    Wha- no whines for cut 'n paste?
  • Reply 13 of 38
    lafelafe Posts: 252member
    Quote:
    Originally Posted by teckstud View Post


    Wha- no whines for cut 'n paste?



    Where's my cut and paste????



    (Happy now?)



  • Reply 14 of 38
    mjtomlinmjtomlin Posts: 1,821member
    Quote:
    Originally Posted by Booga View Post


    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..."
  • Reply 15 of 38
    virgil-tb2virgil-tb2 Posts: 1,416member
    Quote:
    Originally Posted by Johnny Mozzarella View Post


    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.
  • Reply 16 of 38
    mstonemstone Posts: 11,510member
    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.
  • Reply 17 of 38
    Has anyone found any more examples of sites using this code?
  • Reply 18 of 38
    pikeypikey Posts: 1member
    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



    \t<key>FullScreen</key>

    \t<true/>




    and then respringing your phone.
  • Reply 19 of 38
    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.
  • Reply 20 of 38
    Quote:
    Originally Posted by Johnny Mozzarella View Post


    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.
Sign In or Register to comment.