發文作者:wekon | 九月 25, 2008

How to construct a webpage supporting Google Gears

為了瞭解 google gears 在手機上是不是真的能跑
乾脆自己寫一個網頁來測試
主要參考此網址:http://code.google.com/apis/gears/tutorial.html


要支援 Google Gears 需要幾個基本的檔案
以教學網頁而言有以下四個:
1. go_offline.htm: 啟動 gears 功能所造訪的網站
2. tutorial_manifest.json: 描述哪些檔案需要存在 local server 的 json 檔
3. gears_init.js: 檢查是否安裝 gears 的初始 js 檔
4. go_offline.js: 管理 local server 檔案的 function definition

將此四個檔案放在我的 Web server: http://140.113.88.204/googlegears/
並且造訪 go_offline.htm
會先詢問是否信任此網站 (忘了抓畫面)
之後,出現以下畫面:

按下 “capture" 按鍵後,出現以下畫面

奇怪的錯誤,我明明將檔案放好了
為什麼會找不到呢
將 tutorial_manifest.json 直接放在 root
再直接連 http://140.113.88.204/tutorial_manifest.json
出現以下畫面:

看起來是 IIS 誤將 json 檔案視為 CGI or ISAPI 檔案了
但是不管我在 ISAPI 擴充程式中增加 .json 副檔名
或是在網頁延伸服務中將 ISAPI 擴充程式允許
都沒有辦法解決這個問題
既然如此,乾脆用 ftp 來抓好了
將 go_offline.js 中的 MANIFEST_FILENAME
改為:"ftp://googlegears:googlegears@140.113.88.204:2000/tutorial_manifest.json“;
結果出現:

天阿, ftp 跟 http 不是同個 protocol
被視為不同網站,不能用
不得已,只好換 server
改連到 http://140.113.88.223:8080/google_gears/go_offline.htm
出現了剛剛漏抓的詢問畫面

重新跑一次 capture

這下終於成功了
先試試 erase:

接下來是離線測試
直接斷線看看

的確,連線失敗
接下來,連線、capture、離線、開新網頁、連到 http://140.113.88.223:8080/google_gears/go_offline.htm

成功 !!
證明我的網站在 PC 上的 gears 是可以作用的
測試部分到此為止,之後就是手機測試了

來看看這幾個檔案

1. tutorial_manifest.json

這裡面的 “my_version_string" 一定要改掉,不然會錯
所有要離線的檔案都要定義在此文件中
包括 html, css, js, jpg, ….

2. go_offline.js

在這裡定義了 createStore() 以及 removeStore() 兩個 function
分別處理 capture 跟 erase 的動作
摘錄幾行關鍵程式:

    localServer = google.gears.factory.create(“beta.localserver");
    store = localServer.createManagedStore(STORE_NAME);
    store.manifestUrl = MANIFEST_FILENAME;
    store.checkForUpdate();

可以看出來,先用 google.gears.factory.create 生一個 localServer 出來
然後再由 localServer.createManagedStore 找出要放在那個 store
再來指定 tutorial_manifest.json 檔案位址得知要抓哪些檔案
最後呼叫 checkForUpdate() 進行下載動作
從這裡可以看出一些 gears 的運作原理

3. go_offline.htm

這裡最重要的就是先呼叫 init() (定義在 gears_init.js 中)
再來就是讓使用者自己選取 capture 或 erase (皆定義在 go_offline.js 中)

到此為止, google gears 測試先告一段落


發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

分類

%d 位部落客按了讚: