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 phát hành trong Chrome, Safari, Firefox và (sắp tới) Edge. API v1 đượ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 nháp phiên bản 0 đã cung cấp những ý kiến phản hồi có giá trị ảnh hưởng đến quy cách. Nhưng các API v0 chỉ được Chrome hỗ trợ. Để đả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 đã ngừng hoạt động và được lên lịch 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 chưa bị xoá khỏi Chrome. Các API nháp phiên bản 0 hiện dự kiến sẽ bị loại bỏ trong Chrome 80 vào khoảng tháng 2 năm 2020.

Dưới đây là những điều bạn cần biết nếu bạn cho rằng mình có thể đang sử dụng các API v0:

Quay lại tương lai: vô hiệu hoá các API v0

Để kiểm thử API v0 cho trang web, bạn cần khởi động Chrome qua dòng lệnh với các cờ sau:

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

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

Cách kiểm tra trang web có API v0 bị vô hiệu hoá:

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

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

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

    Để biết hướng dẫn 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 công cụ cho nhà phát triển và 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 sai bất kỳ hoặc tất cả các tính năng này, thì nghĩa là không có vấn đề gì. Đảm bảo bạn đã thoát khỏi Chrome hoàn toàn trước khi khởi động lại với cờ.

  5. Cuối cùng, hãy tải ứng dụng của bạn và xem qua các tính năng. Nếu mọi thứ hoạt động như mong đợi, thì 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 v0 trên những trình duyệt không cung cấp dịch vụ hỗ trợ gốc. Nếu trang web của bạn không hoạt động trên Chrome khi đã tắt các API v0, thì có thể bạn đang không tải các polyfill. Có một số khả năng:

  • Bạn chưa tải đoạn mã polyfill. 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, như Firefox và Safari.
  • Bạn đang tải các polyfills theo điều kiện dựa trên khả năng nhận biết của trình duyệt. Trong trường hợp này, trang web của bạn nên hoạt động trên các trình duyệt khác. Chuyển ngay đến phần Tải polyfills.

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

Cài đặt polyfill v0

Các polyfill thành phần web phiên bản 0 chưa bao giờ được xuất bản lên sổ đăng ký npm. Bạn có thể cài đặt polyfills 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 qua một tệp zip, hãy tải bản phát hành 0.7.x mới nhất xuống qua 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 polyfills theo cách thủ công nếu có phiên bản khác. Bạn nên kiểm tra các polyfills trong mã bằng 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 lớp polyfill. Gói này bao gồm polyfill DOM bóng đổ, lớn hơn nhiều so với các polyfill khác và có tác động lớn hơn về hiệu suất. Chỉ sử dụng gói này nếu bạn cần hỗ trợ DOM bóng (shadow DOM).
webcomponents-lite-min.js Bao gồm tất cả polyfills, ngoại trừ shadow DOM. Lưu ý: Người dùng polymer 1.x nên chọn gói này, vì quy trình mô phỏng Shadow DOM được đưa vào trực tiếp trong 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 về Dự án Polymer để biết thông tin chi tiết.

Ngoài ra, còn có các polyfill riêng lẻ có sẵn trong gói polyfill của Thành phần web. 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 polyfills vô đ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 polyfill trực tiếp 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 khả năng phát hiện tính năng, thì trang web của bạn sẽ tiếp tục hoạt động khi tính năng hỗ trợ v0 bị ngừng hoạt động.

Nếu bạn tải polyfill có điều kiện bằng tính năng nhận dạng 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ị loại bỏ khỏi Chrome.

Tôi cần trợ giúp! 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 bạn đang dùng API nào, 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 các API v0, hãy đóng Chrome rồi khởi động lại như bình thường.
  2. Mở một thẻ Chrome mới và 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ở Bảng điều khiển Công cụ cho nhà phát triển.
  4. Kiểm tra kết quả của bảng điều khiển để xem các thông báo về việc ngừng sử dụng. Nếu có nhiều dữ liệu đầu ra trên bảng điều khiển, hãy nhập "Không dùng nữa" vào hộp Bộ lọc.
Cửa sổ bảng điều khiển cho thấy cảnh báo về việc ngừng sử dụng

Bạn sẽ thấy thông báo về việc 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 các thông báo cho tính năng Nhập HTML, phần tử tuỳ chỉnh v0 và DOM bóng (shadow) 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.

Bước tiếp theo: rời khỏi v0

Việc đảm bảo các polyfill v0 đang được tải sẽ đảm bảo trang web của bạn vẫn hoạt động khi các API v0 bị xoá. Bạn nên chuyển sang các API Thành phần web phiên bản 1. Các API này đượ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 có các phiên bản thư viện mới hơn có hỗ trợ API v1 hay không.

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

Tổng hợp

Các API nháp của 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 sau bài đăng này, hãy đảm bảo rằng bạn kiểm thử ứng dụng với các API v0 bị tắt và tải các polyfills 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!