diff --git a/components/layout.js b/components/layout.js index 89d5a3a..b7df6dd 100644 --- a/components/layout.js +++ b/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 } diff --git a/components/sw.js b/components/sw.js new file mode 100644 index 0000000..79bdca1 --- /dev/null +++ b/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()) +}) \ No newline at end of file