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

Question

В последнее время я работаю с и часто сталкиваюсь с ситуацией, когда мне хотелось бы обработать некоторые необработанные данные, прежде чем хранить их в кэше serviceworker. Например, пример использования будет обрабатывать большой необработанный текстовый файл удалите лишнее пустое пространство. Таким образом, кешированный ответ на мой HTTP-запрос уже будет «оптимизирован».

Я думал, что почему бы не сделать это в webworker, но, увы, после долгих поисков я не нашел представления о том, как веб-сайт может быть доступен внутри serviceworker. Не похоже, что я могу перейти в контекст веб-мастера, используя postMessage.

Вопрос:
Как я могу получить доступ к Web Workers в работник службы?

Answer 1

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

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

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

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

Here's an example код для этого, используя множество функций 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; 
}; 

И тогда работник может выглядеть like this (который преобразует 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); 
}); 

Такой подход позволил бы начать делать меньше смысла, если вы имеете дело с большими объемами данных, потому что есть накладные расходы на сериализацию и отсутствие streaming support, по сравнению с тем, что было бы возможно при прямом использовании API хранилища кэшей.