Tác động 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ề hậu cần tích hợp trong chuỗi cung ứng, giúp khách hàng vận chuyển hàng hoá vòng quanh thế giới trong suốt 118 năm, với số lượt đặt trước trực tuyến trong hơn 20 năm. Vào đầ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 ngừng hỗ trợ IE vào tháng 6 năm 2022. Đây là sự kết thúc một kỷ nguyên quan trọng của web và sự 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 thanh điều hướng toàn cầu mới. Phiên bản này phải có khả năng kiểm thử đầy đủ, dễ triển khai và cập nhật trên toàn cầu mà không bị ngừng hoạt động, ư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, 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, với Windows 10 và IE11 chỉ đạt đến khối lượng quan trọng vào đầu năm 2020 (theo bộ đếm số liệu thống kê). Xem xét dữ liệu của chúng tôi, chúng tôi nhận thấy một lượng thương mại đáng kể đến từ các 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 có xu hướng nghiêng đáng kể sang 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 tăng nhanh.
Nếu trình đơn điều hướng không hoạt động, thì bạn sẽ khó tìm nút đăng nhập. Nếu đăng nhập không hoạt động, họ không thể đăng ký vùng chứa và đột nhiên bạn gặp một vấn đề lớn, do các trình duyệt cũ gây ra.
Để giải quyết vấn đề này, chúng tôi đã áp dụng quan điểm nâng cao dần với thành phần điều hướng và tất cả các ứng dụng web trong tương lai. Chúng tôi sẽ làm cho tính năng này "hoạt động" nhưng có thể có polyfill và hạn chế đáng kể để thực hiện việc đó — ví dụ: IE không hỗ trợ Tìm nạp API, nhưng có một số 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 fetch không thể điền thông tin.
Khi đến thời điểm ngừng hỗ trợ IE9, khi chỉ còn một số khách hàng còn lại, chúng tôi có thể chỉ cần bỏ mã này khỏi các ứng dụng của mình, tốn ít công sức nhất 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 số của Maersk tiếp tục diễn ra, chúng tôi đã xây dựng lại nhiều phần của trang web bằng giao diện người dùng vi mô hỗ trợ VueJS. Vue có rất nhiều tính năng giúp ứng dụng này trở nên thân thiện với tương lai, với cấu hình đặt trước tuyệt vời để tối ưu hoá gói và rung cây nâng cao, đến chế độ hiện đại nơi tạo hai 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 luôn cập nhật và một cho các ứng dụng cũ không hiểu mô-đun ES6. Phiên bản cũ này được phân phối cho các trình duyệt như IE và thường lớn hơn 100KB trong gói polyfill được nén, chỉ đơn giản từ số lượng tính năng mà trình duyệt thiếu.
Chúng tôi nhận thấy chúng tôi cũng có thể sử dụng hầu hết các kỹ thuật bố cục CSS hiện đại, chẳng hạn như lưới CSS, nhờ vào việc Microsoft đã bắt đầu quy cách trở lại trong IE10. Nhờ sự trợ giúp của autoprefixer và bài viết này về Thủ thuật CSS để đặt tên hiệu quả cho các vùng khác nhau của 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òn một số vấn đề về khả năng tương thích cần 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 lợi ích chi phí, nhưng đối với bất kỳ phiên bản IE nào lần này và cũng giống như IE9, đó là sự đánh đổi giữa việc hỗ trợ tất cả mọi người và hàng tuần mất nhiều thời gian phát triển cho mỗi dự án. Tự tin rằng việc sử dụng trình duyệt hiện đại mang lại trải nghiệm tốt hơn cho khách hàng, chúng tôi đã khuyến khích người dùng rời khỏi IE khi họ truy cập trang web. Chúng tôi thấy rằng những chiến dịch này đã thành công với một số lượng nhỏ đối với những khách hàng đang hoạt động có thói quen mở IE để tương tác với chúng tôi. Thông báo này rất hay, nhưng chưa đủ để làm bài toán.
Khi các lượt truy cập từ Ireland giảm dần, Maersk quyết định đi theo hướng dẫn của nhiều công ty khác và chấm dứt việc hỗ trợ chính thức cho IE, mặc dù các con số vẫn cho thấy chúng tôi nên hỗ trợ. Vậy tại sao lại là bây giờ?
Nói một cách đơn giản, nền tảng web đã di chuyển và IE11 không thể làm những việc chúng ta cần, ngay cả với một đội quân nhỏ các polyfill. Dùng thành phần điều hướng — trong một thế giới nền tảng web hiện đại, đây là một phần tử tuỳ chỉnh có các kiểu đóng gói riêng, được thúc đẩy bởi các biến CSS và truy vấn vùng chứa. Do đó, nó kiểm soát mọi thứ trong một thành phần. Nếu không có các thành phần này của nền tảng, kiểu của các thành phần này có thể bị thay đổi hoàn toàn từ ứng dụng và kiểu có thể rò rỉ đến các thành phần khác hoặc trở 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 ở đây, bao gồm 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 hiệu quả với các thành phần tách 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 phải tạm dừng 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 trong thời gian 40 giây. Tóm lại, trải nghiệm người dùng đã bị ảnh hưởng nghiêm trọng để hỗ trợ trình duyệt.
Trước đây, chúng tôi từng gặp một số gián đoạn nhỏ, chẳng hạn như polyfills có thể thêm nửa giây vào lần hiển thị đầu tiên, nhưng không nhiều hơn thế. Các ứng dụng này không còn hoạt động được nữa. Thẻ polyfill chỉ có thể làm được rất nhiều việc đó khi gặp khó khăn 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òn phiếu yêu cầu hỗ trợ khách hàng nào tăng cao hoặc không nhận được 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ì đối tượng Proxy không thể chèn lấp được) và kích thước gói nhỏ hơn. Việc hỗ trợ đầy đủ các biến CSS và phông chữ biến đổi giúp việc sắp xếp chủ đề trở nên đơn giản hơn giữa 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 duy nhất của Vue cũng giúp giảm độ phức tạp trong 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 nâng cao dần dần chuyển sang trạng thái xuống cấp nhẹ, 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 – có được trải nghiệm nhất quán hơn trên trang web vì các phương pháp hay nhất, khả năng tiếp cận và thiết kế được đưa vào một hệ thống thiết kế dựa trên Lit đang phát triển, với khả năng tương tác đầy đủ với mọi khung hiện tại hoặc trong tương lai.
Tôi rất muốn xem các tính năng mới của nền tảng web trong công ty có thể được sử dụng như thế nào, từ việc 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 trên web, WebXR và PWA để các ứng dụng web của chúng tôi có thể tương tác với thế giới thực xung quanh chúng ta trong mọi điều kiện. Cảm ơn bạn, Internet Explorer, vì nhiều điều; giờ đây, chúng tôi tự do bắt kịp nền tảng web.
Hình ảnh chính của Matt Botsford.