tuber/serviceworker.js

const cacheVersion = 'v1';

// self.addEventListener('install', event => {
//   event.waitUntil(caches.open(cacheVersion).then(cache => {
//     // cache the /error endpoint which will be served by the serviceworker when the fetch client encounters a network error.
//     return cache.addAll(['/error']);
//   }));
// });

self.addEventListener('message', async event => {
  const source = event.source || (await clients.get(event.clientId));
  if(!source) {
    return
  }
  if(event.data.pollInstalled) {
    source.postMessage({confirmInstalled: true});
  }
  if(event.data.connect) {
    var evtSource = new EventSource('/tuber-trickle-ice');

    evtSource.onmessage = function(serverSentEvent) {
      client.postMessage({ log: `sse: ${JSON.stringify(serverSentEvent, null, "  ")}\n\n `});
    }
  }
});



self.addEventListener('fetch', event => {


  event.respondWith(clients.get(event.clientId).then((client) => {

    return caches.match(event.request).then(response => {
      // caches.match() always resolves
      // but in case of success response will have value
      if (response !== undefined) {
        if(client) {
          client.postMessage({ log: `cache hit: ${event.request.method}, ${event.request.url}` });
        }
        return response;
      } else {
        if(client) {
          client.postMessage({ log: `fetching: ${event.request.method}, ${event.request.url}` });
        }
        return fetch(event.request).then(async response => {
          
          if(client) {
            client.postMessage({ log: `fetching: ${event.request.method}, ${event.request.url}` });
          }
          // if(event.request.url.endsWith(".bpg")) {

          //   const pngBytes = await decodePromises[event.request.url];

          //   const makeModifiedResponse = () => {
          //     const newHeaders = new Headers(response.headers);
          //     newHeaders.set('content-type', 'image/png');
          //     newHeaders.set('content-length', String(pngBytes.length))
            
          //     return new Response(
          //       new ReadableStream({
          //         start(controller) {
          //           controller.enqueue(pngBytes);
          //           controller.close();
          //         }
          //       }), {
          //       status: response.status,
          //       statusText: response.statusText,
          //       headers: newHeaders
          //     });
          //   }

          //   client.postMessage({ log: `returning & caching modified response for: ${event.request.method}, ${event.request.url}` });

          //   caches.open(cacheVersion).then((cache) => {
          //     cache.put(event.request, makeModifiedResponse());
          //   });
          //   return makeModifiedResponse();
          // }
          if(client) {
            client.postMessage({ log: `ignored: ${event.request.method}, ${event.request.url}` });
          }
          return response;
        }).catch( e => {
          if(client) {
            client.postMessage({ log: `fetch failed in serviceworker! ${event.request.method}, ${event.request.url}: ${e} ` });
          }
          const errorMessage = "502 Bad Gateway from tuber serviceworker"
          return new Response(
            errorMessage, {
            status: 502,
            statusText: errorMessage,
            headers: new Headers({"Content-Length": String(errorMessage.length)})
          });
        });
      }
    });

  }));
  
});