Home / Social Media / Hosted Apps and Packaged Apps of Chrome

Hosted Apps and Packaged Apps of Chrome

Google chrome offers you the option of publishing your app in two ways-hosted or packaged. Sometimes it’s hard to decide which one you need to publish. We’ll as the differences between them, so that you can make the right choice for your app.


What are apps?

In the context of chrome and the chrome web store, an app is an application that you run inside your browser with a dedicated user interface and user interaction. They’re also known as installable web apps, and they’re essentially a way of making chrome treat certain web sites like apps.

As we are already aware by now, web apps combine the best aspects of a web site and a simple desktop application. A web app is much more rich and interactive than a web site, but less cumbersome and monolithic then a desktop application. Many installable web apps are hosted apps-normal web sites with a bit of extra metadata. You can build and deploy hosted apps exactly as you would build and deploy any web app, using any server-side or client-side technology you prefer. The only difference is that you must provide a small manifest file that describes the app. More on that later.



If you want your app to work especially well offline or to be tightly integrated with the Google chrome browser, you can create a Packaged app. A packaged app is just a web app that a user downloads. These apps have the option of using the Google chrome Extension APIs, allowing them to change the way chrome behaves or looks.



Hosted apps

If you already have a web app and are unwilling to tweak around with it, you can just publish it as a hosted app. A hosted app requires a CRX file that contains metadata describing the app. The CRX file for a hosted app must contain an icon and a manifest that has details about how the app should function. Do note, however, that a hosted app has no access to the files inside its CRX file.




The manifest is a file named manifest.json that contains important information about the web app. we’ve covered more on Manifest in the next chapter. The following code is an example of a manifest:

  • {
  • “name”: “Great App Name”’
  • “description”: “Pithy description (132 characters or less, no HTML)”,
  • “version”: “”,
  • “icons”:{
  • “128”: “icon_128.png”
  • },
  • “app”: {
  • “urls”:  [
  • http://mysbdomain.example.com/
  • ]’
  • “launch”:  {
  • “web_url”:  http://mysubdomain.example.com/
  • }
  • }
  • }

For details about this example manifest, see the store’s Getting started tutorial:





App icon

You must provide a 128×128-pixel app icon image in the ZIP file of your app. Some requirements for the image:

    The actual icon size should be 96×96 (for square icons); an additional 16 pixels per side should be transparent padding, adding up to 128×128 total image size.

 The image must be in PNG format.

 To make sure your icon looks good, preview your app’s listing in the chrome web store as well as in the New Tab page. For help on designing icons, see the “APP icon” section of the Supplying Images page:



Localization files

Unless your app is strictly local in scope, you should internationalize and localize it. Internationalization (or il8n) is the process of making it easy to adapt your app to various languages and regions. You can then localize your app-translate and otherwise adapt it so that it works well in a particular locale.

     Even if you don’t translate your app, you might want to display different information in the store for different locales. You can do this by modifying the manifest and providing localization files. Details are in the internationalization documentation:




It’s obviously easy to update a hosted app-just update your web server-but it’s equally easy to update a packaged app. you just upload the updated ZIP file for your app to the dashboard, and the store and chrome take care of distributing the new version.


Background processing

Both hosted and packaged apps can perform actions in the background, using a background page or window. They can even request that chrome start up early and not exit unless the user explicitly quits the browser.

The details of how you implement this capability depend on whether you are writing a hosted or packaged app. For more information, see:

http://code.google.com/chrome/apps/docs/background.html (hosted apps)

http://code.google.com/chrome/extensions/background_pages.html (packaged apps)


Choosing between hosted and packaged apps

This section gives some tips to help you decide which type of app is right for you.

  If you already have a web app, you don’t need to change it; you can just publish it as a hosted app. However, you might be interested in some of the advantages that packaged apps provide, such as tight integration with the browser or the ability to download the entire app before ever running it.


Hosted apps

1. Hosted apps can usually work offline with the judicious use of Application Caching, an HTML5 technology

2. If your CRX file exceeds a size of 10 MB, a hosted app becomes a better choice.

3. Use a hosted app if your existing web app uses server-side scripting to generate your pages and content, or if your app relies on form submissions and full page refreshes.

4. Hosted apps will update automatically, just by updating your server.

Packaged apps

1. Apart from ‘app’ behavior, packaged apps also provide ‘extension’ behaviour. This can be exploited to improve the experience of you apps and differentiate from similar products.

2. Because packaged apps are on the user’s local drive, they can launch immediately, without wating for files from the web.

3. Packaged apps can run in the background, even when the user has never launched your app.

4. Apps that do not require a network connection are ideal candidates for packaged apps because the user will be able to run them offline.

Additional info

If you are still not able to make up your mind, the following additional guidelines may do the trick for you:

1. A hosted app can work in all web browsers, as long as it doesn’t depend on some unique features of particular browsers. However, because only chrome supports the chrome web store, you have the option of tailoring your app to chrome.

2. A packaged app will work only in chrome. However, you can reuse the app’s code for ordinary web apps.

3. The Licensing API lets you check Pro grammatically whether the user has paid for your app using chrome web store Payments. the Licensing API is usually used only by hosted apps because packaged apps are stored locally and could be modified to circumvent the API call.

4. There are risks in selling a packaged app. Motivated people can bypass payments for packaged apps. An alternative to consider is moving to a hosted app model with a server-side licensing check.

About NickersonCastano