Стратегии кеша: собираем маршрутизатор запросов

async function main() {
  const answer = new Response("задачи v1");

  console.log("страница прочитала:", await answer.text());
  console.log("тело использовано:", answer.bodyUsed);

  try {
    await answer.text();
  } catch (error) {
    console.log("второе чтение:", error.name);
  }

  const second = new Response("задачи v1");
  const forCache = second.clone();

  console.log("в кеш:", await forCache.text());
  console.log("странице:", await second.text());
}

main();

async function main() {
  const cache = await caches.open("проба-v1");

  // сервер просил не хранить этот ответ — Cache API это не интересует
  const answer = new Response('{"version":1}', {
    headers: { "Cache-Control": "no-store, max-age=0" }
  });
  await cache.put("/api/tasks.json", answer);
  console.log("после no-store лежит в кеше:", Boolean(await cache.match("/api/tasks.json")));

  // ключ — запрос, но строку тоже примут: из неё сделают GET-запрос
  console.log("тот же адрес с ?v=2:", Boolean(await cache.match("/api/tasks.json?v=2")));
  console.log("он же с ignoreSearch:", Boolean(await cache.match("/api/tasks.json?v=2", { ignoreSearch: true })));

  // чужие заголовки запроса на совпадение не влияют
  const withHeader = new Request("/api/tasks.json", { headers: { "X-Kto": "ja" } });
  console.log("запрос с чужим заголовком:", Boolean(await cache.match(withHeader)));

  // POST в кеш не кладут вовсе
  try {
    await cache.put(new Request("/api/tasks.json", { method: "POST", body: "{}" }), new Response("{}"));
  } catch (error) {
    console.log("put с POST:", error.name);
  }

  // put забирает тело себе — странице достаётся клон, а не оригинал
  const fresh = await fetch("/api/tasks.json");
  await cache.put("/api/копия.json", fresh);
  console.log("тело ответа использовано:", fresh.bodyUsed);
  try {
    await fresh.text();
  } catch (error) {
    console.log("прочитать его ещё раз:", error.name);
  }

  console.log("кеши этого сайта:", (await caches.keys()).join(", "));
}

main();

const DELAY = 60;
const sleep = (ms) => new Promise((done) => setTimeout(done, ms));

function createNetwork() {
  let version = 1;
  let mode = "ok"; // ok | silent | offline

  return {
    setVersion: (next) => { version = next; },
    setMode: (next) => { mode = next; },
    // задержка у всех адресов одинаковая: иначе порядок строк зависел бы
    // от скорости машины, а его мы как раз и разбираем
    fetch: (url) => new Promise((resolve, reject) => {
      setTimeout(() => {
        if (mode === "offline") return reject(new Error("сети нет"));
        if (mode === "silent") return; // сервер принял запрос и молчит
        resolve(new URL(url).pathname + " v" + version);
      }, DELAY);
    })
  };
}

function createCache() {
  const box = new Map();
  const key = (request) => request.method + " " + request.url;
  return {
    match: (request) => (box.has(key(request)) ? box.get(key(request)) : null),
    put: (request, body) => box.set(key(request), body),
    keys: () => [...box.keys()]
  };
}

async function cacheFirst(request, cache, network) {
  const hit = cache.match(request);
  if (hit) return { body: hit, from: "кеш" };
  const fresh = await network.fetch(request.url);
  cache.put(request, fresh);
  return { body: fresh, from: "сеть" };
}

async function main() {
  const cache = createCache();
  const network = createNetwork();
  const js = { method: "GET", url: "https://board.example/assets/app.3f9a1c2b.js" };

  const first = await cacheFirst(js, cache, network);
  console.log("1:", first.body, "|", first.from);

  const second = await cacheFirst(js, cache, network);
  console.log("2:", second.body, "|", second.from);

  network.setVersion(2);

  const third = await cacheFirst(js, cache, network);
  console.log("3:", third.body, "|", third.from);
  console.log("в кеше:", cache.keys().join(", "));
}

main();

function withTimeout(promise, ms) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => reject(new Error("не дождались за " + ms + " мс")), ms);
    promise.then(
      (value) => { clearTimeout(timer); resolve(value); },
      (error) => { clearTimeout(timer); reject(error); }
    );
  });
}

async function networkFirst(request, cache, network, ms) {
  try {
    const fresh = await withTimeout(network.fetch(request.url), ms);
    cache.put(request, fresh);
    return { body: fresh, from: "сеть" };
  } catch (error) {
    const hit = cache.match(request);
    if (hit) return { body: hit, from: "кеш, потому что " + error.message };
    return { body: "показывать нечего", from: "ни сети, ни кеша" };
  }
}

async function main() {
  const cache = createCache();
  const network = createNetwork();
  const page = { method: "GET", url: "https://board.example/" };

  const first = await networkFirst(page, cache, network, 200);
  console.log("1:", first.body, "|", first.from);

  network.setMode("silent");

  const second = await networkFirst(page, cache, network, 200);
  console.log("2:", second.body, "|", second.from);

  const other = { method: "GET", url: "https://board.example/help.html" };
  const third = await networkFirst(other, cache, network, 200);
  console.log("3:", third.body, "|", third.from);
}

