Hiển thị HTML5 trong trình duyệt cũ hơn bằng Google Chrome Frame

Giới thiệu

HTML5 thêm vô số các công cụ tuyệt vời mới vào hộp công cụ dành cho nhà phát triển web, bao gồm:

  • Các API JavaScript mới, mạnh mẽ hơn
  • SVG cho đồ họa vectơ
  • Canvas cho đồ hoạ 2D và đồ hoạ WebGL 3D
  • CSS3 cho góc tròn, độ dốc, v.v.
  • Mã đánh dấu sinh động hơn

Danh sách này tất nhiên là không đầy đủ; nền tảng web đã phát triển mạnh mẽ và khoảng cách giữa trình duyệt cũ và trình duyệt hiện đại đang ngày càng mở rộng.
Mọi trình duyệt chính dành cho máy tính hiện đều hỗ trợ các phần quan trọng của HTML5 trong phiên bản mới nhất, nhưng các trình duyệt cũ vẫn tồn tại nhiều vấn đề gây ra thách thức cho việc áp dụng các tính năng mới nhất và tuyệt vời nhất hiện nay.

Google Chrome Frame có thể giúp bạn xây dựng các trang HTML5 tiên tiến nhất hiện nay trong khi vẫn cho phép những người sử dụng trình duyệt cũ xem nội dung của bạn.

Google Chrome Frame là gì

Google Chrome Frame là một trình bổ trợ dành cho Internet Explorer cho phép kết xuất toàn bộ canvas trình duyệt bằng công cụ kết xuất của Google Chrome. Trình bổ trợ này hỗ trợ tất cả các tính năng HTML5 mà bạn tìm thấy trong Chrome được tích hợp liền mạch vào trải nghiệm người dùng trên Internet Explorer. Chrome Frame có sẵn cho Internet Explorer 6, 7, 8 và 9. Chrome Frame chắc chắn sẽ hữu ích hơn khi hỗ trợ trình duyệt cũ như IE6-to-IE8. Nhưng nếu bạn yêu cầu WebGL cho ứng dụng của mình, việc yêu cầu Chrome Frame cho người dùng IE9 cũng có thể hữu ích.

Lớp polyfill HTML5 cung cấp một cách khác để giúp quá trình chuyển đổi sang các trình duyệt mới hơn diễn ra suôn sẻ. Thật không may là chúng không thể mô phỏng mọi tính năng và làm chậm trang của bạn trong trình duyệt cũ, vốn đã chậm hơn so với thế hệ mới, thậm chí còn nhiều hơn nữa.

Ngay cả khi trang web của bạn không cần tính năng HTML5, việc sử dụng Chrome Frame vẫn có thể cung cấp trải nghiệm người dùng tốt hơn. Đối với những người dùng đã cài đặt trình duyệt này, quá trình kết xuất thường sẽ nhanh hơn và họ có thể truy cập được các tính năng không được hỗ trợ trong các trình duyệt cũ. Tất nhiên, bạn vẫn có thể quyết định hỗ trợ các trình duyệt cũ cho người dùng không có Chrome Frame trên máy của họ.

Chọn tham gia

Bạn có thể cho phép Chrome Frame hiển thị một trang bằng cách thêm thẻ meta HTML hoặc sử dụng tiêu đề HTTP. Điều này rất quan trọng. Điều này có nghĩa là sẽ không có trang web nào bị lỗi nếu người dùng đã cài đặt Chrome Frame, vì trang web có toàn quyền kiểm soát việc sử dụng trình bổ trợ hoặc chế độ hiển thị mặc định. Các đoạn mã sau đây cho thấy cách một trang web có thể chọn tham gia hiển thị bằng Chrome Frame.

