Как я могу получить доступ к веб-воркерам в Service Worker?

В настоящее время невозможно получить доступ к веб-воркеру из сервис-воркера. Это может измениться в будущем, и соответствующая проблема со стандартами — https://github.com/whatwg/html/issues/411

Обратите внимание, что можно использовать Cache Storage API из веб-воркера, созданного обычной веб-страницей, поэтому теоретически вы можете делать то, что предлагаете, вне контекста сервис-воркера.

Это вопрос личных предпочтений, а не строгих правил, но мне не нравится схема изменения данных, которые вы получаете из сети, а затем использование Cache Storage API для их сохранения в синтетическом Response объекте. Я предпочитаю использовать Cache Storage API для хранения точных копий того, что вы получаете из сети, чтобы все выглядело одинаково на вашей контролируемой странице независимо от того, выполняется ли запрос из сети или из кеша.

Шаблон, который я использовал ранее и который имеет дополнительное преимущество использования веб-воркеров так, как вы предлагаете, заключается в том, чтобы использовать IndexedDB аналогичным образом. Если ответ уже находится в IndexedDB, вы просто используете его, а если нет, то вы запускаете веб-воркер для обработки сетевого запроса и обработки, а затем сохраняете результат в IndexedDB для использования в будущем.

пример некоторый код для этого, использующий множество функций ES2015+, а также promise-worker и idb-keyval библиотеки для асинхронного кода.

import PromiseWorker from 'promise-worker';
import idbKeyValue from 'idb-keyval';

export default async (url, Worker) => {
  let value = await idbKeyValue.get(url);
  if (!value) {
    const promiseWorker = new PromiseWorker(new Worker());
    value = await promiseWorker.postMessage(url);
    // Don't await here, so that we can return right away.
    idbKeyValue.set(url, value);
  }
  return value;
};

И тогда рабочий мог посмотреть что-то вот так (который преобразует Markdown в HTML):

import 'whatwg-fetch';
import MarkdownIt from 'markdown-it';
import registerPromiseWorker from 'promise-worker/register';

const markdown = new MarkdownIt();

registerPromiseWorker(async url => {
  const response = await fetch(url);
  const text = await response.text();
  return markdown.render(text);
});

Этот подход теряет смысл, если вы имеете дело с большими объемами данных, поскольку при сериализации возникают накладные расходы и не хватает поддержка потоковой передачи по сравнению с тем, что было бы возможно при непосредственном использовании API Cache Storage.