Desejo executar uma função (em segundo plano) usando um trabalhador. Os dados são provenientes de uma solicitação http. Estou usando um cálculo simulado(e.data[0] * e.data[1] * xhrData.arr[3]) (substituído por uma função retornando o resultado real de algo) como abaixo:

var ajax =  function() {
    var prom = new Promise(function(resolve, reject){
        if (!!XMLHttpRequest) {
            var xhttp = new XMLHttpRequest();
            xhttp.onload = function () {
                if (this.readyState == 4 && this.status == 200) {
                    resolve(JSON.parse(this.responseText));
                }
            };
       // Cache Logic - Will be adding logic to check cache 
       // if test.json is in cache.
       // If it is then fetch res from cache
       // There will be multiple XHR requests in parallel, not one
            xhttp.open("GET", "test.json", true);
            xhttp.send();
        }
    });
    return prom;
}

async function test (e) {
    var workerResult, xhrData;
   try {
    xhrData  = await ajax();
    workerResult = (e.data[0] * e.data[1] * xhrData.arr[3]);
    postMessage({res: workerResult});
   } catch(err) {
    postMessage({err: 'Failed'});
   }
}

onmessage = function (e) {
    test(e);
};

Isso funciona bem. Mas, esta é uma implementação JS pura. Eu estava planejando usar um serviço (mais um trabalhador compartilhado) para isso, então crio apenas um trabalhador por aplicativo angular e não tenho problemas de memória. Isso será um gatilho de uma ação do botão do usuário no envio do formulário.

Minha pergunta:

Primeiro, estou pensando se isso pode ser feito pelos trabalhadores do serviço no próprio Angular, pois também é um tipo de thread de trabalho em segundo plano.

Segundo, se não for possível, posso acessar o cache dos profissionais de serviço do Web worker? e É possível acessar esse cache do operador de serviço. Como isso deve ser feito? Qualquer ajuda é bem vinda.

Observe que sou capaz de trabalhar com trabalhadores de serviços e posso armazenar em cache todos os ativos estáticos usando trabalhadores de serviços angulares.

Atualizar:

Consegui uma idéia básica de habilitar o cache de dados no aplicativo angular usando a seguinte configuração, na qual estou trabalhando atualmente.

{
    "name": "someapi",
    "urls": ["/someuri", "/users"],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 20,
      "maxAge": "1h",
      "timeout": "5s"
    }
  }

Atualizar:

Consegui colocar isso em funcionamento, mas funcionou. Adicionado o ativo que precisava da solicitação XHR no ngsw-config.json na seção de ativos. Isso armazenou em cache a solicitação no cache do operador de serviço. O cache dos trabalhadores do serviço pode ser aberto usandocaches.open('ngsw:db:${name}') mas eu não precisava fazer isso.

I created a web worker file inside the assets folder
The XHR request was made in it. 
When a XHR was made the service worker automatically picked up the cache
So I did not have to use any alternate methods of cache access.
Sworkers was automatically served the XHR request from the cache.

Aqui está como eu consegui isso. Criei um serviço em angular para o trabalhador do serviço:

@Injectable({
  providedIn: 'root'
})
export class WebworkerService {
  myWorker: any;
  constructor() {
      this.myWorker = new Worker('/assets/web-worker.js');
      this.myWorker.onmessage = function(data) {
        console.log(data);
      }
  }

}

Então eu criei umweb-worker.js arquivo na pasta de ativos:

var ajax =  function() {
    var prom = new Promise(function(resolve, reject){
        if (!!XMLHttpRequest) {
            var xhttp = new XMLHttpRequest();
            xhttp.onload = function () {
                if (this.readyState == 4 && this.status == 200) {
                    resolve(this.responseText);
                }
            };
            xhttp.open("GET", "/assets/test.md", true);
            xhttp.send();
        }
    });
    return prom;
}

async function test (e) {
    var workerResult, xhrData;
   try {
    xhrData  = await ajax();
    workerResult = xhrData; // Some calculation or activity here
    postMessage({res: workerResult});
   } catch(err) {
    postMessage({err: 'Failed'});
   }
}

onmessage = function (e) {
    test(e);
};

Minhasngsw-config.json tinha seção de ativos que armazenava em cache assets / test.md:

{
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }

No componente, digamos, por exemplo, app.component.ts, iniciei um postMessage ()

@Component({
  selector: 'app-root',
  template:`
 <h1 (click)="myHttp()">
    Some Client Event
  </h1>
`,
  styleUrls: ['./app.component.css'],
  providers: []
})
export class AppComponent {
  constructor(private _ww: WebworkerService) { }
  myHttp() {
    this._ww.myWorker.postMessage('Test');
  }

}

Isso faz com que o web-worker.js acione a solicitação XHR. Embora eu estivesse esperando ter que usar uma API de acesso ao cache, não era assim. O responsável pelo serviço veiculou o arquivo automaticamente no cache (o que é fantástico). No entanto, se houver necessidade de acessar o cache, achei que isso pode ser feito usando a API de cache aqui:https://developer.mozilla.org/en-US/docs/Web/API/Cache

Estou certo de que as coisas podem ser melhoradas e a estruturação de arquivos pode ser melhorada de acordo com as práticas recomendadas. Se você encontrar uma solução melhor, deixe uma resposta para ajudar a todos.