歡迎您光臨本站 註冊首頁

用 Google Gears 增強您的 Web 應用程序

←手機掃碼閱讀     火星人 @ 2014-03-12 , reply:0
  
本文將簡要介紹如何用 Google Gears 提供的 API 增強您的 Web 應用程序,包括增加離線支持,提高運行速度和本地資料庫支持等。

眾所周知,Ajax 可以使得 Web 應用程序的響應速度提高一大塊,然而雲計算和 SaaS(Software as a Service) 的用戶仍然期望獲得更快的響應速度,那 Web 應用程序還能更快嗎?答案是肯定的。隨著硬體技術的不斷升級,客戶端計算機的計算能力逐步提高,如果 Web 應用程序可以充分利用閑置的客戶端計算能力,那將進一步提高其響應速度,但如何充分利用客戶端計算能力便成了開發者新的挑戰, Google Gears 正是幫助 Web 應用程序開發者應對這種挑戰的有力工具。其次,用戶有時希望在離線的情況下也可以使用 Web 應用程序,這無形當中增加了 Web 應用程序開發者的痛苦指數, Google Gears 恰好可以減輕開發者在這方面的痛苦。最後,企業用戶對於採納雲計算和 SaaS 總會存在一種顧慮,那就是企業的核心數據拱手交給第三方公司來存儲和管理,這顯然使得企業難以保護自己公司的商業機密 , 而 Google Gear 可以允許用戶將 Web 應用程序產生的用戶數據存儲到用戶自己的電腦中,而不是將數據存儲到雲端或者 SaaS 提供商的數據中心。本文將逐個介紹 Google Gears 提供的各種特性和 API,並且會提供使用這些 API 的例子。

Google Gears 簡介

Google Gears 是 Google 公司推出的一個開源項目,它是一個瀏覽器的插件,它會添加新的功能到瀏覽器,並暴露相應的 JavaScript API 給 Web 應用程序,以此增強 Web 應用程序的功能和性能。目前 Google Gears 支持 Firefox 1.5+, Internet Explorer 6.0+ 和 Safari 3.1.1+ 等主流瀏覽器。

首先, Google Gears 提供的 LocalServer API 可以將 Web 應用程序的 HTTP 資源緩存到用戶的硬碟中,這樣可以在 Ajax 的基礎上進一步提高 Web 應用程序的響應速度,同時也使得用戶在沒有網路連接的情況下依然可以使用 Web 應用程序;其次, Google Gears 提供了 WorkerPool API 幫助 Web 應用程序在後台進行耗時的運算以提高 UI 的響應能力, Web 應用程序也可以用這種方式將原來由伺服器承擔的一部分運算工作交給客戶端來處理;第三, Google Gears 提供的 Database API 則可以讓 Web 應用程序將數據保存到用戶的硬碟中並遵守同源安全策略,以此保護用戶的敏感數據不被外露。除此之外, Google Gears 還提供了 Desktop, Geolocation 等 API 來豐富已有的功能。目前有 Google Docs, Google Reader 和 Zoho 等 Web 應用程序利用 Google Gears 來提供更多的功能。下面將介紹如何利用 Google Gears 提供的各種 API 來增強你的 Web 應用程序。





環境準備

為了開發 Google Gears 應用程序,你需要先安裝 Google Gears 插件到你的瀏覽器,用你的瀏覽器訪問 http://gears.google.com/,如果你的瀏覽器沒有安裝 Google Gears 插件,在顯示的網頁右上角會出現一個 Install Gears 的按鈕,點擊它將會開始安裝 Google Gears。接下來你還需要到 http://code.google.com/intl/zh-CN/apis/gears/tools.html 下載 gears_init.js 文件,把該文件放到你的 Web 應用程序裡面。由於 Google Gears 提供的 API 是基於 JavaScript 語言的,所以你不需要安裝額外的 IDE 插件來開發 Google Gears 程序,僅需要普通的文本編輯器就可以。如果你的瀏覽器是 Firefox, 可以安裝 Firebug 來調試 JavaScript。





走出第一步

為了使你的 Web 應用程序的某一個頁面能用上 Google Gears 的功能,需要把清單 1 所示的代碼嵌入到網頁的 Html 代碼裡面 , src 的值是前面下載的 gears_init.js 的相對路徑。


清單 1. 為網頁增加對 Google Gears 的 JavaScript 庫的引用
				   <script type="text/javascript" src="gears_init.js"></script>   

檢測是否安裝了 Google Gears

只有在瀏覽器安裝了 Google Gears 插件的情況下,Google Gears 提供的 JavaScript API 才會生效,所以你的 Web 應用程序需要在一開始就檢測用戶的瀏覽器是否安裝了 Google Gears, 如果沒有就轉到 Google Gears 的安裝頁面。清單 2 所示代碼能夠幫你做到這些


清單 2. 檢測瀏覽器是否安裝了 Google Gears
				   <script>     if (!window.google || !google.gears) {       location.href =       "http://gears.google.com/?action=install&message=<your welcome message>";     }   </script>   

在上面代碼中你可以用 message 參數自定義顯示在安裝頁面的消息。





使用 LocalServer API

雖然 Google Gears 不僅僅是為了給 Web 應用程序賦予離線功能而生,但離線功能卻無疑是 Google Gears 最重要的使命之一。LocalServer, WorkerPool 和 Database 這三個 Gears 最早的,同時也是最核心的功能模塊,為完成這一使命提供了必不可少的利器。

