Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Packaged apps in Google Chrome allow you to create installable HTML5 apps that users can download from the Chrome Web Store and are then available offline and launchable from within Chrome. You can configure your app to show up on the new tab “Apps” screen or in the toolbar seen in the screenshot below.
New App
Chrome Packaged apps support auto-updating when you put out new releases. If your users are signed into Chrome on multiple computers and have installed your Chrome packaged app, that same app will appear on each of those computers automatically.
Getting Started
Most web programmers grew up in the era of generating web pages using PHP, ASP.NET Web Forms or MVC. Installable HTML5 apps don’t work this way and need to be built as stand-alone HTML, CSS and JavaScript files. As you start developing your app, you can create your html files on any folder on your disk and just launch them right in the browser from disk by double clicking the HTML.
Because your app needs to behave well offline, you need to always be working off of localStorage and your app needs to be intelligent enough to know when not to try to connect to the internet to update the data in localStorage.
Your app needs to be intelligent enough to know when not to try to connect to the internet
From a development standpoint, this means you can define your object models in JavaScript including loading/storing those object models in localStorage then go back later and enhance your application with connectivity to update the data in localStorage. Designing with this basic approach in mind will also make your app launch blindingly fast as your UI won’t have to wait to connect to a remote page somewhere on the internet before displaying.
To detect online/offline state, you can check for connectivity using navigator.onLine.
if(navigator.onLine) {
//Connected!
} else {
//Not connected
}
The HTML Page
Overall the kind of HTML you can use in a Chrome packaged app is fairly typical but there is one major restriction. You can’t include any inline script in your packaged app. This will take some getting used to for most web developers that are accustomed to using HTML snippets like the one below, which will not work in a chrome packaged app.
<button onclick="alert('Hello!');">Say
Hello!</button>
Instead of including inline script, you will need to include the scripts your page needs as external references in the head tag. Because you can’t include inline script, you will need to make sure your HTML includes the necessary IDs or class references for your external script to be able to tie into.
<!DOCTYPE html> <html> <head> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script src="hello.js" type="text/javascript"></script> </head> <body> <button id="HelloButton">Say Hello!</button> </body> </html>
Your chrome packaged apps can have multiple HTML pages that the user can navigate between using relative references.
The script utilized by this HTML uses some basic jQuery to attach to the button’s click event and pop an alert box when the user clicks it.
$(document).ready(function() {
$("#HelloButton").bind("click", function() {
alert("Hello!");
});
});
Creating the Chrome Packaged App Manifest
The manifest defines the name of your application, how it is launched, and what kinds of security rights your app needs in order to function properly. You create the manifest by just creating a new text file called, “manifest.json” in the same directory as your html page.
The basic behavior of how your application behaves is defined inside of the “app” property, which defines whether or not your application will be launched in a new tab, in a popup, as an overlay on an existing page or to run in the background with no UI at all.
The permissions section defines what permissions your app needs in order to run successfully. These permissions are a mix of elevated browser permissions such as the ability to store unlimited amounts of data, or directly access the user’s clipboard and URLs of web sites your app needs to be able to access.
{
"name": "Hello Web Store",
"version": "1.0",
"manifest_version": 2,
"app": {
"launch": {
"local_path": "index.html"
}
},
"icons": {
"128": "Hello.png"
},
"offline_enabled":true,
"permissions":["unlimitedStorage",
"https://api.foursquare.com/"]
}
It is worth noting that the manifest requires your JSON be extremely strictly formatted including quotes around all of the keys. For a complete list of all of the available manifest properties, consult the chrome extensions developer site.
Loading it up in Chrome
To load your extension in chrome, launch Tools->Extensions. In the screen that appears, you will need to check the “Developer Mode” checkbox. Once you have done so, you can click the “Load unpacked extension” button and point it to your Chrome Packaged App.
Tools->Extensions
Once your packaged app has loaded, you can launch it by opening a new tab and launching it from the Chrome Apps screen. Running your application from an “unpacked” mode will allow you to change the underlying HTML/CSS files as much as you need while you develop and immediately see the results just by clicking the refresh button.
Make note of the ID letters assigned to your application on the Extensions tab. This ID is how other apps can link back to your app. For example, if you are connecting to a web service using OAuth that has a return link, you need to set the return link similar to the format below.
chrome-extension://YourChromeAppID/YourHtmlFile.html
Packaging Your App
Once you’re ready to distribute your app, you can package your extension as a CRX file by clicking the “Pack extension” button in the extensions tab. You can allow it to generate a private key for you the first time but it is important to keep control of your private key because you will need it later if you want to ship updates.
To submit your app to the chrome web store, you just zip up the directory, and send it into Google’s App Store submission process. Google only charges $5 for an app store submission and you could get your app in front of thousands of users in minutes!
About the Author:
David Talbot has over 14 years of experience in the software industry with experience ranging from license plate recognition using neural networks to television set-top boxes to highly scalable web applications. His main focus is building rich user interface web applications on the .NET platform. He is also the author of Applied ADO.NET and numerous articles on technology.
