이 기사에서는 Electron의 BrowserView에 대한 샘플을 읽으면서 소개합니다.
Electron은 다른 네이티브 앱과 비교하여 웹 앱과 연계하는 앱을 만들기 쉽기 때문에 Node.js를 사용하는 사람은 꼭 만져보세요.

Electron이란?

네이티브 어플리케이션을 Web기술(HTML/JavaScript/CSS)로 만들기 위한 프레임워크입니다.
네이티브 앱 특유의 처리(파일 액세스 등)를 Node.js의 메인 프로세스가 받아들이고, 화면 표시를 HTML/JavaScript/CSS가 받는다고 하는 구조로 되어 있습니다. 렌더러에는 Chromium이 사용되고 있으므로, JS 대응 상황에 고민하는 것은 거의 없습니다.

그림 1 Electron의 아키텍처

BrowserView란?

앱 창에 웹 콘텐츠를 포함하는 데 사용되는 모듈입니다. Electron 프로젝트의 일부로 개발되었습니다.
웹 콘텐츠 임베딩에는 원래 webview라는 태그가 사용되었지만, 버그의 해결이 Chromium 의존 때문에 문제가 있어도 Electron측으로서는 수정을 기다릴 수 밖에 없고, Electron 프로젝트로서 Web 컨텐츠 임베디드 기능을 개발 해 나가게 된 것 같습니다.

참고 htps //w w. 흠. 코 m/bぉg/인 t로즈신 g-b로 w 세르

BrowserView의 공식 샘플

공식 샘플은 왜? 다음과 같이 app.on('ready') 에서 실행합시다.

package.json

{
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

main.js

const {app, BrowserView, BrowserWindow} = require('electron')

app.on('ready', () => {
  let win = new BrowserWindow({width: 800, height: 600})
  win.on('closed', () => {
    win = null
  })

  let view = new BrowserView({
    webPreferences: {
      nodeIntegration: false
    }
  })
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
  view.webContents.loadURL('https://electronjs.org')
})

그러면 다음과 같은 창이 나옵니다.

창의 일부에만 웹페이지가 표시됩니다. 창의 크기를 변경해도 표시 위치는 변경되지 않습니다.
윈도우 사이즈에 맞추어 표시하거나, 사이즈를 바꾸면 표시가 바뀌거나 해 주었으면 좋겠네요.

문서 을 보면 view.setAutoResize 라고 하는 것을 알기 때문에 사용해 봅시다. 다음 한 줄을 추가합니다.

view.setAutoResize({width: true, height: true})

그러면 다음과 같습니다. 화면 사이즈 변경에 맞추어 표시의 크기가 바뀌고 있네요.


또한 setBounds에 창 크기를 지정하여 창을 채울 수 있습니다.
※스크롤 바가 윈도우 밖에 숨어 버리고 있습니다. 자동 조정이라면 좋겠지만 그런 기능을 찾을 수 없었습니다.

현상 할 수없는 것

스크롤 바를 의식한 표시 사이즈 조정

하나의 BrowserWindow에 여러 BrowserView 표시
setBrowserView에는 BrowserView를 하나 지정할 수 있을 뿐, 한 번 BrowserView를 세트하고 나서 다른 BrowserView를 세트하면, 최초로 세트 한 BrowserView는 표시되지 않게 되어 버립니다.

마지막으로

네이티브 애플리케이션을 웹 기술(HTML/JavaScript/CSS)로 만들기 위한 Electron과 앱 윈도우에 웹 컨텐츠를 임베드하기 위한 BrowserView를 소개했습니다.
BrowserView로 할 수 있는 일은 아직 적은 것 같습니다만, 앞으로의 개발이 기대되네요. 개인적으로는, 하나의 BrowserWindow에 복수의 BrowserView를 표시할 수 있도록 해 주었으면 합니다.

아래에 본 기사에서 만든 소스를 둡니다.

main.js

const { app, BrowserView, BrowserWindow } = require('electron')

app.on('ready', () => {
    let width = 800
    let height = 600
    let win = new BrowserWindow({ width: width, height: height })
    win.on('closed', () => {
        win = null
    })

    let view = new BrowserView({
        webPreferences: {
            nodeIntegration: false
        }
    })
    win.setBrowserView(view)
    view.setBounds({ x: 0, y: 0, width: width, height: height })
    view.webContents.loadURL('https://electronjs.org')
    view.setAutoResize({ width: true, height: true })
})

추가
여러 개의 BrowserView를 만들 수있는 것 같습니다.
htps : // / ぇct 롱 js. 오 / cs / 아피 / b w w r r u w w