Deseo ejecutar una función (en segundo plano) utilizando un trabajador. Los datos provienen de una solicitud http. Estoy usando un cálculo simulado(e.data[0] * e.data[1] * xhrData.arr[3]) (reemplazado por una función que devuelve el resultado real de algo) de la siguiente manera:

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);
};

Esto funciona bien. Pero, esta es una implementación pura de JS. Estaba planeando usar un servicio (más un trabajador compartido) para esto, así que creo solo un trabajador por aplicación angular y no tengo problemas de memoria. Esto va a ser un desencadenante de una acción del botón de usuario de enviar formulario.

Mi pregunta

Primero, me pregunto si los trabajadores del servicio pueden hacer esto en Angular, ya que también es un tipo de subproceso de trabajo en segundo plano.

Segundo, si no es posible, ¿puedo acceder al caché de los trabajadores del servicio desde el trabajador web? y ¿Es posible acceder a este caché de trabajador de servicio? ¿Cómo se supone que se debe hacer esto? Cualquier ayuda es bienvenida.

enga en cuenta que puedo trabajar con los trabajadores del servicio y puedo almacenar en caché todos los activos estáticos con los trabajadores del servicio angular.

Actualizar

ude tener una idea básica de habilitar el caché de datos en la aplicación angular usando la siguiente configuración en la que estoy trabajando actualmente.

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

Actualizar

Podí poner esto en funcionamiento de forma cruda, pero funcionó. Se agregó el activo que necesitaba la solicitud XHR en ngsw-config.json en la sección de activos. Esto almacenó en caché la solicitud en la caché del trabajador de servicio. El caché de los trabajadores del servicio se puede abrir usandocaches.open('ngsw:db:${name}') pero no tuve que hacer eso.

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.

Así es como lo logré. Creé un servicio en angular para el trabajador del servicio:

@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);
      }
  }

}

Entonces creé unweb-worker.js archivo en la carpeta de activos:

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);
};

Mingsw-config.json tenía una sección de activos que almacenaba en caché los activos / test.md:

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

Desde el componente, por ejemplo, app.component.ts, activé un 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');
  }

}

Esto hace que web-worker.js active la solicitud XHR. Aunque esperaba tener que usar una API de acceso a caché, no fue así. El trabajador del servicio sirvió automáticamente el archivo desde el caché (lo cual es fantástico). Sin embargo, si es necesario acceder al caché, descubrí que esto se puede hacer usando la API de caché aquí:https: //developer.mozilla.org/en-US/docs/Web/API/Cach

Estoy seguro de que las cosas se pueden mejorar y la estructuración de archivos se puede hacer más limpia según las mejores prácticas. Si encuentra una solución mejor, deje una respuesta para que ayude a todos.