Bản cập nhật về Thành phần web – thêm thời gian để nâng cấp lên các API phiên bản 1

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

API Thành phần web phiên bản 1 là một tiêu chuẩn nền tảng web đã được cung cấp trong Chrome, Safari, Firefox và (sắp tới) Edge. API phiên bản 1 được hàng triệu trang web sử dụng, tiếp cận hàng tỷ người dùng mỗi ngày. Các nhà phát triển sử dụng API bản nháp v0 đã đưa ra ý kiến phản hồi có giá trị ảnh hưởng đến thông số kỹ thuật. Tuy nhiên, Chrome chỉ hỗ trợ các API phiên bản 0. Để đảm bảo khả năng tương tác, vào cuối năm ngoái, chúng tôi đã thông báo rằng các API nháp này không còn được dùng nữa và dự kiến sẽ bị xoá kể từ Chrome 73.

Vì có đủ nhà phát triển yêu cầu thêm thời gian để di chuyển, nên các API này chưa bị xoá khỏi Chrome. Chúng tôi dự định xoá các API nháp phiên bản 0 trong Chrome 80, vào khoảng tháng 2 năm 2020.

Sau đây là những điều bạn cần biết nếu cho rằng mình có thể đang sử dụng API phiên bản 0:

Quay lại tương lai: tắt các API phiên bản 0

Để kiểm thử trang web khi tắt API v0, bạn cần khởi động Chrome từ dòng lệnh bằng các cờ sau:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

Bạn cần thoát Chrome trước khi khởi động trình duyệt này từ dòng lệnh. Nếu đã cài đặt Chrome Canary, bạn có thể chạy quy trình kiểm thử trong Canary trong khi vẫn tải trang này trong Chrome.

Cách kiểm thử trang web khi tắt API phiên bản 0:

  1. Nếu bạn đang dùng Mac OS, hãy duyệt đến chrome://version để tìm đường dẫn thực thi cho Chrome. Bạn sẽ cần đường dẫn này trong bước 3.
  2. Thoát Chrome.

  3. Khởi động lại Chrome bằng cờ dòng lệnh:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    Để biết hướng dẫn về cách khởi động Chrome bằng cờ, hãy xem phần Chạy Chromium bằng cờ. Ví dụ: trên Windows, bạn có thể chạy:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

  4. Để kiểm tra kỹ xem bạn đã khởi động trình duyệt đúng cách hay chưa, hãy mở một thẻ mới, mở bảng điều khiển DevTools rồi chạy lệnh sau:

    console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

    Nếu mọi thứ hoạt động như dự kiến, bạn sẽ thấy:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

    Nếu trình duyệt báo cáo đúng cho bất kỳ hoặc tất cả các tính năng này, thì có gì đó không ổn. Hãy đảm bảo bạn đã thoát hoàn toàn Chrome trước khi khởi động lại bằng các cờ này.

  5. Cuối cùng, hãy tải ứng dụng và chạy qua các tính năng. Nếu mọi thứ hoạt động như dự kiến, bạn đã hoàn tất.

Sử dụng polyfill v0

Các polyfill Thành phần web phiên bản 0 hỗ trợ các API phiên bản 0 trên những trình duyệt không hỗ trợ gốc. Nếu trang web của bạn không hoạt động trên Chrome khi API v0 bị tắt, thì có thể bạn không tải polyfill. Có một số khả năng:

  • Bạn không tải polyfill nào cả. Trong trường hợp này, trang web của bạn sẽ không hoạt động trên các trình duyệt khác, chẳng hạn như Firefox và Safari.
  • Bạn đang tải polyfill có điều kiện dựa trên tính năng phát hiện trình duyệt. Trong trường hợp này, trang web của bạn sẽ hoạt động trên các trình duyệt khác. Chuyển đến phần Tải polyfill.

Trước đây, nhóm dự án Polymer và các nhóm khác đã đề xuất tải polyfill có điều kiện dựa trên tính năng phát hiện. Phương pháp này sẽ hoạt động tốt khi các API v0 bị tắt.

Cài đặt polyfill v0

Các polyfill Thành phần web phiên bản 0 chưa bao giờ được phát hành lên sổ đăng ký npm. Bạn có thể cài đặt polyfill bằng Bower nếu dự án của bạn đã sử dụng Bower. Hoặc bạn có thể cài đặt từ tệp zip.

  • Cách cài đặt bằng Bower:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • Để cài đặt từ tệp zip, hãy tải bản phát hành 0.7.x mới nhất xuống từ GitHub:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    Nếu cài đặt từ tệp zip, bạn sẽ phải cập nhật polyfill theo cách thủ công nếu có phiên bản khác. Bạn nên kiểm tra polyfill trong mã của mình.