LocalServer 的主要功能是將 Web 應用程序的 HTTP 資源緩存到用戶的本地硬碟中,並且當用戶需要再次訪問同樣的網路資源的時候,對其進行攔截,轉而用本地已存儲的 HTTP 資源來代替伺服器端的資源,為用戶提供服務。這樣,不但可以在 Ajax 的基礎上進一步提高 Web 應用程序的響應速度,同時也使得用戶在沒有網路連接,或者網路連接狀況不好的情況下依然可以像使用本地應用程序一樣的流暢使用 Web 應用程序。

然而,即使有了 LocalServer 的支持,也並不意味著我們需要一股腦的把所有的 Web 應用程序都拿到本地來執行,很多實時性很強,或者數據量過大的 Web 應用程序,都並不適合進行本地存儲和利用本地資源來提供服務。因此,在利用 LocalServer API 對 Web 應用程序提供離線使用的功能之前,更重要的是要根據不同應用程序的應用場景,考量和分析哪些 Web 應用程序,或者某個 Web 應用程序的哪些功能和資源適合放到本地,並且能相對容易放到本地,放到本地之後能有更好的使用效果和用戶體驗。

在確定了要存儲 Web 應用程序的哪些功能和資源之後,我們可以利用 LocalServer 提供的兩種緩存方式來獲取 HTTP 資源:

  • ResrouceStore – 獲取指定 URL 的用戶數據,PDF 文件,圖片,樣式表,JavaScript, 和 HTML 頁面等。
  • ManagedResourceStore – 根據 manifest 文件事先聲明的內容,獲取一系列版本可控的相關的網路資源。

與利用 ResourceStore 獲取並存儲相對獨立的網路資源相比,利用 ManagedResourceStore 獲取一系列相關聯的網路資源會複雜一些。不過 manifest 文件的引入,也讓由 ManageResourceStore 方式獲取的網路資源變得相對的簡單和一目了然。該 manifiest 文件由一個包括版本信息和資源清單在內的 JSON 對象組成,其中的“entries”屬性,列出了所有需要被獲取和存儲的資源的 URL。

此外,以上兩種存儲方式最主要的區別是在於對所存資源的更新方式有所不同。ResourceStore 方式存儲的資源不會自動被更新。如果需要更新,開發人員要在代碼中顯示地調用 captrure() 方法。而利用 ManagedResourceStore 存儲的資源,由於在 manifest 文件中記錄了版本的信息,因此可以同時支持手動和自動兩種更新方式。開發人員既可以通過調用 checkForUpdate() 來手動檢查並更新本地資源,也可以在 Google Gears 攔截或提供來自 ManagedResourceStore 的請求的同時,自動比較伺服器和本地版本的差異,如有不同,注意這裡是不同,也就是說即使伺服器版本要低於本地版本,也會觸發更新。

LocalServer API 提供了三個主要的類來創建和管理由 ResourceStore 和 ManagedResourceStore 兩種方式獲取的網路資源。

  • LocalServer – 創建、打開和刪除 ResourceStore 和 ManagedResourceStore 兩種存儲方式的網路資源。
  • ManagedResourceStore – 管理以 ManagedResourceStore 方式存儲的網路資源。
  • ResourceStore – 管理以 ResourceStore 方式存儲的網路資源。

在使用包括 LocalServer API 在內的 Google Gears 的 API 之前,首先需要利用 Factory API 中的 create() 方法,指定需要用到的介面。正如清單 3 所示的代碼,在調用 LocalServer API 的方法之前,需要先調用 create() 方法創建出一個 LocalServer 類型的對象。


清單 3. 在使用 Google Gears 的 API 之前需先創建出相應類型的對象
				   <script type="text/javascript">   var localServer = google.gears.factory.create('beta.localserver');   </script>   

下面我們以將一個最簡單的 HTML 頁面用 ManagedResourceStore 方式存儲到本地為例,來簡單的說明 LocalServer API 是怎樣將網路資源存儲到本地,並且及時更新的。代碼和 manifest 文件,分別如清單 4 和清單 5 所示。


清單 4. 以 ManagedResourceStore 方式將普通 HTML 頁面存儲到本地
				  <html>       <head>           <title>Google Gears ManagedResourceStore</title>           <script type="text/javascript" src="gears_init.js"></script>           <script>               var STORE_NAME = "MangedResourceStore_Sample";               var MANIFEST_FILENAME = "manifest.json";               var localServer;               var store;                             function createManagedStore(){                  	  // 創建出一個 LocalServer 類型的對象                          localServer = google.gears.factory.create("beta.localserver");               // 創建一個 ManagedResourceStore 類型的本地存儲,如果該存儲已經存在,就直接打開                  store = localServer.createManagedStore(STORE_NAME);                                     store.manifestUrl = MANIFEST_FILENAME;                   store.enabled = true;                   // 手動觸發一次更新,該更新會在後台非同步運行,用戶可繼續操作頁面,無需等待響應                  store.checkForUpdate();                                     var timerId = window.setInterval(function(){                   	 // 一旦獲得本地存儲的版本信息,表明本地存儲或更新已經結束。                      if (store.currentVersion) {                           window.clearInterval(timerId);                           alert('Done! Current Version is ' +                           store.currentVersion);                       }                   }, 500);                                 }                             function removeManagedStore(){               	  // 刪除已創建的本地存儲                  localServer.removeManagedStore(STORE_NAME);               }           </script>       </head>       <body>           <h1>ManagedResourceStore - Version 0.01</h1>           <form>               <input type="button" value="Create Managed Store"                   onclick="createManagedStore();">               <input type="button" value="Remove Managed Store"                   onclick="removeManagedStore();">           </form>       </body>    </html>   


[火星人 ] 用 Google Gears 增強您的 Web 應用程序已經有518次圍觀

http://coctec.com/docs/linux/show-post-68774.html