HTML5

發行項
07/23/2015

HTML5 的離線應用程式: '甜甜圈內徑' 快取

Craig Shoemaker

離線 HTML 應用可讓您建立不想使用原生 Web 瀏覽器技術透過網際網路連線運作的應用程式。包含在離線的應用程式的頁面會列出應用程式資訊清單中，並且因此都來自應用程式快取到網際網路的連線是否存在，或不。某些情況下，不過，如果使用網際網路連線，則可能會想要顯示來自伺服器的某些資料而不需要使用者變更頁面。

Scott Guthrie 引入「甜甜圈孔」快取的概念在 ASP 中。NET 中，快取的網頁可能會在其中包含的內容會獨立於快取的網頁更新的小型視窗。本教學課程示範如何實作呼叫 AJAX 時連接到網路，以向使用者顯示即時資料的離線網頁。離線時，網頁只是將呈現在網頁中的預設資料。

有幾個實作離線的應用程式的實際原因。雖然大部分的開發人員首先想到行動的內容時考慮可能會使用離線的應用程式的對象時，幾乎所有的網站可以因某些可用性，不論連線狀態。站台的首頁] 和 [與我們連絡」網頁會離線可用性的最佳候選人，因此斷線時，即使使用者可以取得組織中，一些基本資訊。

建置應用程式

在本教學課程中，示範了如何快取「與我們連絡」顯示的網頁之即將發生的事件通知給使用者。使用者一連上網路，就會看到即時活動清單，如果沒有，也會顯示電話號碼，供使用者洽詢活動資訊。無論使用者是否能夠存取公用網路，這種方法都可以讓使用者隨時掌握最新動態。

[圖 1 描述如何網頁供離線瀏覽，而圖 2 示範如何從應用程式快取服務時，頁面看起來，但電腦連線到 Web。

當使用者離線工作時，出現 [圖 1] 應用程式提示他事件資訊的呼叫

[圖 2 當使用者連線到網際網路時，應用程式會顯示從伺服器的事件資訊

資訊清單

應用程式資訊清單當做資源包含在離線的應用程式的主機清單。[圖 3 會顯示為使本範例的完整資訊清單檔案。

[圖 3 資訊清單檔案 (manifest.aspx)

CACHE MANIFEST
# version 1
CACHE:
contact.htm
style.css
jquery-1.6.3.min.js
map.png
NETWORK:
events.htm
<%@Page
    ContentType="text/cache-manifest"
    ResponseEncoding = "utf-8"
    Language="C#" AutoEventWireup="true"
    CodeBehind="manifest.aspx.cs"
    Inherits="ConditionalCaching.manifest" %>
<script language="CS" runat="server">
  void Page_Load(object sender, System.EventArgs e)
    {
      Response.Cache.SetCacheability(HttpCacheability.NoCache);
    }
</script>

檔案必須快取資訊清單的標頭的開頭，並且包含版本註解，以允許列出的檔案，套用到用戶端的變更。

接下來，[快取] 區段會參考 [連絡人] 頁面，是要提供給使用者，不論連線狀態。連絡網頁參考樣式表、 jquery 也和地圖影像，表示實體的辦公室位置。

最後，「網路」圖示以便在這個例子中確保存取 events.htm 網頁 (顯示在圖 4)。此頁面不包含在 [快取] 區段的原因，是因為在真實世界事件] 網頁會建置動態與伺服器產生的網頁。快取這類網頁時，將失去原本進行即時連線到網路時，使用者可以使用的事件資料的目的。使用 [事件] 網頁在「網路」圖示，而不是 [快取] 區段中所列的情況下，應用程式的快取 API 不會嘗試取消要求] 頁面。最後，「網路」圖示的頁面包含會告訴一定要嘗試擷取頁面從無論連線狀態的 Web 瀏覽器。

[圖 4 事件] 網頁 (events.htm)

<table border="1" cellpadding="2" cellspacing="0">
  <tr>
    <td>Aug 15</td>
    <td><a href="/events/anaheim">Anahiem Convention Center</a></td>
  </tr>
  <tr>
    <td>Sept 5</td>
    <td><a href="/events/los-angeles">Los Angeles Convention Center</a></td>
  </tr>
  <tr>
    <td>Oct 3</td>
    <td><a href="/events/las-vegas">Las Vegas Convention Center</a></td>
  </tr>
  <tr>
    <td>Nov 14</td>
    <td><a href="/events/denver">Colorado Convention Center</a></td>
  </tr>
</table>

請注意，資訊清單都會實作成 ASPX 檔，以停用瀏覽器快取的檔案。您或許會希望停用快取組態設定，透過 Web 伺服器上，但這種方法用於以下讓範例程式碼可攜性較供示範之用。

我們頁面的連絡人

連絡人的網頁 HTML，以顯示圖 5，實作，如您所預期不論是否頁面目前最否最佳化離線存取。最重要的詳細資料，要注意的 HTML 網頁中為識別碼為 localMessage 的段落內容。這個容器會保留使用者離線；工作時所顯示的內容連線到網際網路時，內容已經被取代的作業。

[圖 5 的連絡人] 頁面 (contact.htm)

<!DOCTYPE html>
<html manifest="manifest.aspx">
<head>
  <title></title>
  <link rel="Stylesheet" href="style.css" type="text/css" />
  <script src="jquery-1.6.3.min.js" type="text/javascript"></script>
  <script>
    $(function () {
      window.applicationCache.onupdateready = function (e) {
        applicationCache.swapCache();
        window.location.reload();
      }
      function isOnLine() {
        //return false;
        return navigator.onLine;
      }
      function showEventInfo() {
        if (isOnLine()) {
            $("#localMessage").hide();
            $.get("/events.htm", function (data) {
                $("#eventList").html(data);
                $("#eventList table tr:odd").addClass("alt");
            });
        }
        else {
          $("#localMessage").show();
        }
      }
      showEventInfo();
    });
  </script>
</head>
<body>
  <div id="container">
    <h1>Awesome Company</h1>
    <h2>Contact Us</h2>
    <p>
      Awesome Company<br />
      1800 Main Street<br />
      Anytown, CA 90210<br />
      (800) 555-5555<br />
      <a href="mailto:awesome@company.com">awesome@company.com</a>
    </p>
    <img src="map.png" />
    <div id="events">
      <h2>Events</h2>
      <p>We are coming to a city near you!</p>
      <p id="localMessage">Give us a call at (800) 555-5555
        to hear about our upcoming conference dates.</p>
      <div id="eventList"></div>
    </div>
    <div id="version">Version 1</div>
  </div>
</body>
</html>

請注意在頁面的 [指令碼] 區段中，所有的函式定義而執行巢狀方式置於 jquery 也可供文件的處理常式：

$(function () {
    ...
});

第一件事就是處理任何更新所處理的 updateready 事件載入應用程式快取中的頁面。如果應用程式資訊清單的變更，快取＞一節所述的所有檔案都複製到用戶端。可以使用新版本的檔案時，updateready 的事件引發，並在頁面載入可以連絡網頁的最新版本從快取呼叫 applicationCache.swapCache。最後，一旦載入記憶體的最新版本，並重新載入以向使用者顯示所做的變更：

window.applicationCache.onupdateready = function (e) {
  applicationCache.swapCache();
  window.location.reload();
}

接下來，頁面會需要一個機制，來偵測電腦是否處於連線或中斷連線的狀態。 IsOnLine 函式只會摘要唯讀 navigator.onLine 布林值屬性的呼叫。此封裝很方便，因為，應該要覆寫值，以供測試之用，您可以取消註解，則為 false 的回復線，而不必實際中斷連接的 Web 測試頁的離線的方式：

function isOnLine() {
  //return false;
  return navigator.onLine;
}

順便一提，使用 navigator.onLine 做為偵測連線狀態的唯一機制，是有點初步。有個更強大的方法，可偵測到的線上狀態，請參閱教學課程中，"HTML5 離線的外面使用，"Paul Kinlan 的。

ShowEvent 函式負責實作「甜甜圈內徑快取」功能為 HTML 的離線應用程式。函式會先偵測連線狀態的電腦，然後將其中一個提取和呈現即時事件資料或只是顯示網頁已經存在的事件資訊。

如果 isOnLine 函數會傳回，則為 true，將本機郵件看不見的使用者，並在啟動 [事件] 網頁的艾傑克斯呼叫。在識別非同步呼叫的回應之後，最後產生的 HTML 會傳給 [事件清單] 容器，以及表格樣式以及具有以 zebra 等量磁區。

如果相反地，電腦離線工作時，會向使用者顯示本機的訊息如下：

function showEventInfo() {
  if (isOnLine()) {
      $("#localMessage").hide();
      $.get("/events.htm", function (data) {
        $("#eventList").html(data);
        $("#eventList table tr:odd").addClass("alt");
      });
  }
  else {
    $("#localMessage").show();
  }
}

最後，資訊清單檔會參考 HTML 網頁的頂端填入資訊清單檔所指向的 html 項目的資訊清單的屬性：

<html manifest="manifest.aspx">

圖 6 顯示已經列在資訊清單和 [連絡人] 頁面所參考的 style.css 檔案。

[圖 6 樣式表 (style.css)

body
{
  font-family:Segoe UI, Arial, Helvetica, Sans-Serif;
  background-color:#eee;
}
h1
{
  text-transform:uppercase;
  letter-spacing:-2px;
  width:400px;
  margin-top:0px;
}
#container
{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
  width:700px;
  -webkit-box-shadow: 3px 3px 7px #999;
  box-shadow: 6px 6px 24px #999;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top:20px;
  background-color:#fff;
}
#events
{
  position:absolute;
  width:210px;
  right:20px;
  top:255px;
  border:1px solid #ccc;
  padding:10px;
  font-size:.7em;
  background-color:#eee;
}
#events h2
{
  margin:0px;
}
#version
{
  font-size:.7em;
  color:#ccc;
}
table
{
  border-collapse:collapse;
}
table, tr, td
{
  border:1px solid #999;
}
.alt
{
  background-color:#ccc;
}

完成

即使網頁載入到應用程式快取都來自快取是否與否，將會連線到網際網路的電腦，您可以建構您的網頁，利用線上資源在他們可以]。 "甜甜圈內徑快取」的運作方式是呼叫 AJAX 伺服器連線時，然後再呈現給使用者的結果。如果頁面處於中斷連線的狀態，應用程式要安靜地呈現網頁上提供的資料，真是兩全其美的！

揃埭

**Craig Shoemaker。

共用方式為