***版的HTML，即HTML5，已經(jīng)在軟件和信息產(chǎn)業(yè)界產(chǎn)生了巨大的影響。當(dāng)我們說：“HTML5”，我們指的其實是HTML / CSS / JavaScript的“綜合體”。在Mozilla，我們經(jīng)常提及“Web Run-Time”或WebRT。Mozilla應(yīng)用的探討（包括Web Runtime）都被被記錄在這里。

懷疑論者喜歡說：“HTML5還沒有準(zhǔn)備好”。就在這個星期，我看到的一篇文章，宣稱HTML5要“準(zhǔn)備就緒”還要再過10年。我想問：“準(zhǔn)備什 么？”，當(dāng)然目前還有許多API仍在發(fā)展，但大多情況下，HTML5就是現(xiàn)在進行時。基本上發(fā)展到目前，已經(jīng)準(zhǔn)備在不久的將來提供給一般人使用。

最近Mozilla的Web Apps的安裝體驗已經(jīng)引入到火狐每晚版通道。（閱讀更多關(guān)于Firefox版本發(fā)布通道的信息）

此功能可以讓我們把HTML5應(yīng)用安置在Windows或Mac本地上（Linux和Android在未來也能得到支持），獲得像桌面應(yīng)用類似的體驗。

Mozilla用偉大的方式來做到這一點，Mozilla市場可以簡潔的列出你的應(yīng)用。市場將很快就會向公眾開放，開發(fā)人員可以提交他們的應(yīng)用提交到市場這個生態(tài)系統(tǒng)上。想要提交應(yīng)用，你僅需要申請一個BrowserID。

一個HTML5應(yīng)用，需要包括Mozilla Web Runtime運行環(huán)境和一個manifest文件。

該manifest文件其實是一個簡單的JSON文件，聲明了App的某些數(shù)據(jù)。

這里是一個App的manifest文件示例。

{    
     "version": "1.0",    
     "name": "KO Round Timer",    
     "description": "A Workout Timer for Fighting Athletes!",    
     "icons": {     
       "128": "/images/icon-128.png"    
     },      
     "developer": {    
       "name": "Joe Stagner",    
       "url": "http://koscience.com"    
     },    
     "installs_allowed_from": [    
       "http://timer.koscience.com",   
"https://marketplace.mozilla.org"     
     ],      
     "default_locale": "en"    
   } 

JSON不需要CRLFs格式化。上面JSON的格式只是為簡化顯示，以便閱讀。

注意：第12行以上指定了App的安裝信息。

Mozilla Web Runtime包括一個應(yīng)用程序?qū)ο?mdash;—mozApps的對象（目前在Windows和Mac平臺上的每夜版Firefox中實現(xiàn)），有一個方法來安裝應(yīng)用程序。我們來看看，在一分鐘內(nèi)使用該API寫出代碼。

如果你想讓你的應(yīng)用通過Mozilla市場安裝，你不需要寫任何安裝代碼。當(dāng)你在市場提交應(yīng)用時，市場會為你的應(yīng)用創(chuàng)建一個列表頁面，該頁面包括會一個安裝按鈕。

安裝按鈕被點擊時會調(diào)用生成的代碼，告訴安裝的應(yīng)用如何運行。然后在運行時獲取應(yīng)用的manifest，除此之外，還會檢查，看看請求安裝應(yīng)用的域名是否被允許。

正如你在manifest清單文件上看到的，第14行指定了App可以被從“https://marketplace.mozilla.org”上安裝。

但是，您可能需要讓用戶從其他域名安裝應(yīng)用，例如自己的網(wǎng)站。

你可以看到第13行代碼，在我們的manifest樣本文件上列出了“http://timer.koscience.com”作為一個有效的指定“安裝”的位置。我可以指定盡可能多的域名，因為有我喜歡的通配符支持App授權(quán)安裝功能。

如果我們想從我們自己的網(wǎng)站上安裝的應(yīng)用程序，但是，我們需要實現(xiàn)自己的安裝邏輯。

我們可以創(chuàng)建一個頁面，類似Mozilla市場上的應(yīng)用列表頁面，或者可以讓安裝程序“自我”包含功能代碼，可以在安裝程序本身含有邏輯來實現(xiàn)。

