[教學] 第一次寫 Chrome App 就上手

2010年7月24日

自從Apple在手機市場成功地證明了線上App Store的商業模式可行後,眾廠商也爭先恐後地推出自家的線上市集插旗子宣示主權。Google 除了行動市場的Android Market外,也在今年(2010)五月的I/O宣布即將推出Chrome web store 替傳說中的Chrome OS鋪路。假使策略奏效,未來使用者可能逐漸習慣在chrome web store購買或免費下載網頁版應用程式取代桌面(ex: windows)軟體應付日常工作;對開發者來說,「網站」能做的事情將愈來愈廣,甚至可以將服務打包成 App 在chrome web store上販賣以增加收入!

雖然chrome web store尚未開張,不過猴急求知慾旺盛的開發者已經可以在chrome 開發者版本(dev)上面使用自己寫的應用程式了。而且步驟簡單,幾乎與開發chrome extension一模一樣。以下以hiMedia player網站為例,示範如何將該網站打包成Chrome App。

準備工作

請將 chrome 瀏覽器升級至開發者(dev)版本,並加上參數啟動隱藏版的Chrome App功能(參考文章):

--enable-apps

設定檔 Mainfest.json

Chrome App的精髓就在這張 mainfest.json 設定檔,官方網站有詳細的設定教學。這裡要特別注意的是"app"以下的三個參數:

  • urls: 指定使用該應用程式開啟的網址,通常會設定自已服務的網址,開頭的 "*" 表示 "http" 以及 "https" 。比較有趣的是,如果加上 "*://www.youtube.com/", "*://youtube.com/" 這樣的設定,使用者只要連結youtube網站就會預設使用開發者指定的應用程式開啟,對很多人來說,這應該可以算是綁架特定網的行為吧! 不曉得Google之後會如何解決這個問題?
  • browse_urls: 指定某些網址不要另開新視窗或分頁,以hiMedia player為例,使用者登入頁面不需要開新視窗,所以加上這個設定。
  • launch: 應用程式的進入點,可以是如範例的完整位址,也可以使用相對位址,將html/js/css儲存在使用者端,增加讀取速度。

打完收工 (眾人:嘎!?)

就是這麼簡單! 完成 Chrome App 後,接著我們要把它安裝在瀏覽器上。在網址列輸入 chrome://extensions 打開外掛/應用程式頁面 –> 展開「開發人員模式」選項 –> 「載入未封裝擴充功能」—> 選擇 mainfest.json 所在的應用程式資料夾 –> 開啟。安裝成功的 hiMedia player 應用程式如下圖:

開啟應用程式

安裝成功後,要如何使用應用程式呢? 還記得剛剛的設定,您可以1. 直接輸入網址 (http://www.himediaplayer.com/) 打開它,或者2. 開新分頁,找到剛剛安裝的hiMedia player應用程式圖示:

點選後開啟應用程式,上方的分頁跟一般網站分頁長相不一樣:

延伸閱讀

  1. Developer's Guide: Installable Web Apps
  2. 如何開始寫 Chrome App by ericsk
  3. 網頁就是程式,Google Chrome的Web Apps分頁搶先玩 by T客邦

0 意見 :

Related Posts Plugin for WordPress, Blogger...