Lựa chọn 1: Tiêu đề HTTP (bạn có thể thêm tiêu đề này vào cấu hình máy chủ HTTP (ví dụ: Apache):

X-UA-Compatible: chrome=1

Cách 2: Thẻ meta (Chỉ cần dán thẻ này vào phần HTML <head> của bạn)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Sau khi bạn đã thêm một trong các trình duyệt này vào trang web của mình, các trang sẽ hiển thị bằng Chrome Frame nếu được cài đặt trên máy của người dùng.

Nhắc sử dụng Google Chrome Frame

Bạn có thể quyết định sẽ ngừng hỗ trợ hoàn toàn cho các trình duyệt cũ vì nhiều lý do như:

  • Trang web của bạn yêu cầu các tính năng hiện đại như video HTML5, canvas, WebGL hoặc CSS3
  • Thời gian phát triển dành cho các trình duyệt cũ quá cao
  • Rút ngắn thời gian phát triển cho các tính năng mới

Chrome Frame có thể cung cấp một chiến lược để tiếp tục cho phép người dùng trình duyệt cũ tiếp tục sử dụng trang web của bạn.

Chrome Frame truyền tải rằng phiên bản này có sẵn bằng cách mở rộng tiêu đề Tác nhân người dùng của máy chủ bằng chuỗi "chromeframe". Để biết thêm thông tin, hãy xem Tác nhân người dùng Chrome Frame.

Sử dụng tính năng phát hiện phía máy chủ để tìm mã thông báo này và xác định xem có thể sử dụng Chrome Frame cho một trang hay không. Nếu có Chrome Frame, bạn có thể chèn thẻ meta cần thiết. Nếu không, bạn có thể chuyển hướng người dùng đến một trang giải thích cách cài đặt Chrome Frame. Thay vì nhận dạng phía máy chủ, bạn có thể sử dụng tập lệnh CFInstall.js để phát hiện Chrome Frame và nhắc người dùng cài đặt trình bổ trợ mà không cần khởi động lại trình duyệt. Sử dụng tập lệnh rất đơn giản. Chỉ cần thêm các thẻ tập lệnh và các kiểu tùy chọn vào trang của bạn như trong ví dụ sau:

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

Tự nhắc bản thân

Bạn cũng có thể quyết định tự tạo một trang đích hoặc tạo lớp. Đưa người dùng tới URL này

http://www.google.com/chromeframe/

có thể được đặt trong IFRAME.

Thêm thông số chuyển hướng để đưa người dùng quay lại trang web của bạn sau khi quá trình cài đặt hoàn tất:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Thay vì truy cập trang đích Chrome Frame, bạn cũng có thể chuyển trực tiếp người dùng đến EULA để tiết kiệm một bước trong quá trình cài đặt. http://www.google.com/chromeframe/eula.html

Không cần quyền quản trị

Người dùng có thể cài đặt Chrome Frame mà không cần có đặc quyền quản trị trên máy của mình.

Thêm tham số user=true để cho phép cài đặt Chrome Frame ở cấp người dùng, như trong ví dụ sau:

http://www.google.com/chromeframe/?user=true

Cài đặt dành cho doanh nghiệp

Các doanh nghiệp có thể triển khai Chrome Frame trên toàn công ty bằng cách sử dụng trình cài đặt MSI mà bạn có thể tải xuống tại đây: http://www.google.com/chromeframe/eula.html?msi=true.

Để biết thêm thông tin về việc triển khai Chrome và doanh nghiệp, hãy truy cập http://www.chromium.org/administrators.

Nhận con nuôi

Nhiều trang web lớn như yahoo.com, wordpress.com và một số tài sản của Google đã sử dụng Google Chrome Frame. Bên cạnh việc giúp người dùng truy cập vào trải nghiệm web hiện đại hơn trên nhiều trang web, Chrome Frame cũng cải thiện đáng kể thời gian tải ban đầu. Bạn có thể kiểm tra xem Chrome Frame có giúp trang web của bạn kết xuất nhanh hơn hay không bằng cách truy cập vào webpagetest.org rồi chọn Chrome Frame làm trình duyệt.

Xem thêm thông tin tại đây

Để biết thêm thông tin, hãy xem Hướng dẫn bắt đầu hoặc xem video này của Google IO 2011