Koniec Internet Explorera

Co oznacza zakończenie obsługi przeglądarki Internet Explorer dla klientów i programistów na stronie Maersk.com

steveworkman
steveworkman

Nazywam się Steve Workman i jestem głównym inżynierem w firmie Maersk.com. Maersk jest światowym liderem w dziedzinie logistyki zintegrowanego łańcucha dostaw, który już od 118 lat pomaga klientom w przewożeniu towarów na całym świecie i od ponad 20 lat umożliwia dokonywanie rezerwacji online. Na początku maja 2022 r. firma @Maersk oficjalnie zaprzestała obsługi przeglądarki Internet Explorer (IE) w systemach obsługujących klientów, ponieważ firma Microsoft w czerwcu 2022 r. oficjalnie zakończyła obsługę IE. To koniec ważnej ery internetu i rozpoczęcie nowej.

Dołączyłam do firmy Maersk w 2018 roku, a moim pierwszym projektem było stworzenie nowego globalnego paska nawigacyjnego. Musiał być w pełni testowalny, łatwy w wdrażaniu i aktualizowaniu na całym świecie bez przestojów, responsywny, przeznaczony głównie do urządzeń mobilnych, obsługiwać wiele marek, być konfigurowalny, zlokalizowany w 11 językach... i obsługiwać 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). Sprawdzając nasze dane, zauważyliśmy, że duża część handlu to klienci używający IE9 lub, co gorsza, IE11 w trybie zgodności. Ten ruch był znacznie bardziej skierowany na rynki rozwijające się i obszary, 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, w przypadku komponentu nawigacji i wszystkich przyszłych aplikacji internetowych zastosowaliśmy podejście oparte na stopniowym ulepszaniu. Możemy to „załatwić”, ale może to wymagać znacznych rozszerzeń i ograniczeń. Na przykład IE nie obsługuje interfejsu Fetch, ale zawieramy w tych przeglądarkach rozszerzenia, które sięgają do IE10. W przypadku IE9 wywołania XMLHttpRequest zostały zapisane w osobnym pliku, aby były wczytywane tylko wtedy, gdy nie można było użyć fetch.

Gdy przyszedł czas na rezygnację z obsługi IE9, udało nam się po prostu usunąć ten kod z naszych aplikacji, przy minimalnym nakładzie pracy i z maksymalną korzyścią dla użytkowników, którzy korzystają 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 druga 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 zarchiwizowanym 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, ponieważ Microsoft wprowadził specyfikację już w IE10. Dzięki narzędziu autoprefixertemu 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óre wymagały poświęcenia dużo czasu na ich rozwiązanie.

Nagle doszedłem do etapu analizy kosztów i korzyści, ale tym razem dla każdej wersji IE, podobnie jak w IE9, jest to kompromis ze wsparciem wszystkich użytkowników i długimi tygodniami pracy nad poszczególnymi projektami. 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. Zauważyliśmy, że w małych przypadkach ta metoda się sprawdza w przypadku aktywnych klientów, którzy przyzwyczaili się do otwierania IE w związku z kontaktami z nami. Ten komunikat był dobry, ale nie wystarczający, aby wykonać obliczenia.

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 statystyki nadal wskazują, że powinniśmy ją obsługiwać. Dlaczego teraz?

Strona internetowa z poziomym paskiem nawigacyjnym
Strona główna firmy Maersk z globalnym komponentem nawigacji.

Mówiąc najprościej, platforma internetowa się rozwija i IE11 nie może wykonywać tego, co jest nam potrzebne, nawet w przypadku niewielkiej armii polyfill. 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 znacznie 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. Wszystko było inne i nie można już z nich korzystać. W przypadku złożonych współczesnych platform internetowych możliwości wypełniaczy są ograniczone.

Wiesz, co się stało od czasu wycofania obsługi IE? Bardzo, bardzo mało. Nie spotkaliśmy się z liczbą zgłoszeń do działu obsługi klienta ani nie spotkaliśmy się z negatywną opinią. Nasi inżynierowie są zadowoleni, a nasze aplikacje mają ścieżkę uaktualniania do Vue 3 (która 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 uproszczenie motywów w różnych markach, 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, który zapewnia pełną interoperacyjność z dowolną platformą obecną lub przyszłą.

Cieszę się, że mogę korzystać z nowych funkcji platformy internetowej w firmie – od korzystania z ciemnego trybu, dzięki któremu systemy statków łatwiej używać w nocy, po Web Bluetooth, WebXRaplikacje 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 przystosowaniu się do platformy internetowej.