停止支援 Internet Explorer 對 Maersk.com 的客戶和開發人員有何意義。
我是 Maersk.com 的首席工程師 Steve Workman。Maersk 是全球整合型供應鏈物流的領導品牌，過去 118 年來一直協助客戶運送全球各地的貨物，並提供超過 20 年的線上訂艙服務。2022 年 5 月初，@Maersk 正式停止在面向客戶的系統上支援 Internet Explorer (IE)，因為 Microsoft 已於 2022 年 6 月正式停止支援 IE。這代表網路的一個重要時代結束了，新的時代即將展開。
我於 2018 年加入 Maersk，第一個專案是建構新的全球導覽列。這項應用程式必須完全可測試、易於部署和更新，且在全球範圍內無需停機，且必須以行動裝置為優先、具備回應式設計、支援多個品牌、可設定、以 11 種語言本地化，並支援 IE9。
在 2018 年，Windows 7 和預設瀏覽器 IE9 仍相當受歡迎，而 Windows 10 和 IE11 則是在 2020 年初才達到臨界點 (根據統計計數器)。根據我們的資料，大量交易來自使用 IE9 或更糟糕的 IE11 相容模式的客戶。這類流量主要來自新興市場，以及馬士基客戶群快速成長的地區。
如果導覽選單無法正常運作，你可能會找不到登入按鈕。如果登入失敗，就無法預訂容器，而且你會突然遇到舊版瀏覽器造成的大問題。
為解決這個問題，我們採用漸進式增強功能，針對導覽元件和所有未來的網頁應用程式採取這項做法。我們會讓它「運作」，但可能需要大量的 Polyfill 和限制才能做到這一點。舉例來說，IE 不支援 Fetch API，但我們為這些瀏覽器提供的 Polyfill 可追溯至 IE10。針對 IE9，我們在個別檔案中編寫 XMLHttpRequest 呼叫，只在 fetch 無法以多重填充方式填充時才載入。
當我們決定停止支援 IE9 時，只有少數客戶仍在使用這款瀏覽器，因此我們只需從應用程式中移除這段程式碼，就能為使用新式瀏覽器的使用者提供最佳體驗，同時降低成本。
隨著馬士基的數位轉型持續進行，我們使用 VueJS 技術建構的微前端，重建了許多網站內容。Vue 擁有許多未來友善的功能，包括用於進階樹狀圖移除和套件最佳化的絕佳預設設定，以及現代模式 (可建構兩個應用程式版本)，其中一個版本會使用最新的 ES 模組語法，適用於永久瀏覽器；另一個版本則適用於不支援 ES6 模組的舊版應用程式。這個舊版會提供給 IE 等瀏覽器，而其 gzip 壓縮的 polyfill 套件通常會比瀏覽器缺少的功能多出 100 KB。
我們發現，由於 Microsoft 在 IE10 中開始採用規格，因此我們也可以使用大部分的現代 CSS 版面配置技術，例如 CSS 格線。在 autoprefixer 和 這篇 CSS Tricks 文章的協助下，我們成功掌握了頁面不同區域的命名方式，並打造出輕量、靈活且適合任何專案的版面配置系統。不過，我們還是遇到了一些相容性問題，需要花費大量時間才能修正。
我們突然又回到成本效益分析階段，但這次是針對所有 IE 版本，就像 IE9 一樣，我們必須在支援所有人與每個專案需要花費數週的開發時間之間取得平衡。我們深信使用新式瀏覽器可為客戶帶來更好的體驗，因此在使用者造訪網站時，我們會鼓勵他們不要使用 IE。我們發現，對於習慣使用 IE 與我們互動的活躍客戶，這項做法在小規模測試中獲得成功。這則訊息很不錯，但不足以讓數學運算運作。
由於 IE 的流量減少，Maersk 決定跟隨許多先行者的腳步，結束對 IE 的官方支援，即使數據顯示我們仍應提供支援。為什麼現在要推出？
簡單來說，網路平台已進步，IE11 無法執行我們需要的功能，即使有大量的 polyfill 也一樣。以導覽元件為例，在現代網頁平台中，這是自訂元素，具有自己的封裝樣式，由 CSS 變數和容器查詢驅動，因此可控制單一元件中的所有內容。若沒有這些平台元件，這些元件的樣式可能會從應用程式完全變更，樣式也可能會外洩至其他元件或回到應用程式。您可以使用 polyfill 模擬大部分功能，包括自訂元素、ShadyCSS、ShadyDOM 和 範本元素。
在實際情況下，這些 polyfill 對獨立元件來說非常實用，但在複雜應用程式中結合多個元件時，IE 會停頓數十秒，畫面呈現白色畫面，而 JavaScript 執行階段會嘗試計算樣式樹狀結構，直到四十秒為止。簡而言之，為了支援瀏覽器，使用者體驗受到嚴重影響。
過去，我們曾經歷過小幅中斷，polyfill 可能會讓首次繪製時間增加半秒，但不會太多。但這次情況不同，這些應用程式無法使用。在面對現代網站平台的複雜性時，填充物只能發揮有限的效用。
你知道我們停止支援 IE 後發生了什麼事嗎？非常少。我們並未收到大量客戶支援單或負面意見回饋。我們的工程師更滿意，應用程式也能升級至 Vue 3 (由於 Proxy 物件無法進行多填補，因此不支援 IE11)，且套件大小也更小。完整支援 CSS 變數和可變字型，可簡化各品牌的設定主題，而且在 Vue 單一檔案元件中使用符記，也能降低認知複雜度，提供更優質的開發人員體驗。
從客戶的角度來看，IE 的使用率持續緩慢下滑。雖然網站並未關閉 IE，但隨著漸進式增強功能轉為優雅降級，功能和應用程式就會停止運作。客戶將可從我們的技術進步中獲益，透過網站獲得更一致的最佳做法體驗，並將無障礙設計和設計融入以 Lit 為基礎的設計系統，與現有或未來的任何架構完全相容。
我很高興看到公司內部如何運用新的網路平台功能，從利用深色模式讓船舶系統在夜間更容易使用，到使用 Web Bluetooth、WebXR 和 PWA，讓我們的網頁應用程式能夠在任何情況下與周遭實體世界互動。感謝 Internet Explorer 的許多貢獻，我們現在可以自由追上網頁平台的腳步。