Category Archives: Mobility

Three Steps to a Fullscreen Web App on iOS Safari

Intro

When the iPhone concept started taking shape at Apple, installed apps were not given much consideration. No plan existed for an installed app marketplace because the WebKit-based iOS Safari mobile browser would be able to do all the work,* thus allowing web apps to be written in a unified standard. And that unified standard would be platform-independent; it would also never need a software update.

* WebKit is the code-base for the DOM and layout rendering engines in all versions of Safari, Chrome, Android’s “anonymous” default browser (it’s even going to be powering your cable box in the coming years).

The application would be served over the network in realtime, from static html files, eliminating the need to push software updates to users, and providing a unified interface through an open-source standard architecture — HTML, CSS, and JavaScript. The “web stack” can run an application entirely in the browser, without the need for server side programming. And WebKit’s HTML5 features eliminate the need for Flash or other browser plug-ins.

There are a lot of other cool tricks you can employ once you have users accessing your web app from their home screen. E.g., display a static image as a loading screen while Safari downloads assets, renders the layout, and processes JavaScript).

The Process

Listed in detail below, these three steps are as follows:

  1. Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.
  2. Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.
  3. Suggest users add your web app to their home screen.

STEP 1: Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.

<meta name="apple-mobile-web-app-capable" content="yes" />
When users are visiting your web app from within Safari mobile, they can choose to bookmark it and add it to their iOS home screen. Using the aforementioned meta tag will remove the bottom browser chrome, but only when users visit your web app via their home screen shortcut. This has been a feature since iOS 2.1 and the official Apple documentation on this is available in Apple’s Safari Developer Library.

STEP 2: Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
No one’s yet discovered a means of removing the iOS status bar while running Safari mobile. Even step one (when fully implemented) won’t do the trick. The only workaround is to use the “apple-mobile-web-app-status-bar-style” with a very specific “black-translucent” setting.

When used with trick #1, this meta tag will force the status bar and browser into separate layer depths — the background of the status bar is set to black, but with only a 50% opacity. So, technically, you’ve got a full screen, but you have to live with the semi-opaque status bar on top of your web pages.

The other two valid values are “default” and “black”, but neither of these create the layering effect like “black-translucent” does.

EXAMPLE: I’ve tried it out on a weather app I’m buildingremember to add the home screen shortcut and launch the web app from there.

STEP 3: Suggest users add your web app to their home screen.

So, we want people to use our web apps in full screen mode. This means getting them to add a shortcut on their home screen and launching it from there. If only there were a relatively pain-free way to do this. Fortunately, JavaScript can be used to check and see if an icon already exists on the home screen and — if it’s not there — suggest they add it.

Enter the “Mobile Bookmark Bubble” project. A number of volunteer developers have collaborated to build a small JavaScript kit that does exactly that. On the difficulty scale, I’d say it’s a little more tricky than adding a jQuery plugin — in other words, it’s something most Flash developers should be able to handle. ;)

Conclusion

This method will allow users to experience your web site in full screen mode with no visible browser chrome. Unfortunately, we are dependent on the user to make this happen. If they do follow through, we should encourage them to keep the icon on their home screen. This means we should give them some good icons and make sure they’re right for the phone and easily recognizable. I’ll cover that in another post.

DVR Powered by WebKit

ARRIS Group, Inc. has released their Moxi 2.0 DVR software and it’s got a WebKit build powering its interface. With browsers showing up in hardware appliances we’re fast-approaching the day when the term “web developer” may become an anachronism, supplanted as the web stack becomes the world’s unified user interface standard.

Moxi software release 2.0 contains an advanced HTML5 WebKit-based browser as well as support for MSO customizable application storefronts and downloadable applications.

The DVR software sounds pretty cool. It is designed to participate in a REST architecture on your LAN, interfacing with the iPad remote control app via API over HTTP.

The Moxi Web Services API provides a full featured and RESTful command and control-interface enabling authorized partners to implement functions…

via Arris reveals Moxi DVR release 2.0 with web browser, apps and iPad remote – Engadget.

The Secret JavaScript Console and Debugger in the Default Android Browser

The official Android browser is a mess. It doesn’t even have a name. It’s no wonder that Google plans to replace it with Chrome.

There’s a lot of  browser UI that looks gorgeous in Safari Mobile for iOS. But when try to see it through an Android browser, it often doesn’t even work. The problem is frequently a JavaScript issue, but there’s no documentation indicating how to determine if this is the case. You might be throwing a JS error on line 1 and you’d never know it.

Well, there’s a debugger built in to the default Android browser. In order to access it, you need to put a special instruction in the address bar, “about:debug” (you’ll receive no indication that anything happened).

Once you do this, you should notice two differences: 1) pressing the “Menu” button reveals a few new options at the end of the menu list 2) the settings panel has a bevy of new options available, a section called “Debug.”

We’re looking for one of the items in the new “Debug” section of the default Android browser’s settings: “JavaScript Console.”

The JavaScript console will show you if your JS is erring out, where it’s doing so, and also allow you to write a little debug code.