Full Text Indexing in the Browser

Only Half As Bad As You Might Think!

...actually a talk about Web Workers

Why do it in the browser?

  • Beer Festivals!
  • Traveling attendees with poor/no mobile internet
  • Webapp with all its data can be accessed offline
  • Searching?

Full Text Searching

Web Workers!

  • Simple script that runs on another thread
  • I/O through XHR/fetch
  • Communicates by sending/receiving messages
  • Separate global context to window
  • Access to things like IndexedDB & WebSockets

Full Text Searching

💥 With Web Worker 💥

 

import FullTextSearch from 'full-text-search-light'

let index
function initializeIndex (beerData) {
  index = new FullTextSearch()
  beerData.forEach(beer => index.add(beer))
  postMessage('indexed')
}

searchworker.js

import FullTextSearch from 'full-text-search-light'

onmessage = message => {
  const payload = message.data
  const messageType = payload.messageType
  switch (messageType) {
    case 'init':
      initializeIndex(payload.beerData)
      return
    default: return
  }
}

let index
function initializeIndex (beerData) {
  index = new FullTextSearch()
  beerData.forEach(beer => index.add(beer))
  postMessage('indexed')
}

searchworker.js

import FullTextSearch from 'full-text-search-light'

let index
function initializeIndex (beerData) {
  index = new FullTextSearch()
  beerData.forEach(beer => index.add(beer))
  postMessage('indexed')
}

app.js

full text indexing in browser

By jonpacker

full text indexing in browser

  • 1,160