launching.html

{{+bindTo:partials.standard_store_article}}

<h1>Launching Your App in the Chrome Web Store</h1>

<p class="attribution">
Written by Seth Ladd<br/>
October 2010
</p>

<p>
The Chrome Web Store is an upcoming new way to distribute and sell your
web apps. It
<a href="http://blog.chromium.org/2010/08/get-your-apps-ready-for-chrome-web.html">recently
opened up for developer preview</a>, and web app
developers are beginning to build and package their apps for the
launch of the store later this year.  We’re going to walk you through
launching an app so you have a smooth experience and are well
positioned for a successful consumer launch.
</p>

<h2 id="bootstrap">
	Bootstrap: Join the apps developer discussion group
</h2>

<p>
Chat with your peers and ask questions of the community
in the
<a href="https://groups.google.com/a/chromium.org/group/chromium-apps/topics">apps
developer discussion group</a>.
</p>

<h2 id="design-your-app">
Step One: Design your app
</h2>

<p>
Before diving into the technical details of the Chrome Web Store, it’s
important to focus first on the design of your web app.  Paying careful
attention to your target users and what goals they are trying to accomplish
will ensure you are building the right app.  Web apps are more action, or
verb, oriented than traditional websites, and successful web apps have a
targeted set of use cases in mind.
</p>

<p>
The design of your app will be influenced by your target audience, the
message you want to send, the emotions you want to evoke, the brand you
are trying to cultivate, and of course the functionality of the app itself.
Design is not just the choice of button colors, but is a holistic approach
to shaping how your users perceive and interact with your product.  A well
executed design permeates every aspect of the web app development process.
</p>

<p>
We’ve written about design principles we think are important for well executed
web apps.
<a href="https://developers.google.com/chrome/apps/articles/thinking_in_web_apps">Thinking in Web Apps</a>
lists five design principles:
</p>

<ul>
  <li>Tight focus</li>
  <li>Big screen</li>
  <li>Rich experience</li>
  <li>Beauty</li>
  <li>Speed</li>
</ul>

<p>
Web apps should be focused on doing one thing very well, with a tight
focus that helps a user accomplish a goal.  We believe "big screen" web apps
allow developers to maximize usage of modern wide screen devices, with
flexible scalable layouts that fill the available browser window.  Users have
come to expect a rich experience from their web apps, full of audio, video,
graceful transitions, graphical feedback, and access to modern features such as
geolocation.  Beautiful web apps exploit modern web standards such as CSS3 and
web fonts to present information and the design in visually stunning
ways, while never getting in the way of the functionality.  Of course, a web app
is designed with speed in mind, on both the server and the client, using local
storage, web workers, advanced caching and syncing, and CSS3 transitions and
animations.
</p>

<p>
Ideally, a user should forget they are using a browser and simply be drawn into
the web app.  You may find some design inspiration at <a href="http://lovelywebapps.blogspot.com/">Lovely Web Apps</a>.
</p>

<p>
When designing your application, remember you can assume that users will be using
Google Chrome, which means you can use any number of advanced HTML5 and CSS3 features.
</p>

<h2 id="build-your-app">
Step Two: Build your app
</h2>

<p>
The actual web app construction phase occurs once you have a handle on the
design direction for your application.  This is where the rubber hits the
road, as you build the web app and test its features.
</p>

<p>
There are many technologies to pick from, which is one of the great aspects of
the open web.  Below are some options:
</p>

<ul>
	
	<li><strong>HTML5</strong> - the family of HTML5, CSS, and JavaScript technologies powering the modern web.
		Learn more at <a href="http://html5rocks.com/">HTML5 Rocks!</a>
		and <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>.</li>
	<li><strong>Native Client</strong> - run your native C/C++ code in the browser’s sandbox!  Get started with the <a href="http://code.google.com/p/nativeclient-sdk/">Native Client SDK</a>.  (Note: this technology is still in development, but you can try it out now.)</li>
	<li><strong>Adobe Flash</strong> - probably the most widely distributed browser plug-in.</li>
	<li><strong>A mix</strong> - mix and match these technologies as best as you see fit.</li>

</ul>

<p>
Iterate quickly, gathering constant feedback from your testers and users.
If you are building a new app, release with the minimal viable product and
add features and enhancements with each iteration. The beauty of web app
development is the ease in which you can respond to customer feedback,
without a cumbersome re-deployment process.
</p>

<p>
During this phase you’ll no doubt be exploring and implementing the many HTML5
features that will help deliver a “next generation” app look and feel.  Because
the Chrome Web Store is initially targeted at Google Chrome, you can build the
app with two assumptions in mind: you have a wide array of modern HTML5 features
available, and your initial set of users will be using Google Chrome.
</p>

