Phương pháp “Donut Hole” caching cho ứng dụng HTML 5 Offline

ID của bài: 2643152 - Xem sản phẩm mà bài này áp dụng vào.
Bung tất cả | Thu gọn tất cả

Ở Trang này

Về tác giả

Thu gọn bảng nàyBung rộng bảng này
Thu gọn hình ảnh nàyBung rộng hình ảnh này
2401266
Bài viết này được cung cấp bởi MVP Lê Hoàng Dũng. Microsoft chân thành cảm ơn những MVP đã chia xẻ những kinh nghiệm chuyên môn của mình với những người sử dụng khác. Bài viết này sẽ được đăng trên website hoặc blog của MVP sau đây. Nếu bạn muốn xem các bài viết khác được chia xẻ bởi MVP, vui lòng nháy chuột vào đây.

Tóm tắt thông tin

Ứng dụng HTML Offline cho phép bạn tạo các ứng dụng có thể làm việc khi không có kết nối internet bằng cách sử dụng các công nghệ tương thích với trình duyệt web. Các trang web được đính kèm trong một ứng dụng offline và được liệt kê trong application manifest và có thể lấy từ cache của ứng dụng cho dù có kết nối đến Internet hay không. Tuy nhiên, trong một số trường hợp, nếu kết nối internet tồn tại, bạn sẽ muốn hiển thị một số thông tin từ máy chủ mà không cần phải yêu cầu người dùng thay đổi trang web.

Scott Guthrie đã giới thiệu một khái niệm mới trong ASP.NET, đó là “donut hole” caching (“donut hole” tạm dịch là chỗ khuyết), nơi mà cached page (bản sao của trang web ở server) có thể chứa các cửa sổ nhỏ để có thể cho phép một trang web offline có thể thực hiện các lời gọi AJAX khi có kết nối internet để có thể hiện thị thông tin cập nhật đến người sử dụng. Khi rơi vào trạng thái offline, trang này chỉ đơn giản hiển thị dữ liệu mặc định của nó.

Có nhiều lý do khiến chúng ta phải nghĩ đến việt xây dựng các ứng dụng offline. Phần lớn các lập trình viên nghĩ rằng ứng dụng offline thường dùng trong các trường hợp người dùng sử dụng thiết bị di dộng, nhưng thực tế hầu hết các trang web đều có thể hưởng lợi từ việc cài đặt ứng dụng offline. Với một website, trang chủ và trang liên hệ là các đối tượng tuyệt vời để chúng ta cài đặt cho phép chúng chạy offline, khi đó người sử dụng có thể truy xuất đến các thông tin liên hệ của tổ chức sở hữu website cho dù có kết nối internet hay không.


Thu gọn hình ảnh nàyBung rộng hình ảnh này
Hình 1. Khi người dùng làm việc không có kết nối internet , ứng dụng nhắc nhở anh ta gọi điện để có thông tin về các sự kiện.


Hình 1. Khi người dùng làm việc không có kết nối internet , ứng dụng nhắc nhở anh ta gọi điện để có thông tin về các sự kiện.

Thu gọn hình ảnh nàyBung rộng hình ảnh này
Hình 2 Khi người dùng kết nối đến Internet, trang web hiển thị danh sách các sự kiện (lấy từ server)


Hình 2. Khi người dùng kết nối đến Internet, trang web hiển thị danh sách các sự kiện (lấy từ server)

Manifest của ứng dụng

Manifest của ứng dụng chứa danh sách các tài nguyên sẽ được lưu cùng ứng dụng offline. Hình 3 cho thấy nội dung đầy đủ của tập tin manifest cho ứng dụng mẫu trong bài viết.

