Firefox OS App開發及部署

作者：chyblog 2013-01-14 13:14:11

Firefox OS所有應用都采用HTML5的標準，只要會HTML、CSS、JS，開發APP是非常簡單的，只是firefox os提供了一些針對移動設備的特性，如電話、短信、WIFI、3G網絡等，但調用這些功能跟普通的JS組件一樣，操縱JS對象即可。mozilla也在和 W3C進行協商，爭取將這些新增的特性添加到HTML5標準里面去。

Firefox OS App的部署目前有兩種方式

1.在gaia編譯前，將你的App工程（App工程的目錄結構下面會詳細說明）放到gaia源碼的apps或者test_apps目錄，然后make

這種方式可以在模擬器里運行或者燒到B2G手機中運行你的應用

2.將你的App部署到web服務器，通過在線方式進行安裝。但這樣，你需要將你的應用發布到應用商店或者自己單獨寫一個供App安裝的頁面，讓用戶通過該頁面安裝你的應用。后面會有詳細的說明。

接下來我們以一個超級簡單的Demo來說明怎么開發Firefox OS App

1.新建一個文件夾testapp作為項目根目錄（注意，文件夾名必須為小寫字母）

2.在testapp目錄下，新建index.html，代碼如下

<!DOCTYPE html> 
<html> 
<head>      
<meta charset="utf-8" /> 
</head> 
<body>      
hello Firefox OS  
</body> 
</html>

3.在testapp目錄下，新建manifest.webapp，代碼如下

{  
"name": "Test App",  
"launch_path": "/index.html",  
"developer": {  
"name": "chy",  
"url": "http://chyblog.sinaapp.com"  
},  
"appcache_path": "/cache.manifest",  
"fullscreen": "true",  
"icons": {  
"120": "/style/testApp.png"  
},  
"permissions": [  
]  
}

4.添加應用的圖標，在testapp目錄下，新建style目錄，添加一張png格式的圖片，作為應用的圖標，取名為testApp.png

5.部署，我們采用上面提到的第一種方式進行部署，將testapp放到gaia源碼的test_apps下面，然后重新編譯giai源碼。編譯完后運行模擬器，在你的Firefox os中，會看到你新增的應用

6.如果需要在線安裝，首先需要把應用放到web服務器上，然后添加一個安裝頁面，源碼如下

<!DOCTYPE html> 
<html> 
 <head> 
     <meta charset="UTF-8"/> 
     <title>online install</title> 
     <script type="text/javascript"> 
     function install() {  
         var request = window.navigator.mozApps.install("http://demos.chyblog.com/testapp/manifest.webapp");  
         request.onsuccess = function() {  
             // Save the App object that is returned  
             var appRecord = this.result;  
             alert('Installation successful!')  
         };  
         request.onerror = function() {  
             // Display the error information from the DOMError object  
             alert('Install failed, error: ' + this.error.name);  
         };  
     }  
     </script> 
 </head> 
 <body> 
     <input type="button" value="install Test App" onclick="install()"/><br> 
     from:<a href="http://www.chyblog.com">http://www.chyblog.com</a> 
 </body> 
</html>

需要把

var request = window.navigator.mozApps.install("http://demos.chyblog.com/testapp/manifest.webapp");

中的地址http://demos.chyblog.com/testapp/manifest.webapp替換成你的app下面manifest.webapp文件訪問的URL路徑即可

部署好以后，使用B2G中的firefox瀏覽器訪問該安裝頁面的URL地址，點擊“install Test App”按鈕，按照提示進行安裝即可。也可使用演示頁面，安裝該應用

效果截圖

源碼下載：http://chyblog-chyblog.stor.sinaapp.com/wp-content/uploads/2012/09/testapp.zip

責任編輯：Yeva 來源： chyblog.com

Firefox OS