<p>
There are <a href="apps_vs_extensions.html#pkgVsHost">two
different types of installable web apps</a>: packaged and hosted.
Hosted web apps are regular web apps, served from web servers.  Packaged web
apps are bundled and are completely installed into the user’s browser.  You'll
decide which type of installable web app to build during this step.
Hosted web apps are most familiar to you, and packaged web apps might appeal
to you if you don’t want to run any servers or need to access the Google Chrome
extension APIs.  Regardless of type, you’ll still need a ZIP file that includes
a <a href="http://code.google.com/chrome/extensions/manifest.html">manifest file</a>
and any icons required (always a 128x128; also a 16x16 for packaged web apps).  You can find
more details in the documentation for
<a href="https://developers.google.com/chrome/apps/docs/developers_guide">hosted apps</a> and
<a href="/apps/">Chrome Apps</a>.
</p>

<p>
If your web app is using the integrated payment system
(Chrome Web Store Payments) you’ll need to build
in support for both OpenID to <a href="identify_user.html">identify
the user</a> and the Chrome Web Store Licensing API
to <a href="check_for_payment.html">see if that user
has successfully paid</a>.
</p>

<p>
We also recommend that you <a href="https://developers.google.com/chrome/chrome-frame/">add support
for Google Chrome Frame</a>, a plugin that adds Google Chrome's capabilities,
including its HTML5 features, to legacy browsers such as IE6, IE7, and IE8.
Enabling support is as simple as sending an HTTP header or adding a &lt;meta&gt; tag
to your pages.  When you support Chrome Frame, you are helping legacy browser
users access the full potential of your web app.
</p>

<h2 id="determine-how-to-monetize">
Step Three: Determine how to monetize
</h2>

<p>
It's obviously important to be able to monetize your web app.
The Chrome Web Store offers one-time payments as well as monthly
and yearly subscriptions through Chrome Web Store Payments
(which currently requires a US bank account).  Picking a price
point is up to you (and the market), and we encourage you to determine
the value proposition of the app and what it might be worth to your users.
</p>

<p>
If the Chrome Web Store Payments system does not meet your needs, you are free
to use a third-party payment processor.  You are free to monetize using
any mechanism that makes sense for your app and your users.
</p>

<p>
The Chrome Web Store also supports a free trial option. The free trial
offers a low barrier to entry and allows users to try your web app for
free.  How you distinguish between the free and paid versions is totally
up to you; the Chrome Web Store does not dictate exactly what free trial
means to your app.  Many web apps will find free trial to be a great way
to encourage users to install the app and get a feel for it before purchase.
</p>

<p>
Other monetization options include displaying ads (an option for
hosted web apps), or simply offering your web app for free.
</p>

<p>
For new web apps, don’t be afraid to try different payment options.
You are free to change the amounts or mechanisms based on feedback and
experiments.  Incorporate analytics and metrics from day one to track your
web app's usage and growth.
</p>

<p>
<a href="check_for_payment.html">Integrating with
the Chrome Web Store Payments</a> system is easy, using a simple
JSON (or Atom) REST-based service.  Requests are signed by OAuth, and you can <a href="check_for_payment.html#test">test
your integration with the Licensing API</a> using special user IDs and our
<a href="http://googlecodesamples.com/oauth_playground/">OAuth Playground</a>.
</p>

<h2 id="package-and-publish">
Step Four: Package and publish your app
</h2>

<p>
Detailed documentation is available to help you <a href="publish.html">publish
your app into the Chrome Web Store</a>.  The steps involve writing a
manifest file, zipping it up, uploading the ZIP file to the <a href="https://chrome.google.com/extensions/developer/dashboard">Chrome
Developer Dashboard</a>, and providing configuration and content about your web app.
</p>

<p>
A one-time registration fee of $5, designed to <a href="http://blog.chromium.org/2010/08/security-improvements-and-registration.html">create
better safeguards</a> against fraudulent web apps in the gallery,
is required before you publish your web app.  You must also verify
your domain with <a href="http://www.google.com/webmasters/">Google Webmaster Tools</a> in order to identify
"official" web apps in the Chrome Web Store.
</p>

<h2 id="get-your-app-noticed">
Step Five: Get your app noticed
</h2>

<p>
One of the primary goals for the Chrome Web Store is to enhance
the discoverability and distribution of your web apps.  Numerous in-store mechanisms, both curated and algorithmic,
will help users find, evaluate, purchase, and install your web app.
However, we encourage you to take a broader approach to marketing
your web app.
</p>

<p>
To start, building a consistently designed marketing site for
your web app will help ensure users notice, and learn more,
about your web app.  You will have total control over the design
and execution of this marketing site, and thus can craft the perfect
message for your current and future users.  You can deep-link to the
Chrome Web Store’s listing for your app,
leading people right to your web app.
</p>

<p>
Of course, using social media is a great way to share your web app.
Google Buzz, Twitter, and Facebook are excellent ways to encourage
your users to become followers, and your followers to become your
advocates.
</p>