例如，Workout Timer這個應(yīng)用，如下所示。

請注意排在計時器的底部的導(dǎo)航按鈕。

右邊***一個是：“安裝”。

如果應(yīng)用運行在支持mozApps的環(huán)境中，那么應(yīng)該就會出現(xiàn)“安裝”按鈕。由于此應(yīng)用（K.O. Timer）是一個HTML5應(yīng)用程序，它可以運行在任何兼容HTML5的瀏覽器。如果它運行在瀏覽器/支持mozApps的runtime上，就會出現(xiàn)“安裝”按鈕。

如果應(yīng)用程序已安裝，我們就不讓它出現(xiàn)安裝按鈕。

這里是一個JavaScript方法來測試運行和安裝狀態(tài)。

如果是運行時，當(dāng)前應(yīng)用沒有安裝，那么就顯示安裝按鈕。

當(dāng)應(yīng)用程序尚未安裝，在某些情況下，你可能會選擇不要顯示“安裝”按鈕，只需設(shè)置在啟動安裝程序時直接啟動即可。

（此代碼使用jQuery）

function TestAppInstalled() {  
    if ((!navigator.mozApps) || (!navigator.mozApps.getSelf)) {  
        /*-----------------------------------------------------------+  
        || Test to see if the Mozilla Apps Web Runtime is supported  
        || HACK: Testing for either mozApps OR mozApps.getSelf is a   
        || hack.   
        || This is needed because some pre-beta versions of Firefox   
        || have the object present but nit fully implemented.  
        || TODO: Update when Firefox Desktop & Mobile are complete.  
        ------------------------------------------------------------*/ 
        return;  
    }  
   
    var MyAppSelf = navigator.mozApps.getSelf();  
    MyAppSelf.onsuccess = function() {  
        if (! this.result) {  
            // Application is not "installed"  
            $('#InstallButton').show();  
        }  
        else {  
             // This "MozApp" is already installed.  
        }  
        return;  
    }  
    MyAppSelf.onerror = function() {  
        alert('Error checking installation status: ' +   
               this.error.message);  
        return;  
    }  
} 

當(dāng)用戶點擊安裝按鈕，下面的代碼就會被執(zhí)行。

$('#InstallButton').click(function() {  
    var installation = navigator.mozApps.install(  
                "http://timer.koscience.com/kotimer.webapp");  
    installation.onsuccess = function() {  
        $('#InstallButton').hide();  
        alert("K.O. Timer has been successfully installed.....");  
    }  
    installation.onerror = function() {  
        alert("APP: The installation FAILED : " + this.error.name);  
    }  
}); 

因此，當(dāng)用戶使用支持mozApps瀏覽器（目前只有每夜版火狐支持）瀏覽到K.O. Timer應(yīng)用（timer.koscience.com）并點擊列“安裝”按鈕，mozApps runtime就開始安裝。

用戶點擊安裝“按鈕”后，就會出現(xiàn)在上圖中的對話框→安裝→完成，用戶就會在本地有一個App。

在Windows中，你會得到一個桌面快捷方式。

以及“開始”菜單項。

當(dāng)然現(xiàn)在用戶也可以在Mozilla 我的App收藏集打開應(yīng)用。

重要的是要記住，這些啟動器已經(jīng)在用戶的系統(tǒng)上被創(chuàng)建，但應(yīng)用程序本身仍存于云端。開發(fā)人員可以利用AppCache，LocalStorage或IndexedDB這些HTML5特性，選擇給應(yīng)用添加“離線”功能。

提供HTML5應(yīng)用，再加上強大的HTML5應(yīng)用發(fā)布機制，這將是Mozilla市場未來開放時，能夠提供給人們本地運行的能力，創(chuàng)造偉大的技術(shù)標(biāo)準(zhǔn)為基礎(chǔ)性應(yīng)用開發(fā)人員的機會。

原文鏈接：http://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/

【編輯推薦】

1. 2012年Web設(shè)計和開發(fā)的15個趨勢
2. 別怕！我們還有HTML 5和CSS3
3. Web開發(fā)不可少的六個HTML 5編輯器
4. 開發(fā)HTML5跨平臺游戲相關(guān)經(jīng)驗
5. HTML 5實現(xiàn)拍照上傳應(yīng)用實現(xiàn)