使用 Google Gears 开发离线应用（4）离线访问网页

look_w

离线访问网页马上要进入精彩的 Gears 世界了。这一节涉及到 Gears 技术的核心模块之一，讲述如何在线捕获网页资源，离线状态可以随意访问已捕获的资源。
一，首先创建 JSON 文件。
选中 gears 项目单击右键，选择 New->File。将文件命名为“my_menifest.json”。
图 13. 命名文件打开 my_menifest.json，然后编辑 JSON 文件：

1 2 3 4 5 6 7 8 9 10

{   "betaManifestVersion": 1,   "version": "version 1.4",   "entries": [       { "url": "."},       { "url": "index.jsp"},       { "url": "js/common.js"},       { "url": "js/gears_init.js"}     ] }

观察 JSON 文件，我们可以看到“entries”里指定了很多 url，这些 url 就是我们离线访问时需要的资源。接着我们将使用 Gears API 来读取该文件。
二，在 common.js 原有代码的基础上添加如下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

//------------------------------------------------------------------------- /** *local Store module * 以下是local Server模块的应用函数 */ var localServer; var STORE_NAME = 'test_store'; var store; var MANIFEST_FILENAME = 'my_manifest.json';   /**     * setOffline     * 此方法用于页面显示，当用户点击时被调用     *     */ function setOffline() {   //使页面显示离线应用有效   setShowStatus(1);   //打开本地资源存储并捕获网络资源   openLocalStore();   capture(); }   /**     * openLocalStore     * 该方法用于内部     * 创建local server，并打开local store     */ function openLocalStore() {       if (window.google && google.gears) {     try {       //创建local server       localServer =           google.gears.factory.create('beta.localserver', '1.0');                 } catch (ex) {       //使得submit按钮无效       var buttons = document.getElementById('submit');       buttons.disabled = true;              //显示错误信息       var offline = document.getElementById("offline");       offline.style.color = "red";       offline.innerHTML = "<strong><u>Could not create local server</u></strong> ";              return;     }   }   //创建 local store   store = localServer.createManagedStore(STORE_NAME);     }   /**     * capture     * 该方法用于内部     * 捕获JSON文件里指定的网络资源     *     */ function capture() {       //确保local store已经创建   if (!store) {     addStatus('Please create a store for the captured resources');     return;   }       //显示信息   addStatus('Capturing...');   // JSON文件里指定了我们需要的资源文件，读取它并捕获这些文件   store.manifestUrl = MANIFEST_FILENAME;   store.checkForUpdate();       //显示信息   addStatus('Capturing is done!'); }   /**     * removeStore     * 该方法用于页面，当用户点击时调用     * 删除local store，用户只能在线使用，并显示离线应用无效信息。     */ function removeStore() {   if(localServer){     if (localServer.openManagedStore(STORE_NAME)) {             //删除local store       localServer.removeManagedStore(STORE_NAME);       store = null;              //显示信息       addStatus('Removed the store');     } else {             //显示信息       addStatus('The store does not exist');     }   }else{     //显示信息     addStatus('The localServer does not be created');   }       //显示离线应用无效   setShowStatus(0); }   /**     * setShowStatus     *     * 在页面上显示离线应用有效或无效.     */ function setShowStatus(flag) {   var offline = document.getElementById("offline");   if(flag==0){     offline.style.color = "red";     offline.innerHTML = "<strong>Work online only</strong> ";       status = 0;         }else if(flag==1){     offline.style.cursor = "auto";     offline.style.color = "green";     offline.innerHTML = "<strong>Offline Access effective</strong>";     status = 1;   }     }

三，在 index.jsp 代码中 <div id="body" class="frame"> 里添加代码如下：

1 2 3 4 5 6 7 8 9 10 11 12

... ... <div id="body" class="frame"> <!-- 添加部分 --> <span id="offline" class="warn"><strong>Work online only</strong> </span> <br /> <input type="button" value="Work offline available" onclick="setOffline()"/> <input type="button" value="Work just online" onclick="removeStore()"/> <br /> <!-- Java代码获得当前日期 --> today: ... ...

四，测试。
启动 Tomcat，再次访问您修改好后的应用主页。
图 14. 应用主页点击“Work offline available”按钮，使得 Report 系统能够离线工作。然后让网络连接断开（如果单机版操作，即服务器和客户是同一台机器，可以将 Tomcat 服务器关闭来模拟网络连接断开的场景），如图：
图 15. 网络连接断开此时，您处于 offline 的状态（与服务器通讯失败），接下来我们再试着与服务器通讯访问这个页面，为了确保不是由于浏览器缓存而依然能够访问的页面，我们先把页面缓存数据全部清除。
图 16. 清除页面数据缓存重新打开一个新的浏览器，输入该网页的 URL，访问它。访问是成功的！因为 Gears 已经把 my_menifest.json 里指定要捕获的网络资源给存储到本地的存储源里。浏览器的“工具”选项里有一个 Google Gears Setting 的选项，您可以将 Gears 存储的那些访问过的网址资源给清除。清除后，您将无法离线访问该网址。
图 17. Google Gears Setting 选项