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.
Neven Mrgan's Pie Guy, impressive web game for the iPhone (installed from a webpage, swipe controls, and works offline).
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
- Widgets are very similar to web applications, especially once they get access to HTML5 APIs, and there's a W3C Widgets specification. Apple's Dashboard, iGoogle and Opera all run widgets, some as standalone applications. "Dashboard Widgets" and "Mobile Safari Web Applications" overlap significantly in Apple's Dashcode documentation.
- Adobe Air (not HTML5)
- Microsoft Silverlight (not HTML5)