停止支援 Maersk.com 的客戶和開發人員如何停止支援 Internet Explorer。
我是 Steve Workman，是 Maersk.com 的首席工程師。Maersk 是整合供應鏈物流領域的全球領導者，他們至今已協助 118 年客戶將商品推廣到世界各地，至今已有二十年以上的時間。自 2022 年 5 月初，@Maersk 開始在面向客戶的系統上正式停止支援 Internet Explorer (IE)，而 Microsoft 於 2022 年 6 月正式停止支援 IE。網路時代已邁入重要時代的結束，而這也代表著嶄新的境界。
我在 2018 年加入 Maersk，第一項專案就是打造新的全球導覽列。必須能全面測試、易於部署和更新，且無需停機，且應以行動優先、回應、支援多種品牌、可設定、本地化為 11 種語言，而且必須支援 IE9。
在 2018 年，Windows 7 及其預設瀏覽器 IE9 仍相當熱門，因為 Windows 10 和 IE11 在 2020 年初只會觸及重大質量 (根據統計資料計數器)。根據我們的資料，我們發現有大量客戶來自使用 IE9 (或更糟的是相容模式 IE11) 的客戶。這波流量大幅轉移到新興市場，以及 Maersk 的客群快速成長的區域。
如果導覽選單沒反應，就很難找到登入按鈕。如果登入後無效，這些主機也無法預訂容器，且您突然遇到由舊版瀏覽器造成的重大問題。
為解決這個問題，我們善用導覽元件和未來所有網頁應用程式，採取漸進式的增強效果。儘管 Google 能「正常運作」，但或許是值得一看的 Polyfill 和限制。例如，IE 不支援 Fetch API，但在這些瀏覽器上，有一些能返回 IE10 的 polyfill。針對 IE9，我們已在單獨檔案中編寫 XMLHttpRequest 呼叫，使其只在 fetch 無法 polyfill 時載入。
當只有少數客戶願意接受 IE9 支援時，我們可以直接從應用程式中捨棄這段程式碼，對新版瀏覽器使用者來說最輕鬆省力。
隨著 Maersk 的數位轉型持續，我們以採用微前端的 VueJS 架構重新建構網站的許多部分。Vue 提供許多功能，方便日後使用。此外，Vue 提供優異的進階樹狀結構拖曳與套件最佳化調整預設設定，也是建構兩個應用程式版本的現代化模式，一個為常態瀏覽器使用最新的 ES 模組語法，另一個適用於無法理解 ES6 模組的舊版應用程式。這個舊版在 IE 等瀏覽器中提供，而且在 gzip 的 polyfill 套件中通常比瀏覽器缺少的功能數量大 100KB。
我們發現，由於 Microsoft 在 IE10 中重新設定規格，所以我們也能使用 CSS 格線等大多數最新的 CSS 版面配置技術。藉助自動前置字元和這篇 CSS 剪輯文章，為網頁的不同區域命名，我們打造出簡潔、適合任何專案的版面配置系統。不過，相容性問題仍需要大量時間修正。
我們突然回到了成本效益的分析階段，但就目前任何版本的 IE 而言，就像 IE9 一樣，我們需要在支援所有人，以及每項專案花費數週的開發時間之間做出取捨。我們相信新世代瀏覽器能夠提供更好的客戶體驗，因此當使用者造訪該網站時，我們會立即停止使用 IE。我們發現，對於那些習慣打開 IE 與我們互動的活躍客戶，我們發現這只帶來少許成效。這則訊息很好，但還不足以證明數學能力。
隨著 IE 的造訪記錄告一段落，Mersk 決定先追蹤眾多企業的領導地位，並結束 IE 正式支援，即使數字仍表明我們支持 IE。為何要現在？
簡單來說，網路平台已經發展，即使只有一小部分的 polyfill，IE11 也無法執行必要的工作。以導覽元件為例，在現代網路平台世界中，這是自訂元素，具有專屬的封裝樣式，並由 CSS 變數和容器查詢驅動，因此可控制單一元件中的所有項目。如果沒有這些平台，這些元件的樣式可以從應用程式中完全變更，樣式可能會外洩至其他元件或傳回應用程式。有些 Polyfill 可讓您模擬這裡大部分的功能，包括自訂元素、ShadyCSS、ShadyDOM 與 template 元素。
實際執行時，這些 polyfill 適用於隔離的元件，但是在複雜的應用程式中結合多個元件時，IE 能有效暫停播放數十秒的白色畫面，而 JavaScript 執行階段會嘗試計算 40 秒的樣式樹狀結構。簡單來說，使用者體驗已大幅降低，無法支援瀏覽器。
在過去，我們遇到一些小中斷的問題，也就是在 polyfill 中，第一次繪圖所需時間可能會增加一半，但更多。這點與以往不同，因此這些應用程式無法使用。如果對現代網路平台的複雜程度有所質疑，Polyfill 可以做到許多事。
您知道 IE 支援功能推出後發生了什麼事嗎？非常、非常少。沒有任何大量客戶支援單，或是負面的意見回饋。我們的工程師很開心，我們的應用程式也有改用 Vue 3 (不支援 IE11 做為 Proxy 物件無法填滿的) 和較小的套件大小。完整支援 CSS 變數和可變字型，方便您在各個品牌之間建立更簡單的主題設定；且若能使用 Vue 單一檔案元件中的符記，則可降低認知上的複雜度，提供更優質的開發人員體驗。
對客戶而言，IE 的使用率持續降低。網站並沒有停用 IE，但逐步強化功能變成優雅降級後，功能和應用程式就會停止運作。客戶將受惠於我們技術的進步；現在我們將享有更一致的網站體驗，因為最佳做法、無障礙設計和設計都已納入不斷演進的 Lit 式設計系統，與現在或未來的所有架構完全互通。
我很期待在公司內部運用新的網路平台功能，像是在夜晚使用深色模式的船隻系統，以及網路藍牙、WebXR 和 PWA，讓網頁應用程式在任何情況下都能與周圍的實體世界互動。謝謝 Internet Explorer，這多功能對您來說，現在我們也可以自由掌握網路平台的最新動態。
Matt Botsford 提供的主頁橫幅。