Skip to content

start-javascript/ngx-web-worker

Repository files navigation

What is this?

Web worker service for Angular.

Install

npm i ngx-web-worker

API

export interface IWebWorkerService {
  run<T>(workerFunction: (any) => T, data?: any): Promise<T>;
  runUrl(url: string, data?: any): Promise<any>;
  terminate<T>(promise: Promise<T>): Promise<T>;
}
  • run

    • workerFunction:

      • Must be a self-contained function. Cannot reference outside variables.

      • You can import other libraries with importScripts though

      • These are okay:

      • run(input => input * input, 10);
        
        run(input => {
            const square = num => num * num;
            return square(input);
        }, 10);
        
        const someFunction = (input) => input * input);
        run(someFunction, 10);
        
        class Runner {
            private webWorkerService = new WebWorkerService();
            constructor() {
                this.webWorkerService.run(this.someFunction, 10);
            }
            someFunction() {
                return input * input;
            }
        }
      • These will probably NOT work:

      • // this is not okay because inside the context of the web worker `this` is not the same `this` as here.
        run(input => this.square(input), 10);
        
        // this is not okay because `_` doesn't exist in the web worker context (assuming tht `_` is available here to begin with)
        run(input => {
          return _.uniqueId() * input;
        }, 10);
    • data: serializable data

  • runUrl: Basically the same as

    • url: The url you would use to create a Worker instance
    • data: Same as the run method
  • terminate: Calling this will terminate the web worker, if it is still running.

    • promise: The Promise instance returned by run or runUrl.

Example

Check out ngx-web-worker-example for a sample project, or see app/app.component.ts for usage with an Angular application.

export class AppComponent implements OnInit {
    constructor(private _webWorkerService: WebWorkerService) {
    }

    ngOnInit() {
        const input = 100;
        const promise = this._webWorkerService.run(this.someCPUHeavyFunction, input);
        promise.then(result => console.log(result));
    }

    someCPUHeavyFunction (input) {
        return input * 10;
    }
}