Co oznacza zakończenie obsługi przeglądarki Internet Explorer dla klientów i programistów na stronie Maersk.com
Nazywam się Steve Workman i jestem głównym inżynierem w Maersk.com. Maersk to światowy lider w integrowanej logistyce łańcucha dostaw. Od 118 lat pomagamy klientom w przemieszczaniu towarów po całym świecie, a od ponad 20 lat umożliwiamy rezerwacje online. Na początku maja 2022 r. firma @Maersk oficjalnie wycofała obsługę przeglądarki Internet Explorer (IE) w swoich systemach obsługujących klientów. Było to spowodowane zakończeniem przez firmę Microsoft obsługi tej przeglądarki w czerwcu 2022 r. To koniec ważnej ery internetu i początek nowej.
Dołączyłem do firmy Maersk w 2018 roku. Moim pierwszym projektem było stworzenie nowego globalnego paska nawigacyjnego. Musiał być w pełni testowalny, łatwy do wdrożenia i aktualizowania na całym świecie bez przestojów, responsywny, przeznaczony głównie na urządzenia mobilne, obsługujący wiele marek, konfigurowalny, zlokalizowany w 11 językach... i obsługujący IE9.
W 2018 r. system Windows 7 i domyślna przeglądarka IE9 były nadal bardzo popularne, a Windows 10 i IE 11 osiągnęły krytyczną masę dopiero na początku 2020 r. (według licznika statystyk). Na podstawie naszych danych stwierdziliśmy, że znaczna część transakcji pochodzi od klientów korzystających z przeglądarki IE9 lub, co gorsza, IE11 w trybie zgodności. Ruch ten był znacznie większy na rynkach rozwijających się i w obszarach, w których baza klientów Maersk rosła szybko.
Jeśli menu nawigacyjne nie działa, trudno znaleźć przycisk logowania. Jeśli logowanie się nie zadziała, nie będzie można rezerwować kontenerów, a Ty nagle będziesz mieć poważny problem spowodowany przez starsze przeglądarki.
Aby rozwiązać ten problem, zastosowaliśmy podejście oparte na stopniowym ulepszaniu w przypadku komponentu nawigacji i wszystkich przyszłych aplikacji internetowych. Możemy to „załatwić”, ale może to wymagać znacznych polyfilli i ograniczeń. Na przykład IE nie obsługuje interfejsu Fetch, ale istnieją polyfille, które sięgają do IE10 i które uwzględniamy w przypadku tych przeglądarek. W przypadku IE9 wywołania XMLHttpRequest zostały zapisane w osobnym pliku, aby były wczytywane tylko wtedy, gdy fetch nie mogło zostać wypełnione.
Gdy nadszedł czas, aby wycofać obsługę IE9, gdy pozostała tylko garstka klientów, mogliśmy po prostu usunąć ten kod z naszych aplikacji, przy minimalnym wysiłku i maksymalnej korzyści dla użytkowników korzystających z nowoczesnych przeglądarek.
W ramach transformacji cyfrowej firmy Maersk przebudowaliśmy wiele części witryny, korzystając z mikrofrontendów opartych na VueJS. Vue zawierało wiele funkcji, które sprawiały, że było ono gotowe na przyszłość. Miało świetną konfigurację wstępną do zaawansowanego usuwania elementów z drzewa i optymalizacji pakietu, a także nowoczesny tryb, w którym tworzone są 2 wersje aplikacji – jedna wykorzystująca najnowszą składnię modułów ES dla przeglądarek stale aktualizowanych i jedna dla starszych aplikacji, które nie rozumieją modułów ES6. Ta starsza wersja jest dostarczana do przeglądarek takich jak IE i często jest o 100 KB większa w zwiniętym pakiecie polyfill, ponieważ zawiera więcej funkcji niż te, które są dostępne w danej przeglądarce.
Okazało się, że możemy też używać większości nowoczesnych technik układu CSS, takich jak siatka CSS, dzięki temu, że Microsoft rozpoczął specyfikację już w IE10. Dzięki narzędziu autoprefixer i temu artykułowi w CSS Tricks udało nam się dobrze nazwać różne obszary strony. Dzięki temu uzyskaliśmy lekki system układu, który jest odpowiedni dla każdego projektu i bardzo elastyczny. Pojawiły się jednak problemy ze zgodnością, których rozwiązanie zajęło dużo czasu.
Nagle wracamy do etapu analizy kosztów i korzyści, ale tym razem dla dowolnej wersji Internet Explorera. Podobnie jak w przypadku IE9, musimy znaleźć kompromis między obsługą wszystkich użytkowników a tygodniami żmudnego czasu programowania w przypadku każdego projektu. Ponieważ jesteśmy przekonani, że korzystanie z nowoczesnej przeglądarki jest wygodniejsze dla naszych klientów, zachęcamy ich do rezygnacji z Internet Explorera podczas odwiedzania naszej witryny. Okazało się, że ta metoda przyniosła dobre wyniki w przypadku niewielkiej liczby aktywnych klientów, którzy przyzwyczaili się do otwierania Internet Explorera podczas interakcji z nami. Ten komunikat był dobry, ale nie wystarczający, aby obliczenia się sprawdziły.
Ponieważ liczba wizyt z Internet Explorera zaczęła spadać, Maersk postanowiła pójść za przykładem wielu innych firm i zakończyć oficjalne wsparcie dla tej przeglądarki, mimo że dane nadal wskazują, że powinniśmy ją obsługiwać. Dlaczego teraz?
Mówiąc w prosty sposób, platforma internetowa się rozwija, a IE11 nie spełnia naszych oczekiwań, nawet przy pomocy małej armii polyfilli. Weźmy na przykład komponent nawigacji. W przypadku nowoczesnych platform internetowych jest to element niestandardowy z własnymi zaszyfrowanymi stylami, który działa na podstawie zmiennych CSS i zapytań kontenera, dzięki czemu kontroluje wszystko w jednym komponencie. Bez tych elementów platformy styl tych komponentów może zostać całkowicie zmieniony z aplikacji, a style mogą przenikać do innych komponentów lub z powrotem do aplikacji. Istnieją rozwiązania polyfill, które umożliwiają emulowanie większości funkcji, w tym elementów niestandardowych, ShadyCSS, ShadyDOM i elementu template.
W praktyce te polyfille świetnie sprawdzają się w przypadku pojedynczych komponentów, ale gdy połączysz kilka komponentów w kompleksowej aplikacji, IE zatrzymuje się, wyświetlając przez kilkadziesiąt sekund biały ekran, podczas gdy środowisko uruchomieniowe JavaScript próbuje obliczyć drzewo stylów po raz czterdziesty drugi. Krótko mówiąc, obsługa przeglądarki znacząco pogarszała wrażenia użytkowników.
W przeszłości zdarzały się drobne przerwy – wypełniacze, które mogły wydłużyć czas pierwszego wyrenderowania o pół sekundy, ale nie więcej. W tym przypadku było inaczej i aplikacje stały się bezużyteczne. W przypadku złożonych współczesnych platform internetowych możliwości wypełniaczy są ograniczone.
Wiecie, co się stało, gdy wycofaliśmy obsługę Internet Explorera? Bardzo, bardzo mało. Nie było lawiny zgłoszeń do obsługi klienta ani negatywnych opinii. Nasi inżynierowie są zadowoleni, a nasze aplikacje mają ścieżkę uaktualniania do Vue 3 (który nie obsługuje IE11, ponieważ obiekt Proxy nie może być wypełniany przez polifiller) i mniejsze rozmiary pakietów. Pełna obsługa zmiennych CSS i czcionek zmiennych umożliwia prostsze tworzenie motywów dla różnych marek, a możliwość używania tokenów w pojedynczych komponentach pliku Vue zmniejsza złożoność i ułatwia pracę programistom.
Z perspektywy klienta korzystanie z Internet Explorera nadal powoli spada. IE nie zostało wyłączone z witryny, ale wraz z przejściem na stopniowe ulepszanie funkcje i aplikacje przestaną działać. Klienci skorzystają na postępach w naszej technologii, ponieważ będą mogli korzystać z ujednoliconych funkcji witryny, w której sprawdzone metody, dostępność i projektowanie są wbudowane w stale rozwijany system projektowania oparty na Lit, zapewniający pełną interoperacyjność z dowolną platformą obecną lub przyszłą.
Cieszę się, że mogę wykorzystywać nowe funkcje platformy internetowej w firmie – od korzystania z ciemnego trybu, dzięki któremu systemy statków łatwiej się używać w nocy, po Web Bluetooth, WebXR i aplikacje internetowe PWA, które umożliwiają naszym aplikacjom internetowym interakcję z otaczającym nas światem fizycznym w dowolnych warunkach. Dziękujemy, Internet Explorer, za wiele rzeczy. Teraz możemy nadrobić zaległości w internecie.