「Firefox 3 Online and Offline Events」修訂間的差異
出自 MozTW Wiki
（→概觀） |
（→例子） |
||
| 行 13： | 行 13： | ||
=== API === | === API === | ||
=== 例子 === | === 例子 === | ||
| + | 這裡有個[https://bugzilla.mozilla.org/attachment.cgi?id=220609 簡單的例子]。 | ||
| + | <pre><!doctype html> | ||
| + | <html> | ||
| + | <head> | ||
| + | <script> | ||
| + | function updateOnlineStatus(msg) { | ||
| + | var status = document.getElementById("status"); | ||
| + | var condition = navigator.onLine ? "ONLINE" : "OFFLINE"; | ||
| + | status.setAttribute("class", condition); | ||
| + | var state = document.getElementById("state"); | ||
| + | state.innerHTML = condition; | ||
| + | var log = document.getElementById("log"); | ||
| + | log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n")); | ||
| + | } | ||
| + | function loaded() { | ||
| + | updateOnlineStatus("load"); | ||
| + | document.body.addEventListener("offline", function () { | ||
| + | updateOnlineStatus("offline") | ||
| + | }, false); | ||
| + | document.body.addEventListener("online", function () { | ||
| + | updateOnlineStatus("online") | ||
| + | }, false); | ||
| + | } | ||
| + | </script> | ||
| + | <style>...</style> | ||
| + | </head> | ||
| + | <body onload="loaded()"> | ||
| + | <div id="status"><p id="state"></p></div> | ||
| + | <div id="log"></div> | ||
| + | </body> | ||
| + | </html></pre> | ||
| + | |||
=== 參考資料 === | === 參考資料 === | ||
*[http://developer.mozilla.org/en/docs/Online_and_offline_events Online and Offline Events 原始網頁] | *[http://developer.mozilla.org/en/docs/Online_and_offline_events Online and Offline Events 原始網頁] | ||
於 2008年1月8日 (二) 13:51 的修訂
Firefox 3 依據 WHATWG Web Applications 1.0 Specification 實做了 Offline/Online Events。
概觀
打造可以離線跑的網路應用程式時，我們往往需要讓程式知道目前的網路狀況。實際上，網路應用程式一般的需求可細分如下：
- 使用者連上網路的時候，網路應用程式必須知道—使用者已經連上網路了，以便與伺服器同步(re-synchronize)。
- 使用者離線的時候，網路應用程式必須知道—使用者目前處於離線狀態，以便將使用者對伺服器發出的 requests 排入隊列(queue)。
有了 Online/offline events，要滿足這些需求變得很簡單。
此外，你的網路應用程式有時可能必須將某些 HTML 文件列入快取中，以便使用者離線時可以存取，如有這個需求，你可以在 HTML 文件的 <HEAD> 加入 <link> 元素：
<link rel="offline-resource" href="myresource">
Firefox 3 看到這些語法時，就會將這些資源列入一個特殊的離線資源快取(offline resource cache)中，讓使用者在離線時，依舊可以被存取這些資源。
API
例子
這裡有個簡單的例子。
<!doctype html>
<html>
<head>
<script>
function updateOnlineStatus(msg) {
var status = document.getElementById("status");
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
status.setAttribute("class", condition);
var state = document.getElementById("state");
state.innerHTML = condition;
var log = document.getElementById("log");
log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
}
function loaded() {
updateOnlineStatus("load");
document.body.addEventListener("offline", function () {
updateOnlineStatus("offline")
}, false);
document.body.addEventListener("online", function () {
updateOnlineStatus("online")
}, false);
}
</script>
<style>...</style>
</head>
<body onload="loaded()">
<div id="status"><p id="state"></p></div>
<div id="log"></div>
</body>
</html>
