Change layout

components/layout.js

@@ -12,9 +12,16 @@ export class Layout extends HTMLElement {
       :host {
         display: flex;
         flex-direction: column;
+        align-items: stretch;
+        height: 100vh;
+        min-height: 100vh;
+        max-height: 100vh;
+        overflow-y: hidden;
+        position: relative;
       }
-      .m-page {
+      m-page {
         flex-grow: 1;
+        background: #ffb;
       }
     `
     this.shadowRoot.appendChild(style)
@@ -45,11 +52,11 @@ export class Layout extends HTMLElement {
 
   get path() {
     const hash = (
-      window.location.hash.slice(1) || '/'
+      location.hash.slice(1) || '/'
     )
     return hash.startsWith('/') ? new URL(
       hash,
-      window.location
+      location.href
     ).pathname : hash
   }
 

components/sw.js

@@ -0,0 +1,50 @@
+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',
+  ]) //2
+}
+
+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())
+})