Ý nghĩa của việc ngừng hỗ trợ Internet Explorer đối với khách hàng và nhà phát triển tại Maersk.com.
Tôi là Steve Workman, Kỹ sư trưởng của Maersk.com. Maersk là công ty hàng đầu thế giới về dịch vụ logistics tích hợp chuỗi cung ứng, giúp khách hàng vận chuyển hàng hoá trên khắp thế giới trong 118 năm qua, với dịch vụ đặt chỗ trực tuyến trong hơn 20 năm. Đầu tháng 5 năm 2022, @Maersk đã chính thức ngừng hỗ trợ Internet Explorer (IE) trên các hệ thống dành cho khách hàng của mình, sau khi Microsoft chính thức chấm dứt hỗ trợ IE vào tháng 6 năm 2022. Đây là thời điểm kết thúc một kỷ nguyên quan trọng của web và bắt đầu một kỷ nguyên mới.
Tôi gia nhập Maersk vào năm 2018 và dự án đầu tiên của tôi là xây dựng một thanh điều hướng toàn cầu mới. Ứng dụng phải có thể kiểm thử đầy đủ, dễ triển khai và cập nhật trên toàn cầu mà không bị gián đoạn, ưu tiên thiết bị di động, thích ứng, hỗ trợ nhiều thương hiệu, có thể định cấu hình, được bản địa hoá sang 11 ngôn ngữ… và hỗ trợ IE9.
Vào năm 2018, Windows 7 và trình duyệt mặc định IE9 vẫn rất phổ biến, trong khi Windows 10 và IE11 chỉ đạt được số lượng lớn vào đầu năm 2020 (theo bộ đếm số liệu thống kê). Khi xem xét dữ liệu của mình, chúng tôi nhận thấy có một lượng giao dịch đáng kể đến từ những khách hàng sử dụng IE9 hoặc tệ hơn là IE11 ở chế độ tương thích. Lưu lượng truy cập này chủ yếu đến từ các thị trường mới nổi và những khu vực mà cơ sở khách hàng của Maersk đang phát triển nhanh chóng.
Nếu trình đơn điều hướng không hoạt động, bạn sẽ khó tìm thấy nút đăng nhập. Nếu không đăng nhập được, họ sẽ không thể đặt trước vùng chứa và đột nhiên bạn gặp phải một vấn đề lớn do trình duyệt cũ gây ra.
Để giải quyết vấn đề này, chúng tôi đã áp dụng phương pháp cải tiến dần dần cho thành phần điều hướng và tất cả ứng dụng web trong tương lai. Chúng tôi sẽ làm cho API này "hoạt động" nhưng có thể có các polyfill và hạn chế đáng kể để làm việc đó. Ví dụ: IE không hỗ trợ API Fetch, nhưng có các polyfill quay lại IE10 mà chúng tôi đưa vào cho các trình duyệt đó. Đối với IE9, chúng tôi đã mã hoá các lệnh gọi XMLHttpRequest trong một tệp riêng biệt, chỉ tải trong trường hợp không thể điền sẵn fetch.
Khi đến lúc ngừng hỗ trợ IE9, khi chỉ còn một số ít khách hàng, chúng tôi có thể chỉ cần loại bỏ mã này khỏi các ứng dụng của mình mà không tốn nhiều công sức và mang lại lợi ích tối đa cho người dùng trên các trình duyệt hiện đại.
Khi quá trình chuyển đổi kỹ thuật số của Maersk tiếp tục, chúng tôi đã xây dựng lại nhiều phần của trang web trong các giao diện người dùng vi mô do VueJS hỗ trợ. Vue có nhiều tính năng giúp dịch vụ này trở nên thân thiện với tương lai, với một cấu hình thiết lập sẵn tuyệt vời để tối ưu hoá gói và chống rung cây nâng cao, cho đến một chế độ hiện đại, trong đó xây dựng 2 phiên bản của ứng dụng — một phiên bản sử dụng cú pháp Mô-đun ES mới nhất cho các trình duyệt có thể sử dụng lâu dài và một phiên bản dành cho các ứng dụng cũ không hiểu được mô-đun ES6. Phiên bản cũ này được phân phát cho các trình duyệt như IE và thường lớn hơn 100 KB trong gói polyfill nén chỉ vì số lượng tính năng mà trình duyệt thiếu.
Chúng tôi nhận thấy rằng mình cũng có thể sử dụng hầu hết các kỹ thuật bố cục CSS hiện đại như lưới CSS nhờ Microsoft đã bắt đầu thông số kỹ thuật từ IE10. Nhờ sự trợ giúp của autoprefixer và bài viết này trên CSS Tricks giúp chúng tôi thực sự thành thạo trong việc đặt tên cho các khu vực khác nhau trên một trang, chúng tôi đã có một hệ thống bố cục gọn nhẹ, phù hợp với mọi dự án và cực kỳ linh hoạt. Tuy nhiên, vẫn có một số vấn đề về khả năng tương thích khiến chúng tôi mất nhiều thời gian để khắc phục.
Đột nhiên, chúng tôi quay lại giai đoạn phân tích chi phí-lợi ích, nhưng đối với mọi phiên bản IE lần này và cũng giống như IE9, đó là sự đánh đổi giữa việc hỗ trợ mọi người và nhiều tuần mất nhiều thời gian phát triển cho từng dự án. Vì tin tưởng rằng việc sử dụng trình duyệt hiện đại sẽ mang lại trải nghiệm tốt hơn cho khách hàng, nên chúng tôi đã khuyến khích người dùng không sử dụng IE khi truy cập vào trang web. Chúng tôi nhận thấy rằng việc này đã thành công ở mức độ nhỏ đối với những khách hàng đang hoạt động và có thói quen mở IE để tương tác với chúng tôi. Thông báo này rất tốt, nhưng chưa đủ để tính toán.
Khi lượng truy cập từ IE ngày càng giảm, Maersk quyết định làm theo cách dẫn dắt của nhiều tổ chức khác trước họ và chấm dứt hỗ trợ chính thức cho IE, mặc dù các con số vẫn cho biết chúng ta nên hỗ trợ IE. Tại sao lại là bây giờ?
Nói một cách đơn giản, nền tảng web đã phát triển và IE11 không thể làm những việc mà chúng ta cần, ngay cả khi có một nhóm nhỏ các polyfill. Hãy lấy thành phần điều hướng làm ví dụ – trong thế giới nền tảng web hiện đại, đây là một phần tử tuỳ chỉnh, với các kiểu được đóng gói riêng, do các biến CSS và truy vấn vùng chứa điều khiển, nhờ đó thành phần này kiểm soát mọi thứ trong một thành phần. Nếu không có các phần này của nền tảng, kiểu của các thành phần này có thể thay đổi hoàn toàn từ ứng dụng và kiểu có thể bị rò rỉ sang các thành phần khác hoặc quay lại ứng dụng. Có các polyfill cho phép bạn mô phỏng hầu hết các tính năng tại đây, bao gồm các phần tử tuỳ chỉnh, ShadyCSS, ShadyDOM và phần tử mẫu.
Trong thực tế, các polyfill này hoạt động rất tốt cho các thành phần riêng biệt, nhưng khi kết hợp nhiều thành phần trong một ứng dụng phức tạp, IE sẽ bị dừng lại với hàng chục giây màn hình trắng trong khi thời gian chạy JavaScript cố gắng tính toán cây kiểu lần thứ 40. Tóm lại, trải nghiệm người dùng đã bị xâm phạm nghiêm trọng khi không hỗ trợ trình duyệt.
Trước đây, chúng tôi đã gặp phải một số gián đoạn nhỏ – polyfill có thể thêm nửa giây vào lần vẽ đầu tiên, nhưng không nhiều hơn thế. Lần này thì khác, các ứng dụng này không dùng được nữa. Polyfill chỉ có thể làm được nhiều việc khi phải đối mặt với sự phức tạp của nền tảng web hiện đại.
Bạn có biết điều gì đã xảy ra kể từ khi chúng tôi ngừng hỗ trợ IE không? Rất, rất ít. Không có nhiều phiếu yêu cầu hỗ trợ khách hàng hoặc ý kiến phản hồi tiêu cực. Các kỹ sư của chúng tôi hài lòng hơn và các ứng dụng của chúng tôi có lộ trình nâng cấp lên Vue 3 (không hỗ trợ IE11 vì không thể điền sẵn đối tượng Proxy) và kích thước gói nhỏ hơn. Việc hỗ trợ đầy đủ cho các biến CSS và phông chữ biến thể cho phép tạo giao diện đơn giản hơn trên các thương hiệu, đồng thời khả năng sử dụng mã thông báo trong các thành phần tệp đơn của Vue cũng làm giảm độ phức tạp về nhận thức, mang lại trải nghiệm tốt hơn cho nhà phát triển.
Từ góc độ khách hàng, mức sử dụng IE tiếp tục giảm dần. IE chưa bị tắt khỏi trang web, nhưng khi tính năng cải tiến dần dần chuyển sang giảm thiểu hiệu quả một cách linh hoạt, các tính năng và ứng dụng sẽ ngừng hoạt động. Khách hàng sẽ được hưởng lợi từ những tiến bộ trong công nghệ của chúng tôi, nhận được trải nghiệm nhất quán hơn từ trang web khi các phương pháp hay nhất, khả năng hỗ trợ tiếp cận và thiết kế được tích hợp vào hệ thống thiết kế dựa trên Lit đang phát triển, có khả năng tương tác đầy đủ với mọi khung hiện có hoặc trong tương lai.
Tôi rất hào hứng được thấy cách các tính năng mới của nền tảng web có thể được sử dụng trong công ty – từ việc tận dụng chế độ tối để hệ thống tàu thuyền dễ sử dụng hơn vào ban đêm, cho đến Bluetooth Web, WebXR và PWA để các ứng dụng web của chúng ta có thể tương tác với thế giới thực xung quanh ở mọi điều kiện. Cảm ơn Internet Explorer, vì rất nhiều điều; chúng tôi hiện có thể thoải mái cập nhật nền tảng web này.