Tạo các ứng dụng Web di động với HTML 5, Phần 3: Tạo các ứng dụng Web di động làm việc không nối mạng với HTML 5

Cho phép ứng dụng của bạn chạy có hoặc không có kết nối Internet

Một phần hấp dẫn của các ứng dụng di động là bạn có thể lấy ứng dụng của bạn và dữ liệu của nó cho bạn bất cứ nơi nào bạn đến. Một thực tế của di động là, có lúc, một thiết bị di động không có một kết nối hoạt động tới Internet. Điều này có vẻ là một vấn đề không thể khắc phục đối với các ứng dụng Web di động. Tuy nhiên, các ứng dụng Web đã phát triển và trở nên có khả năng làm việc không nối mạng. Trong bài viết này, bạn sẽ tìm hiểu làm thế nào để chạy-không nối mạng ứng dụng Web di động của bạn, và tìm hiểu cách phát hiện khi nào ứng dụng của bạn chuyển từ không nối mạng (offline) sang có nối mạng (online) và ngược lại.

Michael Galpin, Kiến trúc sư phần mềm, Ludi Labs

Michael Galpin đã phát triển phần mềm Java một cách chuyên nghiệp từ năm 1998. Ông hiện đang làm việc cho eBay. Ông đã có bằng về toán học của Viện Công nghệ California.



29 06 2010 (Xuất bản lần đầu tiên vào ngày 18 11 2011)

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.

Giới thiệu về loạt bài này

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 .


Các điều kiện cần trước

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 từ viết tắt thông dụng

  • Ajax: JavaScript không đồng bộ + XML
  • API: Giao diện lập trình ứng dụng
  • CSS: Bảng định kiểu xếp chồng
  • HTML: Ngôn ngữ đánh dấu siêu văn bản
  • HTTP: Giao thức truyền siêu văn bản
  • JSON: Ký hiệu đối tượng JavaScript
  • JSONP: JSON có lớp đệm
  • MIME: Các phần mở rộng thư Internet đa năng
  • PDF: Định dạng tài liệu di động
  • SDK: Bộ công cụ cho nhà phát triển phần mềm
  • UI: Giao diện người dùng
  • URL: Trình định vị tài nguyên thống nhất
  • W3C: Hiệp hội mạng toàn cầu
  • WAP: Giao thức ứng dụng không dây
  • XML: Ngôn ngữ đánh dấu mở rộ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:

  1. Tạo một tệp manifest (bản kê) có nối mạng
  2. Báo cho trình duyệt biết về tệp manifest
  3. Thiết lập kiểu MIME trên máy chủ

Bản kê không nối mạng

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ê 1Liệ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
Ảnh chụp màn hình của ứng dụng Web không nối mạng đang chạy trên bộ mô phỏng iPhone cho ứng dụng Sports có các tùy chọn Gymnastics và Soccoer

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.


Cấu hình máy chủ Web

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.


Ví dụ nâng cao

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 showGymTweetsshowSoccerTweets đượ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.


Tóm tắt

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.


Tải về

Mô tảTênKích thước
Article source codeoffline.zip437KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=775542
ArticleTitle=Tạo các ứng dụng Web di động với HTML 5, Phần 3: Tạo các ứng dụng Web di động làm việc không nối mạng với HTML 5
publish-date=06292010