<p>
The Chrome Web Store itself will offer opportunities to be <em>featured</em>,
both in storewide curated lists as well as inside of individual
categories.  Featured apps tend to get noticed, and the best way to
be featured is to build a great app that people will love and that
really highlights what the modern web is capable of.
</p>

<p>
The Chrome Web Store’s listing for your app allows you to display a few
<a href="images.html#screenshots">screenshots</a> and
a YouTube video.  Use these opportunities to show off your app,
and use the video to highlight key features and explain the use cases.
</p>

<p>
Hosting your web app in the Chrome Web Store is the primary way to
get noticed, and a broad marketing campaign can expand your message's
reach, get your app noticed, and find more users.
</p>

<h2 id="solicit-feedback">
Step Six: Solicit feedback, measure, and track your users
</h2>

<p>
Listening to users is extremely important, and we recommend that you provide
a way for users to give you feedback. Numerous services can
help you do this, from <a href="http://groups.google.com">Google Groups</a>
to community management
apps such as <a href="https://uservoice.com/">UserVoice</a> or
<a href="http://getsatisfaction.com/">Get Satisfaction</a>.  Remember that it’s not enough to
offer a place for users to voice their ideas. You should also respond and ensure
that your users feel like their voices are heard.
</p>

<p>
Tracking which features and pages of your app are actually used, where your
users are coming from, and even what screen size is most popular is very
important.  <a href="http://www.google.com/analytics">Google Analytics</a> can track a
tremendous amount of aggregate data
and provide you with the statistics you need to make informed decisions.  Note
that you can also add Google Analytics to your app's Chrome Web Store page.
</p>

<p>
A/B testing is a great way to determine which technique works best, by offering
both options to different pools of users.  For example, you could try two different
calls to action and measure which phrase leads to more conversions.
</p>

<p>
Think Vitamin has an informative article titled
<a href="http://thinkvitamin.com/web-apps/how-to-track-six-key-metrics-for-your-web-app/">How to Track Six Key Metrics for Your Web App</a>.
Metrics such as churn (percentage of customers that cancel each month),
CMRR (contracted monthly recurring revenue), and LPC (lifetime profit per customer)
are explained, including formulas and spreadsheet examples.
</p>

<p>
We recommend the "measure, iterate, listen, repeat" cycle for constant change based on real-life facts and data.	
</p>

<h2 id="pre-launch-checklist">
Pre-launch checklist
</h2>

<p>
The Chrome Web Store opens for consumers later this year.  Let's run through the preflight checklist:
</p>

<ul>
	<li>Did you join the <a href="https://groups.google.com/a/chromium.org/group/chromium-apps/topics">apps developer discussion group</a>?</li>
	<li>Did you test your web app in the <a href="http://www.chromium.org/getting-involved/dev-channel">Dev channel of Google Chrome</a>?</li>
	<li>Did you upload the ZIP file of the manifest and icons into the <a href="https://chrome.google.com/extensions/developer/dashboard">Chrome Developer Dashboard</a>?</li>
	<li>Did you verify your domain with the Google Webmaster Tools?</li>
	<li>Did you test both success and failure scenarios with the Chrome Web Store Licensing API, or whatever registration and payment systems you are using?</li>
	<li>Did you upload compelling screenshots to the store?</li>
	<li>Did you create an informative video for the store page?</li>
	<li>Did you create a marketing website for your app?</li>
	<li>Did you install an analytics package on the store’s page for your app?</li>
	<li>Did you install an analytics package in your app?</li>
	<li>Did you configure a user feedback tool?</li>
	<li>Are you tracking key metrics?</li>
	<li>Did you test what happens if a user has cookies turned off?  Or JavaScript disabled?</li>
	<li>Did you check the spelling in your app?</li>
	<li>Is your app accessible to people with disabilities?</li>
	<li>Does each action or app state have a unique URL that a user can bookmark or share?</li>
	<li>Is your web app’s favicon configured?</li>
	<li>Do you have the proper copyrights?</li>
	<li>Is your web app’s 404 page configured?</li>
	<li>Did you add support for <a href="https://developers.google.com/chrome/chrome-frame/">Chrome Frame</a>?</li>
</ul>

<p>
<a href="http://launchlist.net/">Launchlist</a> has as even longer checklist for a successful web app launch.	
</p>

<h2 id="launch">
Launch!
</h2>

<p>
You can upload your web app into the Chrome Web Store today.  It's the perfect time
to test and experiment before the consumer release.
</p>

<p>
We hope this post helps you get started with the Chrome Web Store.  For more
information, read about
<a href="https://developers.google.com/chrome/apps/articles/thinking_in_web_apps">web app design
principles</a>, check out the <a href="faq.html">Chrome
Web Store FAQ</a>, and browse our <a href="overview.html">developer
documentation</a>.  We look forward to seeing your app in the store!
</p>


{{/partials.standard_store_article}}