HTML5 ra đời có triển vọng đối với các trình duyệt truyền thống, thậm chí nó còn có nhiều tiềm năng hơn cho các trình duyệt di động. Các trình duyệt di động phổ biến nhất hiện nay đã chấp nhận và triển khai thực hiện nhiều phần quan trọng của đặc tả HTML5. Trong loạt bài này, các bạn sẽ cùng công ty thiet ke web chuyen nghiepOSVN tìm hiểu các công nghệ mới của HTML5 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, chúng ta 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à Android.
Với HTML5 nó rất dễ dàng để thực hiện một phiên bản offline của một ứng dụng web, bằng cách tạo ra một biểu hiện tập tin bộ nhớ cache.
HTML5 Application Cache
Application Cache là gì?
HTML5 giới thiệu bộ nhớ cache ứng dụng, có nghĩa là một ứng dụng web được lưu trữ và có thể truy cập mà không cần kết nối internet.
Ba lợi thế mà bộ nhớ cache ứng dụng có được:
- Trình duyệt ngoại tuyến – người dùng có thể sử dụng ứng dụng khi họ offline
- Tốc độ – lưu trữ tài nguyên tải nhanh hơn
- Giảm tải máy chủ – nguồn lực thay đổi trình duyệt sẽ chỉ tải được cập nhật từ máy chủ
Việc để tạo ra ứng dụng cũng không quá khó, 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ác trình duyệt hỗ trợ:
Internet Explorer 10, trình duyệt Firefox, Chrome, Safari và Opera hỗ trợ ứng dụng bộ nhớ cache.
Ví dụ về HTML5 cache Manifest
Ví dụ dưới đây cho thấy một tài liệu HTML với một biểu hiện bộ nhớ cache (cho trình duyệt ngoại tuyến):
<!DOCTYPE html>
<html manifest=”demo_html.appcache”>
<body>
<script src=”demo_time.js”></script>
<p id=”timePara”><button onclick=”getDateTime()”>Get Date and Time</button></p>
<p><img src=”img_logo.gif” width=”336″ height=”69″></p>
<p>Try opening <a href=”tryhtml5_html_manifest.htm” target=”_blank”>this page</a>, then go offline, and reload the page. The script and the image should still work.</p>
<p>Dịch vụ thiet ke website chuyen nghiep, chuẩn Seo tại Công ty thiết kế web OSVN</p>
</body>
</html>
Cơ bản về cache Manifest
Để kích hoạt application cache, chèn thuộc tính manifest vào thẻ <html>:
<!DOCTYPE HTML>
<html manifest=”demo.appcache”>
…
</html>
Một trang có thuộc tính manifest sẽ được lưu lại trong bộ nhớ cache khi người dùng truy cập đến nó. Nếu như trang web không thiết lập thuộc tính manifest thì nó sẽ không được lưu cache trừ khi trong file manifest có dòng lệnh thiết lập thuộc tính cho nó.
Phần đuôi mở rộng của files manifest là: “.appcache”
Một biểu hiện tập tin cần để được phục vụ với các loại phương tiện truyền thông chính xác, đó là “text / cache-manifest”. Phải được cấu hình trên máy chủ web.
File Manifest
File Manifest là một tập tin văn bản đơn giản, nó báo cho trình duyệt web những gì cần lưu cache
File Manifest có ba phần:
CACHE MANIFEST – tập tin được liệt kê dưới tiêu đề này sẽ được lưu trữ sau khi được tải về lần đầu tiên
NETWORK – tập tin được liệt kê dưới tiêu đề này đòi hỏi phải có kết nối đến máy chủ, và sẽ không bao giờ được lưu trữ
FALLBACK - tập tin được liệt kê dưới tiêu đề này xác định các trang dự phòng nếu một trang là không thể tiếp cận
CACHE MANIFEST
Dòng đầu tiên bắt buộc khai báo từ khóa CACHE MANIFEST:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
Những dòng bên dưới có quy định 3 file là css, hình ảnh, javascript sẽ được tải về máy từ website, sau đó chúng ta không cần kết nối đến internet , chúng sẽ được sử dụng.
NETWORK
Những phần sau dòng NETWORK yêu cầu phải có kết nối internet ví dụ như file login không bao giờ lưu trữ, và sẽ không bao giờ được làm việc offline.
NETWORK:
login.asp
Một dấu (*) có thể được sử dụng để chỉ ra rằng tất cả các nguồn lực / tập tin khác yêu cầu một kết nối Internet:
NETWORK:
*
FALLBACK
Phần FALLBACK dưới đây xác định rằng “offline.html” sẽ được phục vụ tại chỗ của tất cả các file trong thư mục / html / Danh mục, trong trường hợp kết nối internet không thể được thiết lập:
FALLBACK:
/html/ /offline.html
Lưu ý: URI đầu tiên là nguồn, thứ hai là fallback
Cập nhật Cache
Khi một ứng dụng được lưu trữ, nó vẫn còn được lưu trữ cho đến khi một trong những điều sau đây xảy ra:
Người sử dụng xóa bộ nhớ cache của trình duyệt
FIle manifest bị sửa đổi
Các bộ nhớ cache ứng dụng được cập nhật theo chương trình
Ví dụ:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Dòng bắt đầu với một “#” là dòng chú thích, nhưng cũng có thể phục vụ mục đích khác. Bộ nhớ cache của một ứng dụng chỉ được cập nhật khi nó thay đổi file manifest. Nếu bạn chỉnh sửa một hình ảnh hoặc thay đổi một chức năng hàm JavaScript, những thay đổi này sẽ không được tái lưu trữ. Cập nhật ngày và phiên bản trong dòng chú thích là một cách để làm cho trình duyệt lưu lại file của bạn.
Ghi chú về ứng dụng cache
Hãy cẩn thận với những gì bạn lưu cache.
Khi một tập tin được lưu trữ, trình duyệt sẽ tiếp tục hiển thị các phiên bản lưu trữ, ngay cả khi bạn thay đổi các tập tin trên máy chủ. Để đảm bảo trình duyệt cập nhật bộ nhớ cache, bạn cần thay đổi các file manifest.
Lưu ý: Các trình duyệt có thể giới hạn kích thước khác nhau cho dữ liệu lưu trữ (một số trình duyệt có một giới hạn 5MB cho mỗi trang web).
Kết luận:
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ẽ được cùng chúng tôi- Công ty thiết kế web OSVN 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.
Nguồn: http://ithietkeweb.net/gioi-thieu-cong-ty-thiet-ke-web/