停止支援對 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 相容模式的客戶。這些流量大幅增加了新興市場的使用者，也是 Maersk 客群成長快速的地區。
如果導覽選單無法正常運作，你可能會找不到登入按鈕。如果登入失敗，就無法預訂容器，而且你會突然遇到舊版瀏覽器造成的重大問題。
為瞭解決這個問題，我們持續對導覽元件和日後所有網頁應用程式，採取改良措施。我們這麼做了，但方法有大量的 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 的支援，即使這些數據仍指出我們應支援 IE。為什麼現在要推出？
簡單來說，網路平台已進步，IE11 無法執行我們需要的功能，即使有少量 polyfill 也一樣。以導覽元件為例，在現代網頁平台中，這是自訂元素，具有自己的封裝樣式，由 CSS 變數和容器查詢驅動，因此可控制單一元件中的所有內容。若沒有這些平台元件，這些元件的樣式可能會從應用程式完全變更，樣式也可能會外洩至其他元件或回到應用程式。您可以使用 polyfill 模擬大部分功能，包括自訂元素、ShadyCSS、ShadyDOM 和 範本元素。
在實際情況中，這些 polyfill 對獨立元件來說非常實用，但在複雜應用程式中結合多個元件時，IE 會停頓數十秒，畫面呈現白色畫面，而 JavaScript 執行階段會嘗試計算樣式樹狀結構，直到四十秒為止。簡而言之，為了支援瀏覽器，使用者體驗受到嚴重影響。
過去，我們曾經遇到小型中斷情形，polyfill 可能會讓首次繪製時間增加半秒，但不會太多。這一點不同，使得這些應用程式變得無法使用。Polyfill 需要面對新型網路平台的複雜性挑戰時，才能發揮最佳效果。
你知道我們停止支援 IE 後發生了什麼事嗎？非常、極少。我們並未收到大量客戶支援單或負面意見回饋。我們的工程師更滿意，應用程式也能升級至 Vue 3 (由於 Proxy 物件無法進行多填補，因此不支援 IE11)，且套件大小也更小。完整支援 CSS 變數和可變字型，可簡化各品牌的設定主題，而且在 Vue 單一檔案元件中使用符記，也能降低認知複雜度，提供更優質的開發人員體驗。
從客戶的角度來看，IE 的使用率持續緩慢下滑。雖然網站並未關閉 IE，但隨著漸進式增強功能轉變為優雅降級，功能和應用程式就會停止運作。客戶將可從我們的技術進步中獲益，透過最佳做法、無障礙設計和設計，獲得更一致的網站體驗，並與現有或未來的任何架構完全相容。
我很高興看到公司內部如何運用新的網路平台功能，從利用深色模式讓船舶系統在夜間更容易使用，到使用 Web Bluetooth、WebXR 和 PWA，讓我們的網頁應用程式能夠在任何情況下與周遭實體世界互動。非常感謝 Internet Explorer 的支持；我們現在免費更新網路平台內容了。