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

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com