Table of Contents for

The Modern Web

A hosted app is one that holds all files on an external web server, usually accessible via a public URL. Essentially, a hosted app is like a website with a little extra metadata to allow app stores to index it. A hosted app isn’t installed onto a device; a shortcut is created on the device that launches a browser or embedded web view when the user decides to open the app.

Hosting a web app has the advantage of allowing you, the developer, to make updates without requiring reauthorization from a store, but the flip side is that the security risk is higher (an evil developer could smuggle in compromising code), so hosted apps generally don’t get access to restricted device APIs.

Unlike hosted apps, a packaged app contains all the assets necessary to run it, compressed (usually zipped) in a single file. All the files are installed on the device, and although the app can connect to external web services, such a connection isn’t always required. Packaging an app in this way means the store owner can review and authorize the app’s contents and grant extra permissions if the app is found to be secure; in practice, this means the developer can access restricted APIs on the device, such as those used to access the address book or text messaging functions.

Packaged apps open and shut more quickly than hosted ones because all their files are held on the user’s device, so they’re less dependent on network capabilities. But packaged app developers need to be sure to store data locally and allow it to be synced to the data server while online, which requires more development work. To help with this, you can use local storage (discussed in Chapter 6), but for more extensive offline access options, you’ll want to use AppCache, which I cover in Application Cache.

When hosted by the Chrome Web Store, the manifest file must be JSON-formatted, named manifest.json, and stored in a folder called myapp in the app’s root folder. The following annotated code shows a short example of manifest.json for the Chrome Web Store, with the bare minimum of required fields.

  {
1   "name": "App Name",
2   "description": "Short description",
3   "version": "0.1",
4   "manifest_version": 2,
5   "icons": {
      "128": "icon_128.png"
     },
6   "app": {
      "launch": {
       "web_url": "http://foo.example.com/"
     }
   }
  }

The first item 1 in the manifest is the name of your app. Next 2 is the description, which should be 132 characters (or fewer) in length and contain no HTML. The version property 3 is the custom release version of your app, which is handy for bug reporting and informing users of updates. The manifest version 4 tells the Chrome Web Store that you’re using the most up-to-date manifest format (version 1 will be phased out throughout 2013).

The icons object 5 is a list of image files that are to be displayed at different resolutions, depending on where they will be shown (such as on a device desktop or in a list of apps); here, the file icon_128.png will be used whenever a 128×128px icon is displayed. Finally, the app object 6 contains a web_url subfield, which includes the URL of the page to be displayed when your app launches.

The manifest required by the Firefox Marketplace is known as an Open Web App Manifest. As the name implies, Mozilla is hoping this format becomes a general standard for web apps, as a way to simplify the process of submitting a web app to multiple stores in the future. This manifest is usually called manifest.webapp and served with the MIME type application/x-web-app-manifest+json. Full instructions can be found in the slides of Robert Nyman’s talk “WebAPIs and Apps” listed in Appendix K.

The Open Web App Manifest file is JSON-formatted and, by design, similar to that of the Chrome Web Store. The listing here shows a minimal, annotated example.

  {
1   "name": "App Name",
2   "description": "Short description",
3   "version": "0.1",
4   "launch_path": "http://foo.example.com/",
5   "icons": {
      "128": "icon_128.png"
    }
  }

The name 1 and version 3 fields and the icons object 5 are the same as previously described for the Chrome Web Store. The description field 2 is the same too, except that its length can be up to 1024 characters. The biggest difference is the launch_path 4 field, which has the same behavior as app > launch > web_url in the Chrome manifest. No manifest version is required, although one could be added as an extension when submitting the app to the Chrome Web Store (which requires it).