IndexedDB in service workers

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/dexie@^2.0.0-beta/dist/dexie.js"></script>
  </head>

  <body>
    <button id="add" class="add">Add item to db</button>
    <textarea id="result" class="result"></textarea>
    <script src="script.js"></script>
  </body>
  
</html>

async function testFetch() {
  const result = await fetch('test.html');
  let resultObject;
  switch (result.status) {
    case 200: {
      resultObject = await result.json();
      console.table(resultObject);
      break;
    }
    case 500: {
      resultObject = await result.json();
      console.error(resultObject)
      resultText = JSON.stringify(resultObject);
      break;
    }
    default: {
      resultObject = await result.text();
      console.log(resultText);
      break;
    }
  }
  const resultElement = document.getElementById('result');
  resultElement.innerText = resultObject.map(r => r.id).join('\n');
}

async function start() {
  let service = await navigator.serviceWorker.getRegistration();
  if (service) {
    console.log('service updating');
    await service.update()
  } else {
    service = await navigator.serviceWorker.register('sw.js');
  }
  console.log('service registered: ', service);
  if(service.installing) {
    console.log('Service worker installing');
  } else if(service.waiting) {
    console.log('Service worker installed');
  } else if(service.active) {
    console.log('Service worker active');
  }
  service.onupdatefound = () => {
    console.log('update found');
  }
  navigator.serviceWorker.oncontrollerchange = () => {
    console.log('active service: ', service.active);
    testFetch();
  };
  if (service.active) {
    testFetch();
  } else {
    location.reload();
  }
}

start();
const addButton = document.getElementById('add');
addButton.onclick = () => {
  testFetch();
}

/* Styles go here */

.main {
  display: flex;
}

.add {
  width: 100%;
  margin: 10px;
}

.result {
  width: 100%;
  margin: 10px;
  height: 100px;
}

importScripts('https://unpkg.com/dexie@2.0.1/dist/dexie.js');
console.log('loaded');

self.oninstall = () => {
  console.log('installed');
  self.skipWaiting();
}
self.onactivate = () => {
  console.log('activated');
}
self.onfetch = (e) => {
  if (e.request.url.endsWith('test.html')) {
    e.respondWith(respond(e));
  }
}

async function respond(e) {
  console.log('responding to', e);
  try {
    const data = await createTestData();
    return new Response(
      JSON.stringify(data),
      {status: 200, statusText: 'OK'}
    );
  } catch (error) {
    return new Response(
      JSON.stringify(error),
      {status: 500, statusText: 'ERROR'}
    );
  }
}

async function createTestData() {
  console.log('creating test data...');
  const db = new Dexie('test');
  db.version(1).stores({test: 'id'});
  const key = await self.crypto.subtle.generateKey({name: 'AES-CBC', length: 128}, false, ['encrypt']);
  const object = {test: 'hallo'};
  const array = [1, 2, 3, 4, 5, 6];
  const map = new Map();
  const set1 = new Set();
  const id = Math.random();
  const data = {id, object, array, map, set1, key};
  console.log('created', data);
  console.log('storing data...');
  await db.table('test').put(data);
  console.log('retrieving data...');  
  const result = await db.table('test').toArray();
  console.log('data retrieved', result);
  db.close();
  return result;
}