Hopp til innhold

Bye, bye Internet Explorer

Kenneth Apeland

2021.10.20

Internet Explorer (IE) har vært med oss i mange år, men nå kan vi endelig si ha det bra! I denne artikkelen vil jeg komme med et forslag til en implementasjon av en sperre du kan bruke i din applikasjon slik at vi kan fjerne støtten i Jøkul.

Med mindre du har levd under en stein har du sikkert fått med deg at støtte for IE sakte men sikkert forsvinner. Edge har vært basert på Chromium fra mars 2021 så derfor kan du også legge inn en melding om dette. Teamene må selv bestemme hva de ønsker å gjøre med Edge, men vi anbefaler alle å legge inn melding om IE. Meldingen for IE vil bli seende slik ut:

Microsoft tilbyr funksjonalitet for automatisk videresending av brukere fra IE til Edge dersom nettstedet er registrert hos Microsoft som inkompatibelt med IE. Vi i kundeklienter for privatmarkedet har tatt dette i bruk, men det ser av en eller annen grunn ikke ut som det fungerer. Du kan søke om å komme med på den listen, men jeg kan ikke love at det fungerer bra.

Under kan du se implementasjonen av begge sperrene. Ta gjerne kontakt med meg dersom det er noe du lurer på, så skal jeg prøve å hjelpe :) Jeg kan også sende deg logo av typen SVG av Chrome, Firefox, Edge og Fremtind dersom du trenger det.

Oppskrift

Først legger du inn referanse til CSS- og JS-filene som en del av <head> i index_template.html eller tilsvarende:

<html lang="no">
    <head>
        {...}

        <link rel="stylesheet" href="/styles/ie-melding.css" />
        <script src="/scripts/ie-melding.js"></script>
    </head>
    <body>
        <div id="root" class="jkl root-container">{...}</div>
    </body>
</html>

Og så oppretter du en JS-fil som heter ie-melding.js:

const isIe = window.navigator.userAgent.match(/(MSIE|Trident)/);

const ieMelding = `
    <header>
        <img alt="" src="/images/fremtind.svg" />
    </header>
    <main>
        <h1
            class="jkl-title-small title-text"
        >
            Vennligst benytt en annen nettleser
        </h1>
        <p class="jkl-lead lead-text">
            Denne løsningen støtter ikke lenger Internet Explorer av hensyn til sikkerhet.
            Hvis du ikke har en annen nettleser installert, kan du laste ned en av disse:
        </p>
        <ul class="browser-list">
            <li class="browser-list__item">
                <a href="https://www.google.com/chrome/" title="Google Chrome">
                    <img alt="" src="/images/chrome.svg" />
                    <span class="jkl-link">Google Chrome</span>
                </a>
            </li>
            <li class="browser-list__item">
                <a href="https://www.mozilla.org/firefox/new/" title="Mozilla Firefox">
                    <img alt="" src="/images/firefox.svg" />
                    <span class="jkl-link">Mozilla Firefox</span>
                </a>
            </li>
            <li class="browser-list__item">
                <a href="https://www.microsoft.com/nb-no/edge/" class="Microsoft Edge">
                    <img alt="" src="/images/edge.svg" />
                    <span class="jkl-link">Microsoft Edge</span>
                </a>
            </li>
        </ul>
    </main>
    <footer>
        <a
            target="_blank"
            href="https://kundeforsikring.sparebank1.no/privat/forsikring/open/selskapsinformasjon"
            class="jkl-link jkl-link--negative jkl-desktop-small footer-link"
            >© Fremtind Forsikring</a
        >
        <a
            target="_blank"
            href="https://www.fremtind.no/personvern/"
            class="jkl-link jkl-link--negative jkl-desktop-small footer-link"
            >Personvern og vilkår for bruk av nettsiden</a
        >
    </footer>
`;

const isOldEdge = window.navigator.userAgent.toLowerCase().indexOf("edge") > -1; // old MS edge

const oldEdgeMelding = `
    <header>
        <img alt="" src="/images/fremtind.svg" />
    </header>
    <main>
        <h1 class="jkl-title-small title-text">
            Vi ser at du bruker en utdatert nettleser
        </h1>
        <p class="jkl-lead lead-text">
            Nettleseren er dataprogrammet du bruker når du besøker denne siden. Du bruker en
            versjon av nettleseren Edge som er utdatert, og ikke lenger anses å være sikker. Denne siden vil derfor
            ikke fungere i denne nettleseren. Vi anbefaler at du oppdaterer den eller bytter til en annen, som
            Google Chrome eller Mozilla Firefox. Du kan laste ned siste versjon av disse nettleserne her:
        </p>
        <ul class="browser-list">
            <li class="browser-list__item">
                <a href="https://www.microsoft.com/nb-no/edge/" class="Microsoft Edge">
                    <img alt="" src="/images/edge.svg" />
                    <span class="jkl-link">Microsoft Edge</span>
                </a>
            </li>
            <li class="browser-list__item">
                <a href="https://www.google.com/chrome/" title="Google Chrome">
                    <img alt="" src="/images/chrome.svg" />
                    <span class="jkl-link">Google Chrome</span>
                </a>
            </li>
            <li class="browser-list__item">
                <a href="https://www.mozilla.org/firefox/new/" title="Mozilla Firefox">
                    <img alt="" src="/images/firefox.svg" />
                    <span class="jkl-link">Mozilla Firefox</span>
                </a>
            </li>
        </ul>
    </main>

`;

const callback = function () {
    if (isIe || isOldEdge) {
        const appRoot = document.getElementById("root");
        appRoot.classList.add("hide-app");

        const ieRoot = document.getElementById("ie-melding");
        if (isIe) {
            ieRoot.innerHTML += ieMelding;
        }
        if (isOldEdge) {
            ieRoot.innerHTML += oldEdgeMelding;
        }
        ieRoot.classList.add("vis-ie");
    }
};

if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    callback();
} else {
    document.addEventListener("DOMContentLoaded", callback);
}

og en CSS fil som heter ie-melding.css:

body {
    margin: 0;
}

#root.hide-app {
    display: none !important;
}

#ie-melding {
    height: 100vh;
    flex-direction: column;
}

#ie-melding.vis-ie {
    display: flex !important;
}

#ie-melding header {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 81px;
}

#ie-melding.ie-melding--dnb header,
#ie-melding.ie-melding--sb1 header {
    border-bottom: 1px solid #b8b8b8;
}

#ie-melding main {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    max-width: 92ch;
    min-height: 500px;
    padding-left: 104px;
}

#ie-melding footer {
    background-color: black;
    min-height: 152px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ie-melding footer .footer-link {
    margin-right: 24px;
    color: white;
}

#ie-melding .title-text {
    padding-bottom: 24px;
    padding-top: 64px;
}

#ie-melding .lead-text {
    padding-bottom: 40px;
}

#ie-melding .browser-list {
    padding-inline-start: 0;
    display: flex;
    list-style: none;
    width: 100%;
}

#ie-melding .browser-list__item {
    padding-right: 64px;
}

#ie-melding .browser-list__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: inherit;
}

#ie-melding .browser-list__item img {
    height: 80px;
    width: 80px;
    margin-bottom: 21px;
}