HTML 5打造桌面應(yīng)用
***版的HTML，即HTML5，已經(jīng)在軟件和信息產(chǎn)業(yè)界產(chǎn)生了巨大的影響。當(dāng)我們說(shuō)：“HTML5”，我們指的其實(shí)是HTML / CSS / JavaScript的“綜合體”。在Mozilla，我們經(jīng)常提及“Web Run-Time”或WebRT。Mozilla應(yīng)用的探討（包括Web Runtime）都被被記錄在這里。
懷疑論者喜歡說(shuō)：“HTML5還沒(méi)有準(zhǔn)備好”。就在這個(gè)星期，我看到的一篇文章，宣稱HTML5要“準(zhǔn)備就緒”還要再過(guò)10年。我想問(wèn)：“準(zhǔn)備什 么？”，當(dāng)然目前還有許多API仍在發(fā)展，但大多情況下，HTML5就是現(xiàn)在進(jìn)行時(shí)?；旧习l(fā)展到目前，已經(jīng)準(zhǔn)備在不久的將來(lái)提供給一般人使用。
最近Mozilla的Web Apps的安裝體驗(yàn)已經(jīng)引入到火狐每晚版通道。（閱讀更多關(guān)于Firefox版本發(fā)布通道的信息）
此功能可以讓我們把HTML5應(yīng)用安置在Windows或Mac本地上（Linux和Android在未來(lái)也能得到支持），獲得像桌面應(yīng)用類似的體驗(yàn)。
Mozilla用偉大的方式來(lái)做到這一點(diǎn)，Mozilla市場(chǎng)可以簡(jiǎn)潔的列出你的應(yīng)用。市場(chǎng)將很快就會(huì)向公眾開放，開發(fā)人員可以提交他們的應(yīng)用提交到市場(chǎng)這個(gè)生態(tài)系統(tǒng)上。想要提交應(yīng)用，你僅需要申請(qǐng)一個(gè)BrowserID。
一個(gè)HTML5應(yīng)用，需要包括Mozilla Web Runtime運(yùn)行環(huán)境和一個(gè)manifest文件。
該manifest文件其實(shí)是一個(gè)簡(jiǎn)單的JSON文件，聲明了App的某些數(shù)據(jù)。
這里是一個(gè)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的格式只是為簡(jiǎn)化顯示，以便閱讀。
注意：第12行以上指定了App的安裝信息。
Mozilla Web Runtime包括一個(gè)應(yīng)用程序?qū)ο?mdash;—mozApps的對(duì)象（目前在Windows和Mac平臺(tái)上的每夜版Firefox中實(shí)現(xiàn)），有一個(gè)方法來(lái)安裝應(yīng)用程序。我們來(lái)看看，在一分鐘內(nèi)使用該API寫出代碼。
如果你想讓你的應(yīng)用通過(guò)Mozilla市場(chǎng)安裝，你不需要寫任何安裝代碼。當(dāng)你在市場(chǎng)提交應(yīng)用時(shí)，市場(chǎng)會(huì)為你的應(yīng)用創(chuàng)建一個(gè)列表頁(yè)面，該頁(yè)面包括會(huì)一個(gè)安裝按鈕。
安裝按鈕被點(diǎn)擊時(shí)會(huì)調(diào)用生成的代碼，告訴安裝的應(yīng)用如何運(yùn)行。然后在運(yùn)行時(shí)獲取應(yīng)用的manifest，除此之外，還會(huì)檢查，看看請(qǐng)求安裝應(yīng)用的域名是否被允許。
正如你在manifest清單文件上看到的，第14行指定了App可以被從“https://marketplace.mozilla.org”上安裝。
但是，您可能需要讓用戶從其他域名安裝應(yīng)用，例如自己的網(wǎng)站。
你可以看到第13行代碼，在我們的manifest樣本文件上列出了“http://timer.koscience.com”作為一個(gè)有效的指定“安裝”的位置。我可以指定盡可能多的域名，因?yàn)橛形蚁矚g的通配符支持App授權(quán)安裝功能。
如果我們想從我們自己的網(wǎng)站上安裝的應(yīng)用程序，但是，我們需要實(shí)現(xiàn)自己的安裝邏輯。
我們可以創(chuàng)建一個(gè)頁(yè)面，類似Mozilla市場(chǎng)上的應(yīng)用列表頁(yè)面，或者可以讓安裝程序“自我”包含功能代碼，可以在安裝程序本身含有邏輯來(lái)實(shí)現(xiàn)。
例如，Workout Timer這個(gè)應(yīng)用，如下所示。
請(qǐng)注意排在計(jì)時(shí)器的底部的導(dǎo)航按鈕。
右邊***一個(gè)是：“安裝”。
如果應(yīng)用運(yùn)行在支持mozApps的環(huán)境中，那么應(yīng)該就會(huì)出現(xiàn)“安裝”按鈕。由于此應(yīng)用（K.O. Timer）是一個(gè)HTML5應(yīng)用程序，它可以運(yùn)行在任何兼容HTML5的瀏覽器。如果它運(yùn)行在瀏覽器/支持mozApps的runtime上，就會(huì)出現(xiàn)“安裝”按鈕。
如果應(yīng)用程序已安裝，我們就不讓它出現(xiàn)安裝按鈕。
這里是一個(gè)JavaScript方法來(lái)測(cè)試運(yùn)行和安裝狀態(tài)。
如果是運(yùn)行時(shí)，當(dāng)前應(yīng)用沒(méi)有安裝，那么就顯示安裝按鈕。
當(dāng)應(yīng)用程序尚未安裝，在某些情況下，你可能會(huì)選擇不要顯示“安裝”按鈕，只需設(shè)置在啟動(dòng)安裝程序時(shí)直接啟動(dòng)即可。
（此代碼使用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)用戶點(diǎn)擊安裝按鈕，下面的代碼就會(huì)被執(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）并點(diǎn)擊列“安裝”按鈕，mozApps runtime就開始安裝。
用戶點(diǎn)擊安裝“按鈕”后，就會(huì)出現(xiàn)在上圖中的對(duì)話框→安裝→完成，用戶就會(huì)在本地有一個(gè)App。
在Windows中，你會(huì)得到一個(gè)桌面快捷方式。
以及“開始”菜單項(xiàng)。
當(dāng)然現(xiàn)在用戶也可以在Mozilla 我的App收藏集打開應(yīng)用。
重要的是要記住，這些啟動(dòng)器已經(jīng)在用戶的系統(tǒng)上被創(chuàng)建，但應(yīng)用程序本身仍存于云端。開發(fā)人員可以利用AppCache，LocalStorage或IndexedDB這些HTML5特性，選擇給應(yīng)用添加“離線”功能。
提供HTML5應(yīng)用，再加上強(qiáng)大的HTML5應(yīng)用發(fā)布機(jī)制，這將是Mozilla市場(chǎng)未來(lái)開放時(shí)，能夠提供給人們本地運(yùn)行的能力，創(chuàng)造偉大的技術(shù)標(biāo)準(zhǔn)為基礎(chǔ)性應(yīng)用開發(fā)人員的機(jī)會(huì)。
原文鏈接：http://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/
【編輯推薦】