Hình 3. Manifest File (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>
Tập tin bắt đầu bằng header CACHE MANIFEST và có cả một dòng chú thích về phiên bản hiện tại, chú thích này cho phép thay đổi danh sách các file gởi về lưu tại máy khách khi cần.

Tiếp đó là mục CACHE tham chiếu đến trang liên hệ nhằm mục đích cho phép người dùng truy cập đến trang này cho dù có kết nối internet hay không. Trang liên hệ cần tham chiếu đến tập tin css, jquery và hình ảnh mô tả vị trí của công ty.

Và cuối cùng là mục NETWORK có có đính kèm tên trang events.htm (xem Hình 4). Trang này không được đính kèm trong mục CACHE là bởi vì trang events sẽ được sinh ra ở server tại thời điểm yêu cầu. Nếu chúng ta cache một trang như vậy thì sẽ ngăn chặn khả năng tải về dữ liệu về cac sự kiện cho người dùng khi có kết nối internet. Khi trang này được liệt kê trong mục NETWORK thay vì mục CACHE, Application Cache API sẽ không ngăn cản lời gọi lên server để yêu cầu trang này. Và điều đó có nghĩa là, khi trang được đính kèm trong mục NETWORK, thì trình duyệt sẽ luôn tìm cách cập nhật trang từ server khi có kết nối internet.

Hình 4. Trang sự kiện (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>
Lưu ý rằng tập tin Manifest có cài đặt một trang ASPX để vô hiệu hóa việc cache tập tin ở trình duyệt. Có thể bạn sẽ thích vô hiệu hóa việc cache ở Web server thông qua tập tin cấu hình, nhưng cách tiếp cận được sử dụng ở đây nhằm giúp cho việc mã trình diễn đơn giản hơn.

Trang liên hệ

Trang liên hệ (xem Hình 5), sẽ được cài đặt để tối ưu cho việc truy xuất offline. Chi tiết đang lưu ý nhất đó là nội dung của đoạn văn bản (thẻ <p>) có ID là localMessage. Đoạn văn này chứa thông tin khi người sử dụng làm việc offline, và nội dung đó sẽ bị thay đổi khi có kết nối Internet.

Hình 5. Trang liên hệ (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>
Lưu ý rằng trong phần javascript của trang web, tất cả các phương thức dduwwocj định nghĩa và chạy lồng trong khối:

$(function () {
    ...
});
Phần đầu tiên của mã javascript đó là thực hiện các cập nhật cache của ứng dụng bằng cách xử lý sự kiện updateready. Nếu như manifest của ứng dụng thay đổi, tất các tập tin được liệt kê trong mục CACHE sẽ được sao chép đến trình khách. Và khi các phiên bản mới của các tập tin này xuất hiện thì sự kiện updateready sẽ được phát ra và trang web có thể nạp các phiên bản mới nhất của trang liện hệ từ cache bằng cách gọi applicationCache.swapCache. Cuối cùng, khi mà phiên bản mới nhất của trang liên hệ đã được nạp vào bộ nhớ, trang sẽ được nạp lại để hiển thị các htay đổi đến người sử dụng:

window.applicationCache.onupdateready = function (e) {
  applicationCache.swapCache();
  window.location.reload();
}
Tiếp đến, trang web cần phải xác định xem thử máy tính đang làm việc ở tình trạng có kết nối internet hay không. Phương thức isOnLine sẽ kiểm tra thuộc tính chỉ đọc navigator.onLineBoolean. Việc cài đặt phương thức này sẽ rất tiện dụng nếu như bạn muốn trả về bất cứ giá trị true hay false để kiểm thử mà không cần phải ngắt kết nối internet.

function isOnLine() {
  //return false;
  return navigator.onLine;
}
Tuy nhiên, sử dụng thuộc tính navigator.onLine để xác định tình trạng kết nối là hơi “thô sơ”. Để có cách tốt hơn, làm ơn hãy đọc hướng dẫn “Working Off the Grid with HTML5 Offline,” của Paul Kinlan.

Phương thức showEvent được dùng để thiết lập chức năng “donut hole caching” cho ứng dụng HTML offline. Phương thức này đầu tiên sẽ kiểm tra tình trạng kết nối của máy tính và sau đó sẽ lấy dữ liệu về từ server hoặc chỉ hiển thị thông tin đã tồn tại trên trang web.

Trong trường hợp phương thức isOnLine trả về true, nội dung có sẵn sẽ bị che đi và sẽ có một lời gọi AJAX đến trang sự kiện được phát ra. Khi có đáp trả cho lời gọi bất đồng bộ này thì kết quả trả về sẽ được điền vào bên trong thẻ <p> có id là eventList.

Ngược lại, nếu máy tính đang ở tình trạng ngắt kết nối, thông điệp có sẵn sẽ được hiển thị cho người dùng.

function showEventInfo() {
  if (isOnLine()) {
      $("#localMessage").hide();
      $.get("/events.htm", function (data) {
        $("#eventList").html(data);
        $("#eventList table tr:odd").addClass("alt");
      });
  }
  else {
    $("#localMessage").show();
  }
}
Cuối cùng, tập tin manifest phải được tham chiếu tại phần đầu của trang HTML bằng cách sử dụng thuộc tính attribute với giá trị gán cho nó là chuỗi trỏ đến tập tin manifest.

<html manifest="manifest.aspx">
Hình 6 sẽ hiển thị nội dung của tập tin style.css, tập tin này không được liệt kê trong tập tin manifest và được tham chiếu bởi trang liên hệ.

Hình 6 Style Sheet (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;
}
Kết luận

Kỹ thuật “Donut hole caching” làm việc nhờ vào lời gọi AJAX đến máy chủ khi kết nối tồn tại và sau đó chuyển kết quả trả về đến giao diện người dùng. Nếu trang web đang ở trạng thái ngắt kết nối, ứng dụng sẽ hiển thị dữ liệu đã có sẵn trên trang web.

Tài nguyên
Về tác giả Craig Shoemaker
Craig Shoemaker là một lập trình viên, người làm video hướng dẫn về kỹ thuật, một blogger và giám đốc về hướng dẫn sử dụng sản phẩm cho Infragistics. Là người sáng lập hai trang web Polymorphic Podcast và Pixel8, Shoemaker đang thực hiện những việc mà anh cho là có ý nghĩa nhất, đó là cống hiến cho cộng đồng và giới thiệu những công nghệ nổi bật nhất . Shoemaker là một Microsoft ASP.NET MVP, ASP Insider và là diễn giả của nhiều nhóm lập trình viên và các chương trình của các doanh nghiệp.Anh cũng là đồng tác giải của các cuốn sách “Beginning ASP.NET 2.0 AJAX” (Wrox, 2007) và “Beginning ASP.NET AJAX” (Wrox, 2006), và là tác giả của các video hướng dẫn lập trình được cung cấp bởi Pluralsight, TekPub và tạp chí CODE Magazine. Bạn có thể kết nối với anh ấy trên Twitter @craigshoemaker hoặc gởi mail đến CShoemaker@infragistics.com.

Tuyên bố Không chịu trách nhiệm Nội dung Giải pháp Cộng đồng

CÔNG TY MICROSOFT VÀ/HOẶC CÁC NHÀ CUNG CẤP CỦA HỌ KHÔNG BẢO ĐẢM VỀ TÍNH PHÙ HỢP, ĐỘ TIN CẬY HOẶC TÍNH CHÍNH XÁC CỦA THÔNG TIN VÀ HÌNH ẢNH LIÊN QUAN Ở ĐÂY. MỌI THÔNG TIN VÀ HÌNH ẢNH NHƯ VẬY ĐƯỢC CUNG CẤP “NHƯ NGUYÊN MẪU” MÀ KHÔNG CÓ BẤT KỲ BẢO ĐẢM NÀO. MICROSOFT VÀ/HOẶC CÁC NHÀ CUNG CẤP CỦA HỌ KHÔNG CHỊU TRÁCH NHIỆM ĐỐI VỚI MỌI BẢO ĐẢM VÀ ĐIỀU KIỆN VỀ THÔNG TIN VÀ HÌNH ẢNH LIÊN QUAN NÀY, BAO GỒM CẢ MỌI BẢO ĐẢM VÀ ĐIỀU KIỆN LIÊN QUAN VỀ TÍNH THƯƠNG MẠI, PHÙ HỢP CHO MỘT MỤC ĐÍCH ĐẶC BIỆT, NỖ LỰC CỦA CÔNG VIỆC, TƯ CÁCH VÀ CAM KẾT KHÔNG VI PHẠM. BẠN ĐỒNG Ý MỘT CÁCH CỤ THỂ LÀ KHÔNG CÓ TRƯỜNG HỢP NÀO MÀ MICROSOFT VÀ/HOẶC CÁC NHÀ CUNG CẤP CỦA HỌ BỊ RÀNG BUỘC VÀO BẤT KỲ THIỆT HẠI TRỰC TIẾP, GIÁN TIẾP, TRỪNG PHẠT, TÌNH CỜ, ĐẶC BIỆT, HỆ QUẢ HOẶC BẤT KỲ THIỆT HẠI DẠNG NÀO, BAO GỒM NHƯNG KHÔNG GIỚI HẠN THIỆT HẠI DO MẤT MÁT, DỮ LIỆU HOẶC LỢI ÍCH, XẢY RA HOẶC TRONG MỌI CÁCH LIÊN QUAN ĐẾN VIỆC SỬ DỤNG HOẶC KHÔNG THỂ SỬ DỤNG THÔNG TIN VÀ HÌNH ẢNH LIÊN QUAN CÓ Ở ĐÂY, DÙ LÀ DỰA VÀO HỢP ĐỒNG, LỖI GÂY THIỆT HẠI, SƠ SUẤT, NGHĨA VỤ PHÁP LÝ HOẶC BẤT KỲ CƠ SỞ NÀO KHÁC, NGAY CẢ NẾU MICROSOFT HOẶC BẤT KỲ NHÀ CUNG CẤP NÀO CỦA HỌ ĐÃ ĐƯỢC TƯ VẤN VỀ KHẢ NĂNG BỊ THIỆT HẠI.

Thuộc tính

ID của bài: 2643152 - Lần xem xét sau cùng: 01 Tháng Mười Hai 2011 - Xem xét lại: 2.0
Áp dụng
  • Microsoft ASP.NET 4.0
Từ khóa: 
kbprb kbtshoot kbstepbystep kbgraphxlink kbmvp KB2643152

Cung cấp Phản hồi

 

Kontaktieren Sie uns, um weitere Hilfe zu erhalten

Kontaktieren Sie uns, um weitere Hilfe zu erhalten
Wenden Sie sich an den Answer Desk, um professionelle Hilfe zu erhalten.