Firefox 3: Offline Web Application

Firefox 3 實作了離線網際程式的東西，我對這個還蠻有興趣的，測試一下。雖然找到的資料都告訴我這樣就可以把檔案加進離線資源了：

<link rel="offline-resource" href="fx3offline.html" />

不過我怎麼搞也搞不定 orz，沒想太多，就用了另一種 JavaScript 的方式來放檔案：

navigator.offlineResources.add('http://leolo.cc/~bobchao/offline.jar');

把需要的檔案一一放好，這些檔案就會被加進離線資源裡，也就可以離線閱覽了。

另一個問題會是，網際程式如何知道使用者是否連線？這個問題，Firefox 利用「File > Work Offline」加上幾個新的事件、屬性來解決：

navigator.onLine

屬性，使用者在線上就是 true

offline / online

事件，在使用者上線、離線時觸發。

所以偵測離線、上線的程式碼可以是這樣：

function online_status(b_status){
   if (b_status) {
    //上線的動作
   } else {
    //離線的動作
   }
} 

window.onload = function (){
 online_status(navigator.onLine); //看你需不需要一開網頁就跑一次

 document.body.addEventListener("offline", function () {
  online_status(false);
 }, false);

 document.body.addEventListener("online", function () {
  online_status(true);
 }, false);
}

另外，我們可能還必須知道有多少資源可以用，或者以 JavaScript 新增/移除離線資源，方法我就不贅述了，請直接參考範例：

function show_resources(){
 var obj = navigator.offlineResources;
 
 if (obj.length == 0) {
  alert("目前沒有離線資源");
  return true;
 }
 
 var str = "<p>以下是可以離線閱覽的資源：</p><ul>";
 for (var i = 0; i < obj.length; i++){
  str += "<li>"+obj[i]+"</li>";
 }
 document.getElementById('status-output').innerHTML = (str+"</ul>");
 
 return true;
}

最後我還用了之前 Chris Double 實作離線 Zimbra 的技巧來放咱們可愛的小狐 -- Foxmosa，方法就是把該離線閱覽的東西全部包在 jar 裡一次放入離線資源，然後用從 Mozilla 時代就支援的 JAR Protocol 來叫用其中被壓縮的檔案。

jar:http://leolo.cc/~bobchao/offline.jar!/foxmosa.png

不過，由於之前發現的漏洞，Firefox 從 2.0.0.10 開始就對這種檔案比較小心、非得放在回傳時 Content-Type 是 application/java-archive 或 application/x-jar 的主機才能用，所以 Google Pages 又再度跟我們說了再見...

Anyways 提供一點範例跟心得讓有心人士實作參考囉！