main();

async function staleWhileRevalidate(request, cache, network) {
  const update = network.fetch(request.url).then((fresh) => {
    cache.put(request, fresh);
    return fresh;
  });

  const hit = cache.match(request);
  if (!hit) return { body: await update, from: "сеть" };

  update.then(
    (fresh) => console.log("   фон: в кеше теперь", fresh),
    (error) => console.log("   фон: не обновил —", error.message)
  );
  return { body: hit, from: "кеш, обновляю фоном" };
}

async function main() {
  const cache = createCache();
  const network = createNetwork();
  const api = { method: "GET", url: "https://board.example/api/tasks" };

  const first = await staleWhileRevalidate(api, cache, network);
  console.log("1:", first.body, "|", first.from);

  network.setVersion(2);

  const second = await staleWhileRevalidate(api, cache, network);
  console.log("2:", second.body, "|", second.from);

  const third = await staleWhileRevalidate(api, cache, network);
  console.log("3:", third.body, "|", third.from);

  await sleep(DELAY * 4);

  const fourth = await staleWhileRevalidate(api, cache, network);
  console.log("4:", fourth.body, "|", fourth.from);
}

main();

function chooseStrategy(request) {
  const path = new URL(request.url).pathname;
  if (path.startsWith("/assets/")) return cacheFirst;
  if (path.startsWith("/api/")) return staleWhileRevalidate;
  return networkFirst;
}

async function handleFetch(request, cache, network) {
  // в кеш кладут только GET, поэтому остальное сразу в сеть
  if (request.method !== "GET") {
    return { body: await network.fetch(request.url), from: "сеть, мимо кеша" };
  }
  const strategy = chooseStrategy(request);
  if (strategy === networkFirst) return networkFirst(request, cache, network, 200);
  return strategy(request, cache, network);
}

async function main() {
  const cache = createCache();
  const network = createNetwork();
  const api = { method: "GET", url: "https://board.example/api/tasks" };
  const js = { method: "GET", url: "https://board.example/assets/app.3f9a1c2b.js" };
  const page = { method: "GET", url: "https://board.example/" };

  const ask = async (number, request) => {
    const answer = await handleFetch(request, cache, network);
    console.log(number + ":", answer.body, "|", answer.from);
  };

  await ask(1, api);
  await ask(2, js);
  await ask(3, page);

  network.setVersion(2);

  await ask(4, api);
  await ask(5, api);
  await ask(6, js);

  await sleep(DELAY * 4);

  await ask(7, api);
  network.setMode("offline");
  await ask(8, page);
}

main();

const VERSION = "board-v2";
const SHELL = ["./", "./assets/app.3f9a1c2b.js", "./assets/board.5c7d0a11.css"];

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(VERSION).then((cache) => cache.addAll(SHELL)));
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((names) =>
      Promise.all(names.filter((name) => name !== VERSION).map((name) => caches.delete(name))))
  );
});

self.addEventListener("fetch", (event) => {
  // POST и остальное в кеш не кладут: пусть идёт в сеть сам, без нас
  if (event.request.method !== "GET") return;

  const path = new URL(event.request.url).pathname;
  if (path.startsWith("/assets/")) event.respondWith(cacheFirst(event.request));
  else if (path.startsWith("/api/")) event.respondWith(staleWhileRevalidate(event));
  else event.respondWith(networkFirst(event.request));
});

async function cacheFirst(request) {
  const cache = await caches.open(VERSION);
  const hit = await cache.match(request);
  if (hit) return hit;

  const fresh = await fetch(request);
  // в кеш уезжает клон: тело читают один раз, и оригинал нужен странице
  cache.put(request, fresh.clone());
  return fresh;
}

async function networkFirst(request) {
  const cache = await caches.open(VERSION);
  try {
    const fresh = await fetch(request);
    cache.put(request, fresh.clone());
    return fresh;
  } catch (error) {
    const hit = await cache.match(request);
    if (hit) return hit;
    throw error;
  }
}

async function staleWhileRevalidate(event) {
  const cache = await caches.open(VERSION);
  const hit = await cache.match(event.request);

  const update = fetch(event.request).then((fresh) => {
    cache.put(event.request, fresh.clone());
    return fresh;
  });

  // фоновое обновление держит waitUntil: иначе браузер погасит воркер
  // сразу после ответа, и до кеша обновление не доедет
  event.waitUntil(update.catch(() => {}));

  return hit || update;
}

navigator.serviceWorker.register("./sw.js");

async function show() {
  const response = await fetch("./api/tasks.json");
  const data = await response.json();

  const board = document.querySelector("#board");
  for (const text of data.tasks) {
    const li = document.createElement("li");
    li.textContent = text;
    board.append(li);
  }

  console.log("controller:", navigator.serviceWorker.controller ? "есть" : "нет");
  console.log("на экране версия задач:", data.version);
}

show();

$ node serve.mjs board 3376