<div id="readability-page-1" class="page"><div id="main" role="main">
  
  



  <article class="page" itemscope="" itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="iOS, Android 웹뷰 하위 호환성 지원 문제">
    <meta itemprop="description" content="하위 호환성은 늘 고민스러운 문제다. 웹뷰에서도 그렇다. JS의 새 버전이 나오면서 웹뷰가 JS의 신기능을 지원하지 않는 경우가 발생했다. iOS와 Android의 버전이 올라가면서 이 문제는 해결되었지만, 세상에는 여전히 구형 기기를 사용하는 사람들이 많다. 이 분들은 이상하게도 숫자는 적지만 막대한 매출을 일으키는 경향(?)이 있는지라 결코 가볍게 볼 수 없다. 그래서 웹뷰의 하위 호환성을 어디까지 지원해야 하는지, 11키티즈 개발 경험을 들어 간단히 정리해보았다.">
    <meta itemprop="datePublished" content="2024-06-28T00:50:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          less than 1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <p>하위 호환성은 늘 고민스러운 문제다. 웹뷰에서도 그렇다. JS의 새 버전이 나오면서 웹뷰가 JS의 신기능을 지원하지 않는 경우가 발생했다. iOS와 Android의 버전이 올라가면서 이 문제는 해결되었지만, 세상에는 여전히 구형 기기를 사용하는 사람들이 많다. 이 분들은 이상하게도 숫자는 적지만 막대한 매출을 일으키는 경향(?)이 있는지라 결코 가볍게 볼 수 없다. 그래서 웹뷰의 하위 호환성을 어디까지 지원해야 하는지, 11키티즈 개발 경험을 들어 간단히 정리해보았다.</p>

<ol>
  <li>esbuild
    <ol>
      <li>사유: esbuild는 es2015부터 지원한다. es2015는 화살표 함수와 let 등이 도입된 대격변의 버전이지만, Android chrome은 2017년에서조차도 es2015를 완전히 지원하지 못했다. 반면 의외로 safari는 es2015를 일찌감치 100% 지원했다. 이런 제약사항이 싫다면 전통의 babel을 써야한다.</li>
      <li>Support version
        <ol>
          <li>Android Chrome: 안정적으로 지원하기 위해 v69를 사용</li>
          <li>iOS Safari: 적당히</li>
        </ol>
      </li>
      <li>참고
        <ol>
          <li>2017년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) https://d2.naver.com/helloworld/2809766</li>
          <li>es5는 지원하지 않겠따는 esbuild의 공식 입장: https://github.com/evanw/esbuild/issues/297#issuecomment-1670072906</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>PWA
    <ol>
      <li>사유: PWA를 사용하려면 globalThis를 지원해야 한다. globalThis는 단순한 window 전역 객체가 아니다. 그래서 폴리필을 직접 만들기 상당히 까다롭다(https://ui.toast.com/weekly-pick/ko_20190503 참조). 폴리필을 사용하든가, 아니면 하위 호환성을 일부 포기해야 한다.</li>
      <li>Support version
        <ol>
          <li>Chrome Android: 65</li>
          <li>iOS: 12.2</li>
        </ol>
      </li>
      <li>참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis</li>
    </ol>
  </li>
  <li>JS module 문법
    <ol>
      <li>사유: module import는 사실상 포기할 수 없는 문법이다.</li>
      <li>Support version
        <ol>
          <li>Android Chrome: v61부터는 지원이 되지만, 백화현상이 발생하는 등 불안정한 모습을 보여 v64부터 사용하는 것을 사용했다.</li>
          <li>iOS: 마음껏 써도 된다.</li>
        </ol>
      </li>
      <li>참고: https://babeljs.io/docs/learn/#modules</li>
    </ol>
  </li>
</ol>

<p>20240628</p>

        
      </section>

      

      


      
  

    </div>

    
      

    
  </article>

  
  
    
  
  
</div></div>

Never test

하위 호환성은 늘 고민스러운 문제다. 웹뷰에서도 그렇다. JS의 새 버전이 나오면서 웹뷰가 JS의 신기능을 지원하지 않는 경우가 발생했다. iOS와 Android의 버전이 올라가면서 이 문제는 해결되었지만, 세상에는 여전히 구형 기기를 사용하는 사람들이 많다. 이 분들은 이상하게도 숫자는 적지만 막대한 매출을 일으키는 경향(?)이 있는지라 결코 가볍게 볼 수 없다. 그래서 웹뷰의 하위 호환성을 어디까지 지원해야 하는지, 11키티즈 개발 경험을 들어 간단히 정리해보았다.
esbuild
    
사유: esbuild는 es2015부터 지원한다. es2015는 화살표 함수와 let 등이 도입된 대격변의 버전이지만, Android chrome은 2017년에서조차도 es2015를 완전히 지원하지 못했다. 반면 의외로 safari는 es2015를 일찌감치 100% 지원했다. 이런 제약사항이 싫다면 전통의 babel을 써야한다.
Support version
        
Android Chrome: 안정적으로 지원하기 위해 v69를 사용
iOS Safari: 적당히
참고
        
2017년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) https://d2.naver.com/helloworld/2809766
es5는 지원하지 않겠따는 esbuild의 공식 입장: https://github.com/evanw/esbuild/issues/297#issuecomment-1670072906
PWA
    
사유: PWA를 사용하려면 globalThis를 지원해야 한다. globalThis는 단순한 window 전역 객체가 아니다. 그래서 폴리필을 직접 만들기 상당히 까다롭다(https://ui.toast.com/weekly-pick/ko_20190503 참조). 폴리필을 사용하든가, 아니면 하위 호환성을 일부 포기해야 한다.
Support version
        
Chrome Android: 65
iOS: 12.2
참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
JS module 문법
    
사유: module import는 사실상 포기할 수 없는 문법이다.
Support version
        
Android Chrome: v61부터는 지원이 되지만, 백화현상이 발생하는 등 불안정한 모습을 보여 v64부터 사용하는 것을 사용했다.
iOS: 마음껏 써도 된다.
참고: https://babeljs.io/docs/learn/#modules
20240628

iOS, Android 웹뷰 하위 호환성 지원 문제

댓글