建站
咨詢
售后
建站咨詢
新聞中心
***版的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）都被被記錄在這里。
創(chuàng)新互聯(lián)建站主營青神網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),青神h5微信小程序開發(fā)搭建,青神網(wǎng)站營銷推廣歡迎青神等地區(qū)企業(yè)咨詢
懷疑論者喜歡說：“HTML5還沒有準(zhǔn)備好”。就在這個星期，我看到的一篇文章，宣稱HTML5要“準(zhǔn)備就緒”還要再過10年。我想問：“準(zhǔn)備什 么？”，當(dāng)然目前還有許多API仍在發(fā)展，但大多情況下，HTML5就是現(xiàn)在進(jì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運(yùn)行環(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ū)ο蟆猰ozApps的對象（目前在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ùn)行。然后在運(yùn)行時獲取應(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)用運(yùn)行在支持mozApps的環(huán)境中，那么應(yīng)該就會出現(xiàn)“安裝”按鈕。由于此應(yīng)用（K.O. Timer）是一個HTML5應(yīng)用程序，它可以運(yùn)行在任何兼容HTML5的瀏覽器。如果它運(yùn)行在瀏覽器/支持mozApps的runtime上，就會出現(xiàn)“安裝”按鈕。
如果應(yīng)用程序已安裝，我們就不讓它出現(xiàn)安裝按鈕。
這里是一個JavaScript方法來測試運(yùn)行和安裝狀態(tài)。
如果是運(yùn)行時，當(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)用，再加上強(qiáng)大的HTML5應(yīng)用發(fā)布機(jī)制，這將是Mozilla市場未來開放時，能夠提供給人們本地運(yùn)行的能力，創(chuàng)造偉大的技術(shù)標(biāo)準(zhǔn)為基礎(chǔ)性應(yīng)用開發(fā)人員的機(jī)會。
文章名稱：HTML5打造桌面應(yīng)用
本文路徑：http://www.5511xx.com/article/dpddhce.html
