![Đóng [x]](http://dw1.s81c.com/i/c.gif){kind=small}
08.06.2010: Thêm các liên kết cho Phần 4 của loạt bài này trong các phần Giới thiệu về loạt bài này, Tóm tắt, và Tài nguyên.
29.06.2010: Thêm các liên kết cho Phần 5 của loạt bài này trong các phần Giới thiệu về loạt bài này, Tóm tắt, và Tài nguyên.
HTML 5 là một công nghệ được quảng cáo thổi phồng rất nhiều, nhưng có lý do chính đáng. Nó hứa hẹn sẽ là một điểm bùng phát công nghệ để mang các khả năng ứng dụng của máy tính để bàn đến cho trình duyệt. Do có triển vọng đối với các trình duyệt truyền thống, nên nó thậm chí còn có nhiều tiềm năng hơn cho các trình duyệt di động. Hơn nữa, các trình duyệt di động phổ biến nhất đã chấp nhận và triển khai thực hiện nhiều phần quan trọng của đặc tả HTML 5. Trong loạt bài năm phần này, bạn sẽ xem xét kỹ hơn về một số những công nghệ mới, là một phần của HTML 5, có thể có tác động rất lớn trong việc phát triển ứng dụng Web di động. Trong mỗi phần, bạn sẽ phát triển một ứng dụng Web di động đang làm việc để giới thiệu một tính năng của HTML 5, có thể được sử dụng trên các trình duyệt Web di động hiện đại giống như các trình duyệt đã thấy trên các thiết bị iPhone và các thiết bị dựa vào-Android .
Trong bài viết này, bạn sẽ phát triển các ứng dụng Web bằng các công nghệ Web mới nhất. Hầu hết các mã có ở đây chỉ là HTML, JavaScript và CSS — các công nghệ lõi của nhà phát triển Web bất kỳ. Điều quan trọng nhất mà bạn sẽ cần là các trình duyệt để thử nghiệm các ứng dụng. Hầu hết mã trong bài viết này sẽ chạy trên các trình duyệt mới nhất, có một số trường hợp ngoại lệ cần lưu ý. Tất nhiên bạn cũng phải thử nghiệm trên các trình duyệt di động, và bạn sẽ cần có các bản iPhone SDK và Android SKD mới nhất cho các trình duyệt đó. Trong bài viết này có sử dụng iPhone SDK 3.1.3 và Android SDK 2.1. Xem Tài nguyên để biết các liên kết..
Tại sao cần tạo ứng dụng của bạn làm việc không nối mạng?
Các ứng dụng Web không nối mạng hấp dẫn cả những người dùng lẫn các nhà phát triển vì một số lý do. Nhiều nhà phát triển thích có khả năng viết một ứng dụng Web đơn làm việc trên tất cả các máy điện thoại thông minh phổ biến nhất thay vì viết các ứng dụng nguyên gốc cho mỗi nền tảng. Chỉ vì điều đó sẽ thuận tiện cho các nhà phát triển thì không có nghĩa là nó sẽ được người dùng mong đợi. Khi điều đó xảy ra, các ứng dụng Web di động phải có khả năng cung cấp nhiều (hoặc hầu hết) các tính năng tương tự mà các ứng dụng di động nguyên gốc có thể cung cấp. Làm việc không nối mạng chắc chắn là một trong những tính năng đó. Một số ứng dụng sẽ phụ thuộc rất nhiều vào dữ liệu và dịch vụ từ mạng Internet — dù chúng có là một ứng dụng Web di động hay ứng dụng nguyên gốc hay không. Đối với các ứng dụng này, cần hiểu rằng chức năng có thể bị giảm bớt nếu người dùng không có kết nối Internet tốt. Tuy nhiên, ứng dụng này không thể không chạy hoàn toàn chỉ vì kết nối không tốt của người dùng. Với một ứng dụng Web truyền thống đó chính xác là những gì sẽ xảy ra.
Các khả năng làm việc không nối mạng đưa các ứng dụng Web di động lại gần giống với các ứng dụng nguyên gốc. Chúng có một số lợi ích khác nữa. Các trình duyệt Web đã luôn lưu trữ tài nguyên tĩnh trong bộ nhớ truy cập nhanh. Chúng dựa vào siêu dữ liệu từ các tiêu đề đáp ứng HTTP được các máy chủ Web của bạn gửi đi để lấy ra HTML, JavaScript, CSS, và các hình ảnh cần thiết để diễn tả trang Web. Nếu mọi thứ cần thiết để diễn tả trang Web được lưu trữ trong bộ nhớ truy cập nhanh, thì trang này tải rất nhanh chóng. Tuy nhiên, nếu một vài thứ nào đó không được lưu trữ trong bộ nhớ truy cập nhanh, thì nó có thể làm chậm đáng kể mọi thứ. Điều này xảy ra thường xuyên hơn bạn muốn. Có lẽ một tệp CSS đã có tiêu đề Cache-Control khác so với tất cả các tệp khác, hoặc có lẽ trình duyệt này bị loại ra khỏi bộ nhớ truy cấp nhanh vì nó đã đang chạy thiếu bộ nhớ.
Với các ứng dụng không nối mạng, bạn được đảm bảo rằng mọi thứ được lưu trữ
trong bộ nhớ truy cập nhanh. Các trình duyệt sẽ tải tất cả mọi thứ từ bộ
nhớ truy cập nhanh, mặc dù bạn cũng có thể kiểm soát những gì không nên
được phục vụ từ bộ nhớ truy cập nhanh. Đây là một nỗ lực thành công của
Ajax phổ biến để thêm một tham số dấu thời gian bổ sung vào các yêu cầu
GET của Ajax (hoặc thậm chí tệ hơn là sử dụng
POST khi GET thích
hợp) để tránh các trình duyệt lưu trữ một đáp ứng trong bộ nhớ truy cập
nhanh. Bạn sẽ không cần nỗ lực này cho các ứng dụng Web chạy không nối
mạng.
Các ứng dụng không nối mạng nghe rất kêu, vì vậy để tạo một ứng dụng này chắc phải phức tạp lắm, đúng không? Trên thực tế, nó lại khá đơn giản. Bạn cần làm ba việc:
- Tạo một tệp manifest (bản kê) có nối mạng
- Báo cho trình duyệt biết về tệp manifest
- Thiết lập kiểu MIME trên máy chủ
Có một tệp quan trọng: cache manifest (bản kê bộ nhớ truy cập nhanh) cho ứng dụng của bạn. Tệp này ra lệnh cho trình duyệt lưu trữ chính xác những gì trong bộ nhớ truy cập nhanh (và theo tùy chọn, không lưu trữ những gì trong bộ nhớ truy cập nhanh). Tệp này sẽ trở thành nguồn tin cậy cho các ứng dụng của bạn. Liệt kê 1 cho thấy một ví dụ về một tệp cache manifest.
Liệt kê 1. Tệp cache manifest đơn giản
CACHE MANIFEST # Version 0.1 offline.html /iui/iui.js /iui/iui.css /iui/loading.gif /iui/backButton.png /iui/blueButton.png /iui/cancel.png /iui/grayButton.png /iui/listArrow.png /iui/listArrowSel.png /iui/listGroup.png /iui/pinstripes.png /iui/redButton.png /iui/selection.png /iui/thumb.png /iui/toggle.png /iui/toggleOn.png /iui/toolbar.png /iui/whiteButton.png /images/gymnastics.jpg /images/soccer.png /images/gym.jpg /images/soccer.jpg |
Tệp này liệt kê tất cả các tệp mà ứng dụng của bạn cần chạy đúng. Tệp này bao gồm các tệp HTML cũng như JavaScript, CSS, và các hình ảnh. Nó có thể chứa các video, các tệp PDF, XML, và v.v.. Lưu ý rằng tất cả các địa chỉ URL trong ví dụ này là tương đối. Các URL tương đối bất kỳ phải liên quan đến tệp cache manifest. Trong trường hợp này, tệp cache manifest nằm trong thư mục gốc của ứng dụng Web của bạn. Hãy so sánh cấu trúc thư mục trong Liệt kê 2 với các URL tương đối trong Liệt kê 1.
Liệt kê 2. Phiên bản văn bản của cấu trúc thư mục cho ứng dụng Web này
Name
V images
gymnastics.jpg
soccer.png
V iui
backButton.png
blueButton.png
cancel.png
grayButton.png
iui.css-logo-touch-icon.png
iui.css
iui.js
iuix.css
iuix.js
listArrow.png
listArrowSel.png
listGroup.png
loading.gif
pinstripes.png
redButton.png
selection.png
thumb.png
toggle.png
toggleOn.png
toolbar.png
toolButton.png
whiteButton.png
manifest.mf
offline.html
> WEB-INF
|
Bạn có thể đã nhận thấy ứng dụng này đang sử dụng khung công tác iUI. Đây là một bộ công cụ JavaScript+CSS phổ biến để cung cấp cho các ứng dụng Web di động cái nhìn và cảm nhận các ứng dụng iPhone nguyên gốc. Như bạn có thể thấy từ Liệt kê 1 và Liệt kê 2, khung công tác này sử dụng một số hình ảnh kèm theo với các tệp JavaScript và CSS. Tuy nhiên, tất cả các tệp này sẽ được trình duyệt lưu trữ trong bộ nhớ truy cập nhanh và sẽ có thể sử dụng trong chế độ không nối mạng, miễn là chúng được liệt kê trong tệp manifest (bản kê).
Một điều quan trọng khác cần lưu ý trong Liệt kê 1 là thông tin phiên bản. Đây không phải là một phần của đặc tả này. Trong thực tế, thông tin phiên bản chỉ là một nhận xét trong tệp này. Tuy nhiên, điều chủ yếu là có một cái gì đó giống thông tin mà bạn có thể sử dụng để nói cho trình duyệt biết có một phiên bản mới về ứng dụng của bạn. Giả sử bạn đã thay đổi một số HTML hoặc một số JavaScript hoặc thậm chí là một hình ảnh. Nếu bạn không thay đổi tệp manifest này, thì trình duyệt sẽ không bao giờ bận tâm tải phiên bản tài nguyên mới mà bạn đã chỉnh sửa. Không có hạn sử dụng nào trên một cache manifest, vì vậy mọi thứ vẫn được lưu trữ, trừ khi người dùng xóa bộ nhớ truy cập nhanh hoặc thay đổi tệp manifest. Trình duyệt sẽ kiểm tra xem có một tệp manifest mới không. Để chỉ thị một tệp manifest mới, bạn chỉ cần thay đổi một cái gì đó/bất cứ điều gì trong tệp manifest hiện có. Quay lại ví dụ của bạn về thay đổi HTML trên trang Web này, nếu bạn đã thay đổi HTML và đã thay đổi chuỗi phiên bản trong tệp manifest, thì trình duyệt sẽ biết rằng tài nguyên đã thay đổi và phải tải chúng một lần nữa. Đặt số phiên bản trong một lời nhận xét là một cách dễ dàng để quản lý vòng đời của tệp này.
Nói cho trình duyệt biết về tệp manifest này
Còn thiếu một mảnh nữa để cho phép lưu trữ không nối mạng ứng dụng Web của bạn trong bộ nhớ truy cập nhanh. Trình duyệt Web cần biết rằng bạn muốn cho phép lưu trữ trong bộ nhớ truy cập nhanh và cần tìm tệp cache manifest của bạn ở đâu. Liệt kê 3 cho thấy cách rất dễ dàng này.
Liệt kê 3. Trang Web chạy không nối mạng
<!DOCTYPE html>
<html>
<html manifest="manifest.mf">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-touch-fullscreen" content="YES" />
<link rel="apple-touch-icon" href="/iui/iui-logo-touch-icon.png" />
<style type="text/css" media="screen">@import "/iui/iui.css";</style>
<script type="application/x-javascript" src="/iui/iui.js"></script>
<title>Let's do it offline</title>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle">Going offline</h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="menu" title="Sports" selected="true">
<li><a href="#gym"><img height="80" width="80"
src="/images/gym.jpg" align="middle"/>
<span style="display:inline-block;
vertical-align:middle">Gymnastics</span></a></li>
<li><a href="#soccer"><img src="/images/soccer.jpg"
align="middle"/>
<span style="display:inline-block;
vertical-align:middle">Soccer</span></a></li>
</ul>
<div id="gym" title="Gymnastics" class="panel">
<img src="/images/gymnastics.jpg" alt="Boys Gymnastics"/>
</div>
<div id="soccer" title="Soccer" class="panel">
<img src="/images/soccer.png" alt="Boys Soccer"/>
</div>
</body>
</html>
|
Khía cạnh quan trọng nhất của HTML này là phần tử html gốc. Lưu ý rằng nó có một thuộc tính được gọi là manifest (bản kê). Thuộc tính này nói cho trình duyệt biết rằng trang Web này có thể chạy không nối mạng. Giá trị của tham số manifest là địa chỉ URL đến tệp cache manifest của trang Web. Một lần nữa, đây có thể là một URL đầy đủ, mặc dù trong trường hợp này nó là một URL tương đối (với trang Web cụ thể). Điều khác cần lưu ý ở đây là DOCTYPE cho trang này. Đây là doctype (kiểu tài liệu) hợp quy cho các trang Web HTML 5. Đặc tả của ứng dụng Web không nối mạng không khai báo rằng bạn sử dụng DOCTYPE này; tuy nhiên, đó là điều quan trọng mà bạn cần làm. Nếu không, một số trình duyệt có thể không nhận ra trang này là một trang HTML 5 và có thể bỏ qua tệp cache manifest này. Phần còn lại của HTML chỉ là một ví dụ đơn giản về sử dụng iUI. Hình 1 cho thấy trang này trông giống như bộ mô phỏng iPhone.
Hình 1. Ứng dụng Web không nối mạng đang chạy trên bộ mô phỏng iPhone
Việc kiểm thử một ứng dụng không nối mạng có thể hơi khó khăn một chút. Nếu bạn có thể, cách dễ nhất cần làm là triển khai ứng dụng của bạn lên một máy chủ Web. Sau đó, bạn có thể truy cập trang chỉ một lần, tắt kết nối Internet của bạn, và cố gắng để truy cập nó một lần nữa. Nếu bất cứ có cái gì đó không chạy, thì bạn có thể đã bỏ sót một số tệp trong cache manifest. Trước khi bạn thử việc này, bạn sẽ cần tạo một mảnh quan trọng về cấu hình cho máy chủ Web của bạn.
Liệt kê 3 đã cho thấy rằng bạn chỉ thị vị trí của cache
manifest của bạn bằng cách sử dụng thuộc tính
manifest trên phần tử html gốc của trang Web
của bạn. Tuy nhiên, đặc tả cho các cache manifest chỉ ra rằng trình duyệt
phải thực hiện một bước xác nhận bổ sung khi nó tải về và xử lý một cache
manifest. Trình duyệt phải kiểm tra kiểu MIME của cache manifest, và kiểu
đó phải là text/cache-manifest. Điều này thường
có nghĩa là bạn cần cấu hình máy chủ Web của bạn để thiết lập kiểu MIME
này cho một tệp tĩnh, hoặc bạn phải viết một số mã để tạo tệp này một cách
động và thiết lập kiểu MIME. Cách đầu chắc chắn là cách hiệu quả hơn để
làm những việc này, nhưng đôi khi bạn cần phải làm cách sau nếu bạn không
có quyền kiểm soát cấu hình máy chủ (chẳng hạn như một máy chủ trong một
môi trường chia sẻ hoặc lưu trữ trên máy chủ). Nếu bạn kiểm soát máy chủ
này và nếu bạn đang sử dụng một máy chủ ứng dụng Java™ thì bạn có
thể cấu hình máy chủ này như là một phần của tệp Web.xml của ứng dụng Web.
Liệt kê 4 cho thấy một ví dụ về cấu hình máy chủ
này.
Liệt kê 4. Cấu hình Web.xml để thiết lập các kiểu MIME
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<!-- Servlets go here -->
<mime-mapping>
<extension>mf</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
|
Phần quan trọng ở đây rõ ràng là phần tử mime-mapping. Trong trường hợp
này, bạn đang nói rằng đối với bất kỳ tệp nào được kết thúc bằng phần mở
rộng .mf, hãy cung cấp cho chúng một kiểu MIME là
text/cache-manifest. Tất nhiên, thậm chí còn
hiệu quả hơn để dùng các tệp như vậy từ một máy chủ chuyên dụng để đáp ứng
nội dung tĩnh chẳng hạn như một máy chủ Web Apache. Trong một bản cài đặt
Apache điển hình, bạn sẽ chỉ cần sửa đổi tệp mime.types trong thư mục
httpd/conf như trong Liệt kê 5.
Liệt kê 5. Thiết lập kiểu MIME trong tệp mime.types
# This file controls what Internet media types are sent to the client for # given file extension(s). Sending the correct media type to the client # is important so they know how to handle the content of the file. # Extra types can either be added here or by using an AddType directive # in your config files. For more information about Internet media types, # please read RFC 2045, 2046, 2047, 2048, and 2077. The Internet media type # registry is at <http://www.iana.org/assignments/media-types/>. # MIME type Extensions text/cache-manifest mf # many more mappings... |
Trong cả hai ví dụ, bạn sử dụng mf cho phần mở
rộng của tệp manifest của bạn, vì thế tệp đó là manifest.mf. Điều này là
hoàn toàn tùy ý. Bạn có thể tạo nó là .manifest hay .foo, miễn là phần mở
rộng của tệp manifest phù hợp với phần mở rộng được sử dụng trong việc ánh
xạ trong tệp cấu hình của bạn. Lưu ý rằng ứng dụng và các máy chủ Web khác
có thể có các cơ cấu cấu hình khác nhau. Bây giờ bạn đã thấy các thành
phần thiết yếu trong việc tạo các ứng dụng Web di động không nối mạng bằng
cách sử dụng HTML 5, hãy xem xét một ví dụ phức tạp hơn để khám phá thêm
nhiều khả năng nữa của các ứng dụng Web di động không nối mạng.
Trong ví dụ trước, tất cả các nội dung là tĩnh. Thật tốt để có thể nhìn thấy mọi thứ trong chế độ không nối mạng. Một ứng dụng điển hình hơn cần đọc dữ liệu động từ máy chủ và các dịch vụ Web của nó. Để làm cho ví dụ của bạn thực tế hơn, hãy kéo về một số dữ liệu từ Twitter. Nếu bạn đã đọc các bài viết trước trong loạt bài này, thì điều này sẽ quen thuộc với bạn (xem Tài nguyên). Để bắt đầu, hãy xem xét HTML đã thay đổi của bạn với ví dụ này trong Liệt kê 6.
Liệt kê 6. HTML đã sửa đổi
<body onload="init()">
<div class="toolbar">
<h1 id="pageTitle">Going offline</h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="menu" title="Sports" selected="true">
<li><a href="#gym">
<img height="80" width="80" src="/images/gym.jpg" align="middle"/>
<span style="display:inline-block; vertical-align:middle">Gymnastics</span>
</a></li>
<li><a href="#soccer"><img src="/images/soccer.jpg" align="middle"/>
<span style="display:inline-block; vertical-align:middle">Soccer</span>
</a></li>
<li id="online" style="display: none"><img src="/images/online.jpg"/></li>
</ul>
<ul id="gym" title="Gymnastics"></ul>
<ul id="soccer" title="Soccer"></ul>
</body>
|
Sự khác biệt chính là các phần tử gym (phòng tập thể dục) và soccer (bóng
đá) bây giờ là các danh sách, và đang rỗng. Bạn sẽ điền chúng vào bằng các
mẩu tin của Twitter tương ứng về thể dục và bóng đá. Cũng nên lưu ý một
phần tử list item (mục danh sách) có id là
online chỉ rõ một hình ảnh sẽ được sử dụng để
cho người dùng biết ứng dụng này nối mạng (online) hoặc không nối mạng
(offline). Tuy nhiên, theo mặc định phần tử này bị ẩn dấu đi, hoặc chế độ
mặc định là không nối mạng. Phần tử body (phần thân) chỉ rõ một hàm init
được gọi ngay khi phần thân này tải. Liệt kê 7 cho thấy
hàm này.
Liệt kê 7. JavaScript khởi tạo trang
function init(){
if (navigator.onLine){
searchTwitter("gymnastics", "showGymTweets");
searchTwitter("soccer", "showSoccerTweets");
$("online").style.display = "inline";
}
gymTweets = localStorage.getItem("gymnastics");
if (gymTweets){
gymTweets = JSON.parse(gymTweets);
showGymTweets();
}
soccerTweets = localStorage.getItem("soccer");
if (soccerTweets){
soccerTweets = JSON.parse(soccerTweets);
showSoccerTweets();
}
document.body.addEventListener("online", function() {
$("online").style.display= "inline";
applicationCache.update();
applicationCache.addEventListener("updateready", function() {
applicationCache.swapCache();
}, false);
}, false);
document.body.addEventListener("offline", function() {
$("online").style.display = "none";
}, false);
}
|
Việc đầu tiên mà mã này làm là kiểm tra xem bạn có đang nối mạng hoặc không
nối mạng hay không. Nếu bạn đang nối mạng, thì nó sẽ hiển thị hình ảnh
trực tuyến. Thậm chí quan trọng hơn, nếu bạn đang nối mạng thì dữ liệu
được tải từ Twitter bằng cách gọi hàm searchTwitter. Thêm nữa, đây là một kỹ thuật (giải thích ở bài
viết trước trong loạt bài này — xem Tài nguyên) cho phép bạn tìm kiếm Twitter trực tiếp từ trình
duyệt bằng cách sử dụng JSONP. Tiếp theo, bạn cố gắng tải các mẩu tin hiện
có từ localStorage. Nếu bạn đã quen với localStorage, đây này là một khả năng HTML 5 khác
hoạt động khá tốt với chế độ không nối mạng. Hãy xem Phần 2 của loạt bài
này để tìm hiểu thêm về nó (xem Tài nguyên). Lưu
ý với cả hai tìm kiếm mới (được khởi động nếu bạn phát hiện ra rằng bạn
đang nối mạng) và với việc tải các mẩu tin đã lưu trữ cục bộ, các hàm
showGymTweets và showSoccerTweets được gọi. Đây là các hàm giống nhau, và Liệt kê 8 cho thấy hàm showGymTweets.
Liệt kê 8. Hàm Show Gym tweets
function showGymTweets(response){
var gymList = $("gym");
gymList.innerHTML = "";
if (gymTweets){
if (response){
gymTweets = response.results.reverse().concat(gymTweets);
}
} else {
gymTweets = response.results.reverse();
}
showTweets(gymTweets, gymList);
localStorage.setItem("gymnastics", JSON.stringify(gymTweets));
}
|
Hàm này có thể hiển thị các mẩu tin được lưu trữ cục bộ, các mẩu tin mới từ Twitter, hoặc kết hợp cả hai, nếu chúng đều tồn tại. Quan trọng nhất, hàm này giúp lưu trữ mọi thứ cục bộ, xây dựng bộ nhớ truy cập nhanh dữ liệu cục bộ về các mẩu tin của bạn. Đây là tất cả mã tiêu biểu để quản lý cả dữ liệu lưu trữ cục bộ, và dữ liệu trực tiếp từ các máy chủ. Hàm này cho phép các ứng dụng hoạt động trơn tru cho dù nó có nối mạng hay không nối mạng.
Quay lại Liệt kê 7, điều cuối cùng bạn làm là đăng ký các
trình xử lý sự kiện. Bạn đang đăng ký cho các sự kiện nối mạng hoặc không
nối mạng. Điều này sẽ cho bạn biết khi nào trạng thái nối mạng hoặc không
nối mạng của trình duyệt thay đổi. Ít nhất bạn có thể thay đổi hình ảnh
nối mạng, bật tắt nếu nó được hiển thị hay không. Trong trường hợp ứng
dụng chuyển sang nối mạng sau khi đang không nối mạng, bạn truy cập đối
tượng applicationCache. Đây là một đối tượng
diễn tả tất cả tài nguyên được lưu trữ trong bộ nhớ truy cập nhanh như đã
khai báo trong cache manifest. Trong trường hợp này, bạn gọi phương thức
update (cập nhật) của nó. Phương thức này ra
lệnh cho trình duyệt kiểm tra xem nó có phát hiện ra một bản cập nhật cho
applicationCache không. Như đã đề cập ở trên,
đầu tiên trình duyệt kiểm tra một bản cập nhật với tệp cache manifest. Bạn
thêm một trình nghe sự kiện khác để kiểm tra một bản cập nhật cho bộ nhớ
truy cập nhanh có sẵn. Nếu vậy, thì bạn gọi phương thức
swapCache trên
applicationCache. Việc này sẽ tải lại tất cả
các tệp được quy định trong tệp cache manifest.
Khi nói về tệp cache manifest, bạn cần một chi tiết cuối cùng cho ví dụ nâng cao này. Tệp cache manifest cần phải được sửa đổi như trong Liệt kê 9.
Liệt kê 9. Tệp cache manifest đã sửa đổi
CACHE MANIFEST # Version 0.2 CACHE: offline.html json2.js /iui/iui.js /iui/iui.css /iui/loading.gif /iui/backButton.png /iui/blueButton.png /iui/cancel.png /iui/grayButton.png /iui/listArrow.png /iui/listArrowSel.png /iui/listGroup.png /iui/pinstripes.png /iui/redButton.png /iui/selection.png /iui/thumb.png /iui/toggle.png /iui/toggleOn.png /iui/toolbar.png /iui/whiteButton.png /images/gym.jpg /images/soccer.jpg /images/online.jpg NETWORK: http://search.twitter.com/ |
Trong ví dụ này, bạn đã thêm một phần CACHE rõ
ràng vào tệp manifest. Tệp manifest có thể có các phần khác nhau, nhưng
nếu nó chỉ có một phần, thì giả định đó là
CACHE và có thể được bỏ qua. Lý do mà bạn đã rõ
ở đây là bạn cũng có một phần NETWORK. Phần này
nói cho trình duyệt biết rằng bất cứ điều gì đến từ miền cụ thể (trong
trường hợp này search.twitter.com) nên được lấy từ mạng và không bao giờ
được lưu trữ trong bộ nhớ truy cập nhanh. Vì bạn đang lưu trữ cục bộ các
kết quả tìm kiếm trong bộ nhớ truy cập nhanh từ Twitter, nên bạn chắc chắn
không muốn trình duyệt thực hiện bất kỳ lưu trữ gián tiếp nhiều truy vấn
hơn nữa trong bộ nhớ truy cập nhanh. Bây giờ, với việc lưu trữ tại chỗ,
ứng dụng sẽ luôn tải các mẩu tin trực tiếp từ Twitter, và nó cũng sẽ lưu
trữ các mẩu tin đó và làm cho chúng có sẵn cho người dùng ngay cả khi
thiết bị của người dùng bị ngắt kết nối.
Các ứng dụng Web đã đi qua một chặng đường dài kể từ những ngày của Mosaic. Các ứng dụng Web di động đã phát triển nhiều hơn. Thời của điện thoại WAP mà chỉ nói về WML (Wireless Markup Language – Ngôn ngữ đánh dấu không dây), đang thu hẹp lại. Bây giờ bạn yêu cầu nhiều thứ về các trình duyệt di động của mình mà thậm chí bạn lại không yêu cầu về các trình duyệt anh em của máy tính để bàn lớn hơn của chúng. Chức năng không nối mạng là một trong những tính năng đó. Các tiêu chuẩn được quy định trong HTML 5 đã đi qua một chặng đường dài để làm việc chạy các ứng dụng Web di động không nối mạng trở nên đơn giản cho các nhà phát triển. Trong phần tiếp theo của loạt bài này, bạn sẽ xem xét tiêu chuẩn HTML 5 khác, các Web Worker, có thể cải thiện đáng kể hiệu năng của các ứng dụng Web di động như thế nào.
| Mô tả | Tên | Kích thước | Phương thức tải |
|---|---|---|---|
| Article source code | offline.zip | 437KB | HTTP |
Học tập
- Tạo các ứng dụng Web di động với HTML 5, Phần 2: Mở khóa bộ nhớ cục
bộ cho các ứng dụng Web di động với HTML 5 (Michael Galpin,
developerWorks, 05.2010): Khám phá một tính năng mới quan trọng trong HTML
5 cho các ứng dụng không dây. Với việc chuẩn hóa bộ nhớ cục bộ và một API
đơn giản, hãy lưu trữ số lượng lớn dữ liệu trên máy khách và cải thiện
hiệu năng.
- Tạo ứng dụng Web di động với HTML 5, Phần 1: Kết hợp HTML 5, các API
định vị địa lý, và các dịch vụ Web để tạo ra các ứng dụng hỗn hợp di
động (Michael Galpin, developerWorks, 05.2010): Tìm và theo vết
các tọa độ vị trí để sử dụng trong các dịch vụ Web khác nhau. Sử dụng các
khía cạnh khác nhau của tiêu chuẩn định vị địa lý với HTML 5 và các dịch
vụ Web phổ biến để tạo ra một mashup di động thú vị trong Phần 1 của loạt
bài này.
- Tạo ứng dụng Web di động với HTML 5, Phần 4: Sử dụng các Web Worker
để tăng tốc các ứng dụng Web di động của bạn (Michael Galpin,
developerWorks,06.2010): Các Web Worker mang đa luồng đến cho các ứng dụng
Web. Tìm hiểu để làm việc với các Web Worker và những nhiệm vụ nào thích
hợp nhất với chúng.
- Tạo các ứng dụng web di động với HTML 5, Phần 5: Phát triển các tính
năng của giao diện người dùng trực quan mới trong HTML 5: Thêm Canvas,
CSS3, và nhiều phần tử ngữ nghĩa hơn nữa cho các ứng dụng Web di
động (Michael Galpin, developerWorks, 06.2010): Cung cấp đầy đủ đồ
họa 2-D trong trình duyệt với Canvas, gây chú ý nhất về các khả năng giao
diện người dùng mới trong HTML 5. Tìm hiểu để sử dụng Canvas và các phần
tử hình ảnh khác trong các ứng dụng Web di động của bạn.
- Tài liệu về bộ nhớ truy cập nhanh ứng dụng không nối mạng HTML 5:
Hãy xem xét nhiều thông tin chi tiết hơn của Apple trên các tệp manifest
và bộ nhớ truy cập nhanh ứng dụng.
- Tài nguyên không nối mạng trong Firefox: Không nối mạng không chỉ
dành cho di động. Tìm hiểu về cách Firefox thực hiện tiêu chuẩn này trong
Mozilla.
- Tạo các ứng dụng Ajax cho Web di động (Michael Galpin,
developerWorks, 03.2010): Khám phá xem cách sử dụng Ajax, một phần quan
trọng của ứng dụng Web di động bất kỳ như thế nào.
- Các phần
tử mới trong HTML 5 (Elliotte Rusty Harold, developerWorks,
08.2007): HTML 5 không chỉ về JavaScript. Tìm hiểu về một số cách đánh dấu
mới trong HTML 5.
- Các cuộc chiến trình duyệt Android và iPhone, Phần 1: WebKit để giải
cứu (Frank Ableson, developerWorks, 12.2009): Bạn có thích cách
tiếp cận ứng dụng Web di động bằng cách sử dụng cách tiếp cận HTML 5
không, khi vẫn muốn ứng dụng của bạn có trong iPhone App Store (Kho ứng
dụng iPhone) và Android Market? Xem cách bạn có thể nhận được mọi thứ tốt
nhất của cả hai thế giới trong Phần 1 của loạt bài viết gồm hai phần
này.
- Đi sâu
vào HTML 5: Đọc cuốn sách miễn phí này để có cái nhìn sâu sắc về
các kỹ thuật phát hiện HTML 5 cũng như nhiều tính năng của HTML
5.
- Thư viện
tham khảo Safari: Giữ tài nguyên này nơi dễ dùng nếu bạn phát
triển các ứng dụng web cho iPhone.
- Đặc
tả HTML 5 của W3C (Working Draft 03,2010): Khám phá nguồn đáng tin
cậy này về HTML 5.
- Nhiều các bài viết của tác giả này (Michael Galpin,
developerWorks, 06.2006 đến nay): Đọc các bài viết về XML, Eclipse, Apache
Geronimo, Ajax, nhiều API Google hơn, và các công nghệ khác.
- My
developerWorks: Cá nhân hóa kinh nghiệm developerWorks của
bạn.
- Chứng chỉ XML
của IBM: Tìm hiểu cách bạn có thể trở thành một nhà phát triển có
chứng chỉ-IBM về XML và các công nghệ liên quan.
- Thư
viện kỹ thuật XML: Xem Vùng developerWorks XML với một vùng rộng
lớn các bài viết kỹ thuật và các lời khuyên, các hướng dẫn, các tiêu
chuẩn, và các sách Đỏ của IBM.
- Các sự kiện kỹ thuật và webcast
của developerWorks: Theo sát với công nghệ trong các phiên
này.
- developerWorks trên Twitter: Tham gia ngày hôm nay để theo dõi
các tin tức của developerWorks.
- developerWorks podcasts: Nghe
các cuộc phỏng vấn và thảo luận thú vị dành cho các nhà phát triển phần
mềm.
Lấy sản phẩm và công nghệ
- Dự án Modernizr: Nhận được một
tiện ích toàn diện để phát hiện các tính năng HTML 5 bao gồm như
localStorage, applicationCache Web, các Web Worker, và những thứ
khác.
- Trang WEb của các nhà
phát triển Android: Tải về Android SDK, truy cập tài liệu tham
khảo API, và nhận được những tin tức mới nhất về Android.
- iPhone SDK: Nhận được
iPhone SDK mới nhất để phát triển các ứng dụng tiếp xúc iPad, iPhone và
iPod.
- Dự án mã nguồn mở Android: Nhận
được mã nguồn mở cho nền tảng di động Android.
- Tải về Google App
Engine SDK: Tải về các công cụ Java và Python để xây dựng các ứng
dụng Web có thể mở rộng bằng Google.
-
Các phiên bản đánh
giá sản phẩm IBM: Tải về hoặc khám
phá các bản dùng thử trực tuyến trong Sandbox SOA của IBM và nhận
được các công cụ phát triển ứng dụng thực hành của bạn và các sản phẩm
phần mềm trung gian từ DB2®, Lotus®, Rational®,
Tivoli®, và WebSphere®.
Thảo luận
- Tham gia diễn đàn thảo luận.
- Các
diễn đàn thảo luận lĩnh vực XML: Tham gia vào bất kỳ cuộc thảo
luận liên quan đến XML nào.
- Các blog developerWorks: Đọc
các blog và dành thời gian cho chúng.
