Web Applications

·

It started with Neven Mrgan's Pie Guy, for me: an iPhone game, written in HTML5 and Javascript, that completely bypassed the App Store. Instead, it's installed by visiting a web page and selecting "Add to Home Screen" in Mobile Safari.

Andy Baio said

Neven Mrgan's Pie Guy, impressive web game for the iPhone (installed from a webpage, swipe controls, and works offline).

Neven Mrgan said

There’s no easier way to get an app than by installing it right from its website - that’s right, easier than the App Store. One tap and you’re set. Because it’s a web app, see. Not one of those where you need to be online either - once you add Pie Guy to your home screen, it’ll run even when you’re not connected to the Internet. And of course, your game will be saved to a local database.

It wasn't the first self-contained web application that worked offline using HTML5, but it made it obvious that this was a powerful way to deliver applications.

You don't have to pay $99 to develop applications, you don't have to wait for App Store approval, updates are immediate, applications work cross-platform and offline, and you have access to most of the features that native applications do (geolocation, database storage, file access, multi-touch, accelerometer, etc).

Platforms

Browsers based on either WebKit (Google Chrome, Safari, Fluid, Mobile Safari, Android), Gecko (Firefox, Fennec) or Presto (Opera) will all have support for the application-related features of HTML5.

Most of these browsers also provide a way to install a web application locally:

System Installing a web application
Mobile Safari (iPhone) "Add to Home Screen"
Google Chrome "Create Application Shortcut"
Firefox + Prism "Convert Website to Application"
Fluid (OS X) "Create a Site Specific Browser"

Notes: Chrome doesn't yet create Application Shortcuts on OS X; Prism looks for <link rel="webapp"> as a pointer to a ready-bundled webapp, but doesn't yet allow these to be installed

Standards

Applications work offline by specifying which files should be cached, using a manifest file.

The installed application's icon is specified using HTML5's <link rel="icon" sizes="..."> (Chrome) or <link rel="apple-touch-icon"> (iPhone)

The installed application's name and home URL are specified using HTML5's <meta name="application-name"> and <meta name="application-url"> (Chromium). Google Reader uses these, and the icon specification above.

Applications store data in a relational database using HTML5's SQL API and SQLite.

Applications can draw to the screen using plain HTML + CSS, with SVG, or with HTML5's Canvas (and soon in 3D using WebGL or O3D).

Related platforms