Chrome Web App Development Guide
Chrome網(wǎng)頁應(yīng)用開發(fā)教程
by Stephen on February 1, 2011 in How-Tos
作者：史蒂芬
發(fā)布時間：2011年2月1日
發(fā)布源：How-Tos（OhBoard）
I launched OhBoard, my little whiteboarding app, in 10 days. I took my idea-cranking shower on December 12th, and I made my first $3.99 on December 22nd. It was only 240 hours apart. Pretty cool, huh?
我花了10天時間開發(fā)了OhBorad，這個小巧的白板應(yīng)用。12月12日，我萌生了想法，12月22日我賺到了第一筆錢3.99美金。而這一切，只花了240小時。嘿，你看看這是不是很酷呢？
I then decided to carefully craft a development guide for you. If you are planning to make a Chrome Web App, you are in luck! Because after reading this guide, you can do what I just did and start taking advantage of this huge market (10% of all Internet citizens) today!
所以在這里和大家分享一下這個開發(fā)指南。如果你打算自己做Chrome網(wǎng)頁應(yīng)用，那么你可幸運了！因為讀過這個指南后，你就能像我一樣從這個巨大的市場（10%的網(wǎng)民）中獲得收益。
Step 1: Come up with your idea
第一步：想到一個好點子
The listing on Chrome Web Store is still pretty small, nowhere near Apple’s App Store yet. So there are many things you can make.
谷歌網(wǎng)絡(luò)在線商店Chrome Web Store 的應(yīng)用數(shù)量還非常小，遠(yuǎn)遠(yuǎn)不及蘋果應(yīng)用商店。
I have a list of free, simple ideas you can consider using:
在此，我給大家支幾招：
An offline to-do list
一個線下的to-do list
A text-based calculator
一份文本計算器
A simple time tracking app
一個簡單的計時應(yīng)用
A zen-mode text editor
一個zen-mode 文本編輯器
Also, before moving on, I recommend reading this article by two Chrome developer advocates: Thinking in Web Apps.
當(dāng)然了，在此之前，我要先推薦兩位谷歌開發(fā)者的文章： Thinking in Web Apps.
Step 2: Make your app第二步：開發(fā)應(yīng)用
There are two different types of apps, hosted apps and packaged apps.一共有兩種類型的應(yīng)用：hosted apps 和 packeged apps
Hosted apps are regular web apps with a special file called manifest.json. Everything is hosted on your own server. But you have the advantage of gaining exposure on Chrome Web Store. When a user launches the app, they go straight to your site and that’s it.
Hosted apps 是一種常規(guī)的網(wǎng)頁應(yīng)用，自帶特殊文件manifest.json。所有程序均在開發(fā)者主機(jī)上運行。好處是，開發(fā)者能在谷歌在線商店上獲得推薦機(jī)會。當(dāng)用戶使用這個應(yīng)用的時候，他們就能夠直接進(jìn)入應(yīng)用主站了。
Packaged apps, on the other hand, are apps that users download from the Web Store and save into their own computer. All packaged app content are made out of HTML, CSS and JavaScript. So if you have knowledge about them, you can get started making packaged apps very easily. PS: OhBoard is a packaged app.
另一方面，用戶需要將Packaged apps從應(yīng)用商店中下載下來，存到個人電腦中使用。開發(fā)packaged app使用HTML，CSS或JavaScrip語言。因此，如果你懂得這幾種開發(fā)語言，很容易就能開發(fā)這類應(yīng)用了。注：OhBoard就是packged app。
Chrome supports all native HTML5 features. In OhBoard, I use local storage that saves all your drawing in local computer and it is available at all time. Besides, you can also take advantage of geolocation, desktop notifications, and many more.
chrome支持所有HTML5語言。OhBoard利用本地存儲將用戶所有涂鴉存儲在本地電腦中，隨時可以調(diào)用。當(dāng)然你也可以利用HTML5的地理位置定位，桌面提醒功能，等等。
Step 3: Create manifest.json第三步：創(chuàng)建 manifest.json文件
Manifest.json serves as the manual for your app. It tells Chrome the name, description, version, icon location, etc. Most importantly, it tells Chrome what page to open when a user launches the app. You can also give your app different permissions such as unlimited storage, geolocation, desktop notification, history, bookmarks, cookies and more.
Manifest.json為你的app提供人性化的幫助，它能告訴chrome名字，描述，版本，icon位置等。最重要的是，它告訴chrome用戶需要打開哪個頁面。同時，你也可以給你的app不一樣的指令，包括無限存儲，地理位置，桌面提示，歷史記錄，書簽，存儲等等。
Here is OhBoard’s manifest.json:以下是OhBoard的manifest.json:
{
{
"name": "OhBoard",
"name":"OhBoard"
"description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.",
"description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.",
"version": "1.1",
"version": "1.1",
"app": {
"app": {
"launch": {
"launch": {
"local_path": "index.html"
"local_path": "index.html"
}
}
},
},
"icons": {
"icons": {
"16": "favicon.png",
"16": "favicon.png",
"128": "logo.png"
"128": "logo.png"
},
},
"permissions": [ "unlimitedStorage" ]
"permissions": [ "unlimitedStorage" ]
}
}
Step 4: Create your icon
第四步：設(shè)計icon
You need two icons. The first one is 128x128px, it is used on your app page, and it also represents your app on the new tab page. The second one is 16x16px, better known as favicon. It stays in the title bar and gives people a visual way to identify different tabs.
你需要設(shè)計兩個icon，一個是128*128px的，用于app主頁，也在新標(biāo)簽頁展示app時使用。另一個是16*16px的，作為favicon使用，它會顯示在標(biāo)題欄，方便用戶辨認(rèn)標(biāo)簽。
There are few guidelines Google wants you to follow:請遵從以下幾個規(guī)則：
Don’t put an edge around the 128×128 image; the UI might add edges.
· 不需要為128*128的圖片留白邊；ui會自動添加。
If your icon is mostly dark, consider adding a subtle white outer glow so it’ll look good against dark backgrounds.
· 如果你設(shè)計的icon屬于暗色，可以考慮設(shè)計微弱的白色外發(fā)光，與背景形成對比，看起來更好一些。
Avoid large drop shadows; the UI might add shadows. It’s OK to use small shadows for contrast.· 不必設(shè)計明顯的陰影；UI會自動添加。小陰影即可形成對比。
If you have a bevel at the bottom of your icon, we recommend 4 pixels of depth.
· 如果icon底部是斜面，推薦4像素深度。
Make the icon face the viewer, rather than having built-in perspective.
· icon應(yīng)該設(shè)計成大眾能易于接受的，避免設(shè)計成難以理解的樣式。
Wherever you place both icons in your package, you must specify the locations in manifest.json (as mentioned above).icon設(shè)計完畢后，必須要在manifest.json中添加好位置（如上提及）。
Step 5: Make your screenshots屏幕截圖
Picture is worth thousand words. So making your screenshot correctly will increase your sales. Each screenshot is 400x275px.圖片的重要性不言而喻，所以截幾個好看的圖能幫助你更好地推廣你的應(yīng)用。截圖大小在400*275像素。
Take a look at a few I did:來看看我的做法：
Few tips to keep in mind: The screenshots should only do 1 thing: show what your app looks like. Many people made the mistake of adding captions and putting testimonials and writing features and telling your Twitter handle. But you have the description field for that. Just show what it looks like so user can get a visual understanding.這里有幾個小提醒：截圖只是用來做一件事的，那就是展示你的app。許多人誤增加一些文字簡介，推薦語，twitter賬號名在上面。其實你會有足夠的地方寫這些東西，截圖只要給用戶一個視覺上的印象就對了。
Also, make sure you don’t break Google’s rules!再次提醒，千萬不要違反谷歌的規(guī)則。
Step 6: Make your demo videos第六步：視頻演示
Video is worth thousand pictures, too! If you want to save money, you can make a DIY video yourself using these powerful tools:demo的作用同樣不言而喻！如果你想要省錢，試試用一下這些好用的工具吧：
Screenflow (the one I’m going to use)
Screenflow（我就打算用這個）
Camtasia
Camtasia
iShowU
iShowU
Captivate
Captivate
Or if you want your app to look cutting-edge, consider contracting with agencies that makes professional demos. Few media producers that have done work for high-profile apps:
如果希望你的app更高級一些，可以找相關(guān)機(jī)構(gòu)設(shè)計更專業(yè)的視頻demo。已經(jīng)有視頻制作者開始為高品質(zhì)app做設(shè)計了。
HiLoMedia
HiLoMedia
Clear Media
Clear Media
SwitchMarketing
SwitchMarketing
Step 7: Write your descriptions
第七步：寫介紹
If your screenshots and video aren’t that good, a golden description can still turn it over. Here are 3 well-known tips:如果你的屏幕截圖看起來一般，那么就寫個精彩的介紹，完全可以翻盤。以下提供三個好建議：
Keep it simple. Most people aren’t going to have time to read a 5-paragraph description. So the rule of thumb is to keep it as short as possible. Just tell what benefits and features do the app provide.
盡量簡短。大多數(shù)用戶都沒有時間去讀一個5段的文字介紹，所以黃金守則就是盡可能的短。只要說明好處和特色就行了。
Use bullet points. Since people won’t read paragraph, listing benefits and features in bullet points will be a great idea.列出要點。由于人們不喜歡讀大篇幅的文字，所以把好處和特色按要點列出即可。
Showcase testimonials. Maybe users don’t trust what you have to say, listing your customer’s testimonials can be a convincing call-to-action.舉個應(yīng)用實例。也許用戶并不相信開發(fā)者說的話，所以把用戶的親自體驗放上去會更有說服力。
Take a look at mine for an example.可以看看我是怎么做的，以我為例。
Step 8: Set your price第八步：定價
As always, there are two ways to go: free or paid. But in Chrome Web Store, there are actually 5 payment choices you can use.一般情況下只有兩個情況：免費或收費。但是在谷歌在線商店，有五種支付方法可以選。
Free. If you are new to create a Chrome Web App, releasing it for free and learn from experience won’t hurt you.·免費。如果你是第一次開發(fā)谷歌網(wǎng)頁應(yīng)用，免費學(xué)點經(jīng)驗并沒有什么不好。
One-time payment with Google Checkout. Great if your app provides utility, meaning it saves users time or money.
·利用谷歌的checkout服務(wù)一次性付費。如果你的app確實提供了便利，這意味著你幫助用戶節(jié)省了時間和金錢。
Recurring payment with Google Checkout. This is perfect if your app involves any types of file storage.利用Google Checkout自動周期扣款。如果你的app有足夠大的存儲空間，選擇這種方式是很棒的。
Free trial. If your app is complicated, giving a free trial then charge for a fee will be the best solution, although only hosted apps support free trial at this point.免費試用。如果你的app玩法復(fù)雜，可以給一個免費試用版，試用后收費。此種盈利方法適用于hosted app。
Your own payment method. If you don’t want to use Google Checkout, you can always write your own system that processes payment via PayPal.自創(chuàng)支付方法。如果你不想用google checkout，你也可以自行設(shè)計，通過PayPal來支付。
I found a detailed but pretty technical tutorial from Google about how to check for payments using their licensing API. Note: it only applies to hosted app because packaged apps only supports Google Checkout.我發(fā)現(xiàn)google有一個技術(shù)教程，詳細(xì)的介紹了如何通過google的licensing api來查看用戶支付情況。注意：只有hosted app可以調(diào)用這個licensing api。
Step 9: Test the app第九步：測試
After you’ve finished making your app, you can easily test it out locally in Chrome. Window => Extensions => Developer Mode => Load unpacked extension… => Choose your app folder.
app開發(fā)完畢之時，你可以輕易的在chrome上進(jìn)行測試了。路徑如下：Window => Extensions => Developer Mode => Load unpacked extension… =>點擊你的app文件
Open up a new tab, you should see your app icon showing on the dashboard! If it is packaged app, make sure everything within the app is working bug-free. If it is a hosted app, as long as the icon links to your destination website, you should be fine.打開一個新tab頁，你就可以在dashboard上看到你的app icon了。如果這是一個packaged app,你要保證你的app沒有缺陷。如果是hosted app，點擊icon會直接鏈接到你的主頁，就不用擔(dān)心這個問題了。
Step 10: Publish the app第十步：發(fā)布app
Before moving on, make sure you completed all of the pre-launched checklist items!在發(fā)布之前，確保你已經(jīng)完成了前面的所有事宜。
Once everything is done, you can log in to your developer dashboard with your Google account to publish your app.萬事俱備后，你可以回到開發(fā)界面，登陸谷歌賬號，發(fā)布app了。
The procedure is fairly straightforward:發(fā)布過程非常簡單。
Choose Add new item button點擊Add new item按鈕
Compress your app folder (with manifest.json and your icons) and upload the .zip.壓縮應(yīng)用文件包（附帶manifest.json文件和你的icon），上傳壓縮文件包。
Fill in all the necessary information about your app. This includes price, categories, language, long description, Google Analytics (optional), links, ratings, etc.填寫app相關(guān)信息，包括價格，類別，語言，文字介紹，谷歌分析（可選），鏈接，評級等等。
Upload all artwork. This includes screenshots & videos. You also have the ability to add default background & promotional items for the front page.上傳所有相關(guān)文檔，包括截圖和視頻。你同樣能在利用front page設(shè)計頁面時自行進(jìn)行背景設(shè)計和推薦其他內(nèi)容。
Preview the listing預(yù)覽一下。
Pay $5 one-time developer fee一次性支付五美金的開發(fā)費用
Publish the app發(fā)布app
結(jié)語
Conclusion
If you survived all the way to the end, great job! :) My lengthy tutorial should cover up all the basic about making your own Chrome Web App as well as any relevant links I can find from Google about this process.如果你很順利的完成了開發(fā)，那么恭喜你，非常棒?。海┫Ｍ@個冗長的教程和我提供的相關(guān)資料能在chrome網(wǎng)頁應(yīng)用開發(fā)上助你一臂之力。
In the future, I will continue to write more in-depth tutorials on more specific topics, so feel free to subscribe to this blog.今后，我會圍繞更多主題繼續(xù)更深入地寫一些教程，所以敬請關(guān)注這個博客。
I also suggest that you join Google’s Chrome development group so you can keep up with everything and ask any questions.也建議你參加谷歌的Chrome開發(fā)者團(tuán)隊，這樣更方便交流。
If you have any more questions, feel free to email me via Email, Twitter or comments.如果有任何問題，請隨時和我聯(lián)系，email，twitter或者給我寫評論都可以。
And lastly, if you enjoy this tutorial, you will really love OhBoard as well, give it a try!最后，如果你喜歡這個教程，你也會喜歡OhBoard的, 去試試吧！
If you are interested in keeping up with OhBoard and Stephen, subscribe to the blog & follow on Twitter!
如果對OhBoard和我本人感興趣，請在訂閱我的博客，在twitter上關(guān)注我吧！
聯(lián)系客服
