You can install this plugin from npm:
npm i -D nativescript-worker-loader
// app/worker.js
require("globals");
global.onmessage = function(msg) {
console.log("Inside JS worker...");
global.postMessage("JS worker");
}
// app/main.js
const MyWorker = require("nativescript-worker-loader!./worker.js");
const worker = new MyWorker();
worker.postMessage({a: 1});
worker.onmessage = function(event) {...};
worker.addEventListener("message", function(event) {...});
// webpack.config.js
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
// ...
module.exports = env => {
// ...
const config = {
//...
plugins: [
new NativeScriptWorkerPlugin(),
// ...
]
}
}
Note: If you write your worker files in plain JS, you can configure your project by following the steps from the previous section. If you need to write them in TS, follow the steps in this section.
// typings/custom.d.ts
declare module "nativescript-worker-loader!*" {
const content: any;
export = content;
}
references.d.ts
:// references.d.ts
/// <reference path="./typings/custom.d.ts" /> Workerloader
// app/worker.ts
import "globals";
const context: Worker = self as any;
context.onmessage = msg => {
setTimeout(() => {
console.log("Inside TS worker...");
(<any>global).postMessage("TS Worker");
}, 500)
};
// app/main.ts
import * as TsWorker from "nativescript-worker-loader!./workers/typescript.worker";
const worker = new TsWorker();
// webpack.config.js
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
// ...
module.exports = env => {
// ...
const config = {
//...
plugins: [
new NativeScriptWorkerPlugin(),
// ...
]
}
}
ts-loader
:npm i -D ts-loader
ts-loader
instead of the ngtools/webpack
loader. The following code assumes that all your worker files are named in the format - some-name.worker.ts
. You can use a different naming convention but you have to setup the webpack loaders to also follow it.// webpack.config.js
module.exports = env => {
// ...
const config = {
//...
module: {
rules: [
// Compile TypeScript files with ahead-of-time compiler.
{
test: /.ts$/, exclude: /.worker.ts$/, use: [
"nativescript-dev-webpack/moduleid-compat-loader",
"@ngtools/webpack",
]
},
// Compile Worker files with ts-loader
{ test: /\.worker.ts$/, loader: "ts-loader" },
]
}
}
}
ngCompilerPlugin
to allow the use of shared code.// webpack.config.js
module.exports = env => {
// ...
const config = {
//...
plugins: [
new NativeScriptWorkerPlugin({
plugins: [ngCompilerPlugin]
}),
// ...
]
}
}
Please note that the way to spawn a Worker with webpack differs from the way described in the WWW Web Workers' specification (also followed by NativeScript).
Below are a few examples on how to use workers for builds with and without webpack.
If you wrote your worker scripts in plain JavaScript, you can require them.
Usage with webpack:
const WorkerScript = require("nativescript-worker-loader!./worker-script.js");
const worker = new WorkerScript();
Usage without webpack:
// without webpack
const worker = new Worker("./worker-script.js");
Or you can use the TNS_WEBPACK
global variable to find out if your app is built with webpack or not:
let worker: Worker;
if (global["TNS_WEBPACK"]) {
const WorkerScript = require("nativescript-worker-loader!./worker-script.js");
worker = new WorkerScript();
} else {
worker = new Worker("./worker-script.js");
}
However, if you wrote your worker scripts with TypeScript, you cannot use the same code for both webpack builds and non-webpack builds.
Usage with webpack:
import * as WorkerScript from "nativescript-worker-loader!./worker-script";
const worker = new WorkerScript();
Usage without webpack:
const worker = new Worker("./worker-script");