Skip to main content

네비게이션 기록 관리

개요​

NavigationHistory 클래스는 Electron 애플리케이션의 브라우징 기록을 관리하고 상호작용할 수 있게 해준다. 이 강력한 기능을 활용해 사용자에게 직관적인 네비게이션 경험을 제공할 수 있다.

네비게이션 기록 접근하기​

네비게이션 기록은 각 WebContents 인스턴스에 저장된다. NavigationHistory 클래스의 특정 인스턴스에 접근하려면 WebContents 클래스의 contents.navigationHistory 인스턴스 속성을 사용한다.

const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow()
const { navigationHistory } = mainWindow.webContents

히스토리 탐색 구현​

뒤로 가기와 앞으로 가기 기능을 쉽게 구현할 수 있다:

// 뒤로 가기
if (navigationHistory.canGoBack()) {
  navigationHistory.goBack()
}

// 앞으로 가기
if (navigationHistory.canGoForward()) {
  navigationHistory.goForward()
}

방문 기록 접근하기​

사용자의 브라우징 기록을 조회하고 표시하는 방법:

const entries = navigationHistory.getAllEntries()

entries.forEach((entry) => {
  console.log(`${entry.title}: ${entry.url}`)
})

각 네비게이션 기록은 특정 페이지에 해당한다. 인덱스 시스템은 순차적 순서를 따른다:

  • 인덱스 0: 가장 먼저 방문한 페이지를 나타낸다.
  • 인덱스 N: 가장 최근에 방문한 페이지를 나타낸다.

특정 항목으로 이동하기​

사용자가 브라우징 기록의 특정 지점으로 바로 이동할 수 있도록 허용한다:

// 기록에서 5번째 항목으로 이동. 인덱스가 유효한 경우에만 실행
navigationHistory.goToIndex(4)

// 현재 위치에서 2번째 앞 항목으로 이동
if (navigationHistory.canGoToOffset(2)) {
  navigationHistory.goToOffset(2)
}

Electron Fiddle로 열어볼 수 있는 전체 예제는 다음과 같다:

docs/fiddles/features/navigation-history (34.1.1)Open in Fiddle
const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  })

  mainWindow.loadFile('index.html')

  const view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({ x: 0, y: 100, width: 1000, height: 800 })
  view.setAutoResize({ width: true, height: true })

  const navigationHistory = view.webContents.navigationHistory
  ipcMain.handle('nav:back', () =>
    navigationHistory.goBack()
  )

  ipcMain.handle('nav:forward', () => {
    navigationHistory.goForward()
  })

  ipcMain.handle('nav:canGoBack', () => navigationHistory.canGoBack())
  ipcMain.handle('nav:canGoForward', () => navigationHistory.canGoForward())
  ipcMain.handle('nav:loadURL', (_, url) =>
    view.webContents.loadURL(url)
  )
  ipcMain.handle('nav:getCurrentURL', () => view.webContents.getURL())
  ipcMain.handle('nav:getHistory', () => {
    return navigationHistory.getAllEntries()
  })

  view.webContents.on('did-navigate', () => {
    mainWindow.webContents.send('nav:updated')
  })

  view.webContents.on('did-navigate-in-page', () => {
    mainWindow.webContents.send('nav:updated')
  })
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})