// Window const registration = await navigator.serviceworker.register('/sw.js', {scope: '/'})

self.addEventListener('fetch', event => { return })

self.addEventListener('fetch', event => { event.respondWith(async function () { const req = event.request const res = await caches.match(req) if (res) return res return fetch(req.clone()) }()) })

self.addEventListener('fetch', event => { event.respondWith(async function () { const req = event.request if (navigator.onLine) { const res = await fetch(req.clone()) if (res) return res } return caches.match(req) }()) })

function createSinglePageRequest (req) { const url = new URL(req.url).origin + '/app.html' return new Request(url, { method: req.method, headers: req.headers, credentials: req.credentials, cache: req.cache, mode: 'same-origin', redirect: 'manual' }) }

self.addEventListener('install', event => { // ここで新しいasstes cacheを作成する // 直ちにactivateする event.waitUntil(self.skipWaiting()) })

self.addEventListener('activate', event => { // 直ちに全clientに適用する event.waitUntil(self.clients.claim()) })

async function cacheExists (version) { if (!(await caches.has(version))) return false const cache = await caches.open(version) // cacheオブジェクト内にRequestが存在することも確認する return (await cache.keys()).length > 0 }

// Window const worker = new Worker('dedicated-worker.js') worker.onmessage = event => { // Web Workerからの応答を受信 } worker.postMessage(data)

// DedicatedWorkerGlobalScope self.addEventListener('message', event => { // ここでタスクを処理 // clientに返信 self.postMessage({result: ''}) })

// Window const channel = new MessageChannel() channel.port1.onmessage = event => { // ServiceWorkerからの応答を受信 } navigator.serviceworker.controller.postMessage(data, [channel.port2])

self.addEventListener('message', event => { // ここでタスクを処理 // client (event.ports[0]) に返答 event.ports[0].postMessage({result: ''}) })

<PrefetchOnHover urls={['/api/pages/Nota/東京Node学園祭']}> <a href='/Nota/東京Node学園祭'>東京Node学園祭</a> </PrefetchOnHover>

function PrefetchOnHover ({children, urls}) { return ( <span onMouseEnter={() => prefetch(urls)}> {children} </span> ) }

// Window async function prefetch (urls) { const {controller} = await navigator.serviceWorker return new Promise((resolve, reject) => { const channel = new MessageChannel() channel.port1.onmessage = event => { resolve(event.data) } controller.postMessage({ title: 'prefetch', body: {urls} }, [channel.port2]) }) }

self.addEventListener('message', event => { event.waitUntil(async function () { const {urls} = event.data // ここで各urlをfetchしてcacheに追加する // await fetch(new Request(url, {credentials: 'same-origin'})) event.ports[0].postMessage({title: 'prefetch'}) }()) })

const result = await Promise.race([ fetchAndCache(request), delay(3000).then(() => 'timeout') ]) if (result === 'timeout') temporarilyDisable()

async function setHeader (res) { if (res.type === 'opaque') return res const headers = new Headers(res.headers) headers.set('X-Serviceworker-Cached', 'true') return new Response(await res.blob(), { status: res.status, statusText: res.statusText, headers }) }

export async function respondApiNetworkFirst (req) { const respondCache = () => { return caches.match(getCacheUrl(req.url)) } let remoteRes try { // navigator.onLineを信用せずに、実際にリクエストを発行して判断する remoteRes = await fetch(req.clone()) } catch (err) { return respondCache() } if (remoteRes) { if (remoteRes.ok) updateApiCache(req, remoteRes.clone()) return remoteRes } return respondCache() }

async function findLatestCache (req) { const cacheNames = await caches.keys() for (const date of cacheNames.sort().reverse()) { const cache = await caches.open(date) const res = await cache.match(req, {ignoreSearch: true}) if (res) return res } return null }