티스토리 뷰

Dev Platform/Electron

Electron 으로 간단한 웹뷰(webview) 앱 개발하기

Deok.ME 2017. 2. 5. 20:31



  Electron 의 장점은 엄청 많은대요. 그 중 하나가 "공통된 브라우저 환경을 가질 수 있다" 입니다. 따라서.. 이것을 이용하여 Electron 으로 웹뷰 만 만든다 하더라도 사용자에게 공통된 경험을 하게 해 줄수 있다는 장점이 되게 되는데요. 여기서는 Electron의 Webview 를 이용하여 페이지를 iframe 과 같이 표시하는 방법을 알려 드리겠습니다.


github 소스코드 : https://github.com/TutorialBook/electron-webview-example


* Electron의 Webview 는 Iframe 과 다르게 여러가지 규칙들에 대한 옵션을 끄거나 켤 수 있는 기능을 제공합니다.


Electron Webview 사용의 이유 ( 개인 )


우선 제가 웹 서비스 페이지가 있음에도 Electron 의 WebView 를 사용하게 된 가장 큰 이유 3가지는


1. 사용자가 IE8 을 사용하면서 Chrome 설치를 할 줄 모르는 사람이다. ( 메뉴얼의 HTML5 지원으로 인한 IE9 이상 문구는 의미가 없... )

2. 사용자가 인터넷 = 네이버 라고 아는 사람이다. ( 이걸 어떻게 설명해야되나... )

3. 데스크탑 앱 으로 배포 하면 설명 할 것 없이 편리하다.

4. 있어 보인다?


우선 이전에 포스팅 했던 HelloWorld 소스를 수정 하도록 하겠습니다.


2017/02/05 - [Dev Platform/Electron] - Electron 시작하기 ( Hello World )




main.js


우선 폴더내의 main.js 를 여셔서 BrowserWindow 함수의 홉션을 바꿔 주도록 합니다.

  mainWindow = new BrowserWindow({
    width: 1024, 
    height: 786,
    minWidth: 800,
    minHeight: 600,
  })


중요한 설정은 아니지만 위의 옵션으로 Electron 이 구동시 가로:1024, 세로:786 그리고 최소 가로:800, 최소 세로:600 으로 구동 되게 되었습니다.


그리고 아래와 같이 mainWindow.webContents.openDevTools() 부분을 삭제 혹은 주석 처리해 주시기 바랍니다. 이는 기본 개발자 모드를 꺼주는 역할을 합니다.

//mainWindow.webContents.openDevTools()


index.html 


이제 index.html 로 이동하여 상단 head 부분에 아래의 Style 를 추가해 주시기 바랍니다.


index.html <head></head> 사이

<style> 
*{ padding:0px; margin:0px; } 
#contentWrapper { position: relative; } 
#content { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
</style>


이제 body 의 테그들을 모두 삭제 후 webview 를 넣어 주도록 합니다. ( webview 의 src 부분을 원하는 주소로 변경해 주시면 됩니다. )


<div master id="contentWrapper">
  <webview ng-style="style" id="content" src="http://www.tutorialbook.co.kr" autosize="on" allowpopups></webview>
</div>

*코드 뒤의 allowpopups 는 페이지의 pop 기능을 허용한다는 뜻으로 Electron 에서는 이런 기능을을 몇가지 옵션으로 제공합니다. 꽤 많이 있고 유용한 부분이 많으니 링크를 참고 하시기 바랍니다. 추가 정보 : webview tags



이제 $ electron . 을 통해서 한번 실행해 보시기 바랍니다.

$ electron .


아래와 같이 정상적으로 페이지가 뜨신다면 기본적인 적용은 완료 되었다고 보시면 됩니다.





만약 웹 뷰의 개발자 모드를 키고 싶으시다면 아래의 코드를 index.html 하단에 넣어 주시기 바랍니다.

<script>
  onload = () => {
     const webview = document.getElementById('content')
     webview.addEventListener("dom-ready", function(){
     webview.openDevTools();
    });
  }
</script>


이제 다시 실행 시키시면 웹 뷰 로딩 같이 개발자 도구가 나타나는 것을 확인 하실 수 있으실 것 입니다.



즐거운 개발 되시기 바랍니다 :D



저작자표시 비영리 변경금지

'Dev Platform > Electron' 카테고리의 다른 글

Electron 시작하기 ( Hello World )  (0) 2017.02.05
Electron 이란?  (0) 2017.02.05
공유하기 링크
댓글