Tải polyfill v0

Các polyfill Thành phần web phiên bản 0 được cung cấp dưới dạng hai gói riêng biệt:

webcomponents-min.js Bao gồm tất cả các polyfill. Gói này bao gồm polyfill shadow DOM, lớn hơn nhiều so với các polyfill khác và có tác động lớn hơn đến hiệu suất. Chỉ sử dụng gói này nếu bạn cần hỗ trợ shadow DOM.
webcomponents-lite-min.js Bao gồm tất cả các polyfill ngoại trừ DOM tối. Lưu ý: Người dùng Polymer 1.x nên chọn gói này vì tính năng mô phỏng Shadow DOM được đưa trực tiếp vào thư viện Polymer. Người dùng Polymer 2.x cần một phiên bản polyfill khác. Hãy xem bài đăng trên blog của Dự án Polymer để biết thông tin chi tiết.

Ngoài ra, còn có các polyfill riêng lẻ trong gói polyfill Thành phần web. Việc sử dụng riêng từng polyfill là một chủ đề nâng cao, không được đề cập ở đây.

Cách tải polyfill không có điều kiện:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

hoặc:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

Nếu cài đặt trực tiếp polyfill từ GitHub, bạn cần cung cấp đường dẫn nơi bạn cài đặt polyfill.

Nếu bạn tải polyfill có điều kiện dựa trên tính năng phát hiện, trang web của bạn sẽ tiếp tục hoạt động khi tính năng hỗ trợ v0 bị xoá.

Nếu bạn tải polyfill có điều kiện bằng cách sử dụng tính năng phát hiện trình duyệt (tức là tải polyfill trên các trình duyệt không phải Chrome), thì trang web của bạn sẽ không hoạt động khi tính năng hỗ trợ v0 bị xoá khỏi Chrome.

Giúp tôi với! Tôi không biết mình đang sử dụng API nào!

Nếu không biết mình có đang sử dụng API v0 nào hay không – hoặc API nào bạn đang sử dụng – bạn có thể kiểm tra kết quả của bảng điều khiển trong Chrome.

  1. Nếu trước đây bạn đã khởi động Chrome bằng các cờ để tắt API phiên bản 0, hãy đóng Chrome rồi khởi động lại Chrome như bình thường.
  2. Mở một thẻ Chrome mới rồi tải trang web của bạn.
  3. Nhấn tổ hợp phím Control+Shift+J (Windows, Linux, ChromeOS) hoặc Command+Option+J (Mac) để mở Console (Bảng điều khiển) của DevTools.
  4. Kiểm tra kết quả của bảng điều khiển để tìm thông báo về việc ngừng sử dụng. Nếu có nhiều kết quả đầu ra của bảng điều khiển, hãy nhập "Ngừng sử dụng" vào hộp Bộ lọc.
Cửa sổ Console hiển thị cảnh báo về việc ngừng sử dụng

Bạn sẽ thấy thông báo ngừng sử dụng cho từng API v0 mà bạn đang sử dụng. Kết quả ở trên cho thấy thông báo cho HTML Imports, phần tử tuỳ chỉnh v0 và shadow DOM v0.

Nếu bạn đang sử dụng một hoặc nhiều API này, hãy xem phần Sử dụng polyfill v0.

Các bước tiếp theo: ngừng sử dụng phiên bản 0

Việc đảm bảo các polyfill v0 đang được tải sẽ giúp đảm bảo trang web của bạn tiếp tục hoạt động khi các API v0 bị xoá. Bạn nên chuyển sang API Thành phần web phiên bản 1 được hỗ trợ rộng rãi.

Nếu bạn đang sử dụng thư viện Thành phần web, chẳng hạn như thư viện Polymer, X-Tag hoặc SkateJS, bước đầu tiên là kiểm tra xem thư viện có phiên bản mới hơn hỗ trợ API phiên bản 1 hay không.

Nếu có thư viện riêng hoặc đã viết các phần tử tuỳ chỉnh mà không có thư viện, bạn sẽ cần cập nhật lên các API mới. Những tài nguyên sau đây có thể giúp ích cho bạn:

Tóm tắt

Các API nháp Thành phần web phiên bản 0 sẽ ngừng hoạt động. Nếu bạn rút ra được một điều gì đó từ bài đăng này, hãy nhớ kiểm thử ứng dụng của bạn khi tắt API v0 và tải polyfill nếu cần.

Về lâu dài, bạn nên nâng cấp lên các API mới nhất và tiếp tục sử dụng Thành phần web!