async function initCache() {
  const cache = await caches.open('v1')
  await cache.addAll([
    '/',
    '/index.html',
    '/app.js',
    '/components/page.js',
    '/components/layout.js',
    '/components/header.js',
    '/components/nav-menu.js',
    '/components/dialog.js',
    '/forms/button-group.js,
    '/menu/dropdown.js,
  ]) //1
}

self.addEventListener("install", event => {
  self.skipWaiting()
  event.waitUntil(initCache())
})

async function cacheFirst(request) {
  if (request.url.includes('/-/frame')) {
    const url = new URL(request.url)
    if (url.pathname === '/-/frame') {
      const html = url.searchParams.get('html')
      const csp = url.searchParams.get('csp')
      return new Response(html, {
        headers: {
          'Content-Type': 'text/html',
          'Content-Security-Policy': csp,
        }
      })
    }
  }
  const resp = await caches.match(request)
  if (resp) {
    return resp
  } else {
    return fetch(request)
  }
}

self.addEventListener('fetch', event => {
  event.respondWith(cacheFirst(event.request))
})

self.addEventListener('activate', event => {
  event.waitUntil(clients.claim())
})