JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<script src="https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js"></script>
<head>
<script src='https://unpkg.com/workbox-sw'></script>
</head>

JavaScript

//importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

self.addEventListener("install", () => {
    // Prevent storing all videos we've ever used for ever
    // Finer-grained caching might be better (or even just keep them
    // in memory here and avoid caches completely...)
    console.log("Deleting existing cache");
    caches.delete("hls");
});

workbox.setConfig({debug: false});
workbox.core.clientsClaim();

// need to be able to communicate messages between worker and main app (thread) and reset this ram cache
// self.addEventListener("message", msg => {
//     if (msg.data) {
//     }
// });

cachedResponses = [];
cachedInit = null;

const cacheBytes = async ({url, request, event, params}) => {
  urlString = String(url)
  const frameIndexString = urlString.substring(urlString.length-7, urlString.length-4);;
  const frameIndex = parseInt(urlString.substring(urlString.length-7, urlString.length-4));
  if (frameIndexString == "nit") {
    const response = await fetch(request);
    const clone = response.clone();
    cachedInit = clone;
    console.log("INIT - byte size: " + clone.headers.get("content-length"));
    return response;
  } else if (cachedResponses[frameIndex] == null) {
    const response = await fetch(request);
    const clone = response.clone();
    console.log("NETWORK - frameIndex received: " + frameIndex + " byte size: " + response.headers.get("content-length") + " clone byte size: " + clone.headers.get("content-length"));
    cachedResponses[frameIndex] = clone;
    return response;
  } else {
    const newClone = cachedResponses[frameIndex].clone();
    oldClone = cachedResponses[frameIndex];
    cachedResponses[frameIndex] = newClone;
    console.log("CACH HIT - frameIndex received: " + frameIndex + " cached byte size: " + cachedResponses[frameIndex].headers.get("content-length"));
    return oldClone;
  }
};

workbox.routing.registerRoute(({url}) => url.pathname.includes("hls") &&...