Table of Contents
Google Chrome is an important delivery mechanism for web content. As of September 2014, Chrome had a 59.6% browser market share.
It’s not just the browser; it’s also Chrome OS, the operating system that runs on Chromebooks. According to Gartner, 5.2 million units are expected to be sold this year. The demand for Chromebooks is rising, particularly in the US education market.
Source: w3schools.com, 2014
The Google Chrome Web Store is a great place to get exposure for your applications because anyone who uses the Google Chrome browser can install these apps.
There are different types of installable Chrome apps: extensions, packaged apps, and hosted apps.
- Hosted web apps are regular web applications, served from a web server.
- Packaged web apps are bundled and are completely installed in Chrome browsers with access to special Chrome APIs
- Extensions are small apps that can modify and enhance the functionality of the Chrome browser.
Today we will examine how to build a hosted app in detail; the process of creating a packaged Chrome app or extension is much different and maybe covered in future posts. If you are interested in building packaged apps or Chrome extensions, please see the following resources that have been created by the Sencha team:
- App Inspector for Sencha Touch and Ext JS Developers
- Debugging Your Apps with Google Chrome and Sencha
Let’s take a look at the steps you’ll need to follow to package your Ext JS app for Google Chrome.
- Ext JS 5 and Sencha Cmd
- An Ext JS application originally generated with Sencha Cmd
- A Google account, which will be used as a developer account to access your apps
- One icon for the Google Chrome Web Store (128×128 pixel PNG)
- Artwork, which will be used to feature the app in the Web Store:
- 440×280 PNG used as a tile in the search results
- At least one 1280×800 PNG screenshot of the app
- Access to a web server (hosted apps require a network connection; load the application from a whitelisted url).
For demo purposes, I’ve created a simple Ext JS 5 todo application. The namespace of my app is called: ExtTodo. This application was originally generated with Sencha Cmd 5.
I’m sharing this example in my GitHub repository.
Here are the steps:
1. Disable the image slicer
By default, the build process enables the image slicer to create fallback images for legacy browsers. Google Chrome is a modern browser, so we don’t need fallback images. Therefore, we’ll disable the slicer to reduce the build time and minimize our production output.
Open ~/exttodo/.sencha/app/sencha.cfg and then add the following under the namespace:
# Skip the image slice process
2. Build with Sencha Cmd
After disabling the image slicer, let’s create a production build. Run this command from the application folder:
sencha app build production
The build process creates a single, compressed .js file containing everything needed to run your application. It contains all Sencha Ext JS classes that are used as well as all of your own custom application code. The build process will also create a minified stylesheet for production, which contains the framework theme and maybe custom styling.
3. Verify your build
With your file explorer, browse to the build/production/MyApp folder, to locate the exttodo application (e.g. ~/exttodo/build/production/ExtTodo).
Notice the following file structure:
- app.js – the single minified JS file
- app.json – contains app specific settings
- index.html – landing page for our application
- resources/ – folder that contains all of the configured images, fonts and other resources for our application
- ExtTodo-all.css – the CSS theme
4. Upload the build to your webserver
Now, it’s time to upload your build to a web server.
Note: If you don’t have a web server and just want to test how to create a Google Chrome app with Ext JS and Sencha Cmd, you can skip this step. Later, in the manifest file, link to the build/production/MyApp folder on localhost.
5. Create a new empty folder
Create the googlechromeapp folder:
This folder will contain Chrome Webstore assets and a manifest file.
6. Copy the icon and artwork into the root of the googlechromeapp/MyApp folder
7. Create a manifest file
It’s actually very easy to create hosted Google Chrome apps. All you need is a manifest.json file, which you put in the root of the ~/exttodo/googlechromeapp/MyApp folder. It looks like the following:
“description”: “A simple Ext JS 5 Todo app”,
Note: In this example, I am setting the app url to localhost, just for testing purposes. As soon as I am hosting my web application online, I can set it to http://mydomain.com/mychromeapp/
Let’s review each of the important properties in this JSON configuration object:
- name – Required. The name of the application; this is displayed in the store and in Chrome’s launcher.
- description – Recommended. A brief description of the app.
- version – Required. The version of this metadata; each time you update the metadata this number must be incremented.
- manifest_version – Required. The current supported manifest version is 2.
- app – Required. The remote URLs that the app uses.
- urls – Recommended. Array with the URLs for the pages in the hosted app.
- launch – Required. Specifies what happens when the user launches the app.
- web_url – Required. Specifies the launch page as an absolute URL.
- icons – Recommended. Specifies the icon shown in the launcher.
For a complete overview see, the Google Developer Guide on Installable Web Apps.
8. Create a zip file
Now, create a zip file from the contents of ~/exttodo/googlechromeapp/MyApp. the manifest.json and the icon, those files should be the root of your zip file.
9. Upload the file to the Google Dashboard
Open the Google dashboard (you need to be logged in to Google).
Click the Add new item button, and accept the Google web store agreement.
Next, click the Choose file button, and select the ~/exttodo/googlechromeapp/MyApp/myapp.zip file. This action
will upload the package.
After uploading, it will forward you to the set up publish screen, where you can write a detailed app store description and showcase app screenshots, etc. We don’t need to do this for our tutorial.
Click Save draft and return to dashboard button.
Note:If you want to publish the web app or want to sell applications through the app store, then there are some additional steps. See the last steps in this guide, Publishing Your App.
Basically, you will need to fill out the publish settings. Publishing apps requires a one-time registration fee of $5, to make sure developers upload serious web applications.
If your hosted app is listed in the Chrome Web Store, you must prove that you control each domain specified in this field.
10. Test it
To test your application running as a Chrome App, go to the Chrome settings. See the screenshot below.
Open the Extensions tab.
Check the Developer Mode checkbox, and click the Pack extension button.
The pop-up window below will be shown. For the Extension root directory, select ~/exttodo/googlechromeapp/MyApp folder. Then click the Pack extension button.
This will download two files. MyApp.pem and MyApp.crx. MyApp.pem is a file with a secure key. You need to save this file, outside the googlechromeapp/MyApp/ folder.
I moved the MyApp.crx, which is the app launch file, into the ~/exttodo/googlechromeApp/MyApp/ folder.
After that, press the Load unpacked extension button.
In the next popup window, select the ~/exttodo/googlechromeapp/MyApp folder. Then, the app icon will show up in the extensions list.
To test the hosted application, open a new tab in Google Chrome, and select the apps button (or type the following url: chrome://apps). The 128×128 app icon will be visible and this will launch my extodo app.
Google Chrome is an app platform worth looking at because many people are using Google Chrome as their favorite browser. Ext JS 5 helps you build powerful applications, and because Chrome apps are web applications, we can use this platform to get exposure. There are different types of Chrome apps you can build, such as packaged (offline) Chrome Apps, Chrome browser extensions (to enhance browser functionality), and hosted web applications. In this tutorial, I’ve demonstrated how developers can create hosted Chrome applications in a few easy steps.
What kind of Chrome Apps are you building? Let me know in the comments section below.
This is a good technique if you use distilled or softened water to make your
caffeine to use. Only add a small crunch of salt for the pan after brewing.
I am amature in Chrome app development but I really found this article very useful and will definitely follow up the steps you’ve shared and build a complete app very soon. Thanks a lot for writing such an informative post.
Tutuapp apk is a third-party app store for Android & iOS (iPhone/iPad) that allows you installing thousands of apps and games for free. You can download Tutuapp for ios and also tutuapp vip for android
Emily Grace says
Great content thanks for sharing.
Classic Turf says
I like your content.