[Vue/Nuxt] InternetExplorer 접속 시 microsoft Edge(엣지)로 바로 이동시키기(nuxt ie11 대응)

nuxt 프로젝트 구형IE 접속시 edge로 이동

 

Vue.js가 IE8까지 지원한다고 하는데..

Vue는 ES5 기능을 사용하기 때문에, IE8 이상에서는 정상 작동한다고 나와있다.

하지만 프로젝트를 개발하다보면 axios나 vue에서 작동하는 라이브러리들을 실제로 적용했을 때는

IE11에서 조차도 제대로 작동하지 않는 문제가 발생한다.

 

내가 만드는 프로젝트는 대부분 특정 타깃이 있기 때문에 IE11를 지원하지 않으니

다른 브라우저를 사용할 수 있었지만, 이번 프로젝트로 하는 대표 홈페이지 리뉴얼의 경우

불특정 다수 여러 사람이 우리 홈페이지를 접근하는 환경에 놓이게되었다.

 

아무리 explorer가 사라지고 있긴 하지만, 혹시 컴퓨터를 잘 모르는 사람이 

우리 회사 대표 홈페이지를 접근했는데 이상한 화면이 뜬다면?

이 부분은 반드시 대응해야 한다는 생각으로 구형 explorer로 들어올 경우 어떤 식으로 대응해야 되는지를

찾아보게 되었다. 

 

 

JavaScript로 브라우저 체크하기

아래 코드를 확인해보면, 현재 접속된 브라우저를 확인할 수 있다.

console.log(window.navigator.userAgent)

아래 결과를 보면 몇 가지 공통적인  단어들을 찾을 수 있게 된다.

IE10 이하부터는 msie 뒤에 버전명이 적히게 된다. 그럼 msie를 포함한 브라우저를 IE로 인식하면 되겠나 라고 생각하지만,

하지만 ie11은 이 와중에 msie라는 버전을 보여주는 값도 사라진다.

(심지어 여기서도 규칙이 공통이 없어서 여러 번 처리를 해주게 하다니😂)

 

IE11 console.log 결과

IE10 console.log 결과

IE9 console.log 결과

IE11까지 브라우저 체크를 하기 위해선?

IE11을 위해선 navigator의 appName을 다시 확인해준다.

console.log(window.navigator.appName);

위의 코드를 실행시켜 보면 IE11일 경우 netscape

IE10 이하의 경우 microsoft internet explorer값이 나온다.

(여기도 다르다고!?!?!😂)

 

 

여기에 추가적으로 인터넷 익스플로러에서 사용하는 trident 엔진 사용 여부를 추가로 확인해준다.

IE7까지 window.navigator.userAgent로 콘솔을 찍어 보면 trident 버전이 함께 뜨는 것을 확인할 수 있다.

trident 엔진은 구형 익스플로러에서만 사용되었으며, 엣지브라우저로 넘어가면서 트라이던트 엔진을 사용하지 않게 되었으니

이 부분을 확인하면 구형 IE를 찾아낼 수 있다.

 

최종 코드

위의 내용을 확인을 위한 최종 코드이다.

var agent = window.navigator.userAgent.toLowerCase();
var appName = window.navigator.appName.toLowerCase();
if((appName === 'netscape' && agent.indexOf('trident')!== -1) || agent.indexOf('msie') !== -1) {
    if(confirm("현재 페이지는 인터넷익스플로러(IE)브라우저를 지원하지 않습니다. " +
        "크롬 혹은 엣지브라우저에서 정상적으로 작동됩니다. 해당 브라우저로 이동하시겠습니까?")) {
        window.location = "microsoft-edge:" + window.location.href;
    }
}

11의 경우 appName과 trident 엔진 사용 여부로 체크하며 그 외 브라우저는 msie 포함 여부로 확인했다.

 

추가적으로 해당 브라우저를 지원하지 않는 안내창 후

해당 주소를 바로 크롬 엣지로 실행하는 코드를 추가했다.

구형 IE에 microsoft-edge: 후 주소를 적어주면 해당 주소가 엣지로 바로 실행된다.

 

 

---

Nuxt/vue 프로젝트에 적용하기

처음 코드를 완성 후, 해당 페이지 Vue mounted, created 측에 코드를 넣어 실행하려고 했으나 정상 작동하지 않았다.

vue 페이지 내 코드로 실행할 경우 아예 해당 코드 자체가 실행되지 않는 문제가 있었다.

 

static폴더에 IE.js 생성

그래서 해당 IE 코드는 vue 내부 코드가 아닌 static 폴더 밑에 IE.js 파일을 생성 후 최종 코드를 넣어준 뒤,

nuxt.config.js 파일에 해당 파일을 연결하는 방식으로 적용했다.

 

static/IE.js

var agent = window.navigator.userAgent.toLowerCase();
var appName = window.navigator.appName.toLowerCase();
if((appName === 'netscape' && agent.indexOf('trident')!== -1) || agent.indexOf('msie') !== -1) {
    if(confirm("현재 페이지는 인터넷익스플로러(IE)브라우저를 지원하지 않습니다. " +
        "크롬 혹은 엣지브라우저에서 정상적으로 작동됩니다. 해당 브라우저로 이동하시겠습니까?")) {
        window.location = "microsoft-edge:" + window.location.href;
    }
}

 

nuxt.config.js

module.exports = {
.
.
  head: {
    script:[
       {src:'/IE.js'},
    ]
  },
.
.
}