Webpack-encore: Use with Web Workers

[damiarita]

Hi,

I am developing a symfony website that uses we bworkers a lot. In them, I use importScripts to import my custom libraries.

I would love to use the feature where the hash is added to the file name to avoid cache issues. But, of course, importScriptsleaves in a js file. Is there a way for webpack to update these URLs? Or any recomendation regarding web workers?

Thanks!

[Lyrkan]

Hey @damiarita,

I haven't tested it but maybe you could process the files containing your importScripts calls by Webpack (by calling addEntry() for each one of them) and require your custom libraries using the file-loader.

For instance:

// your-worker.js

self.importScripts(
  require('!file-loader!./lib1.js'),
  require('!file-loader!./lib2.js')
);

[Guikingone]

@damiarita If it's like the service worker, as far as I can see, the worker should be called from the entry point of your application, using Encore, it's the build/ folder which is defined as the entry point of your frontend, here's my configuration for cache and notification call (not fully functional for Notification):

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('/build/sw.js')
             .then(function () {
                 console.log('Service Worker is registered.')
             })
             .catch(function (errors) {

             });
}

function askForNotification() {
    Notification.requestPermission(function (result) {
        if (result !== 'granted') {

        }

        new Notification('Hey from notification !');
    });
}

if ('Notification' in window) {
    askForNotification();
}

Once the file is compiled and pushed to build/, it becomes available as a default JS file, this way, it can retrieve the worker from the assets folder.

[damiarita]

Hi,

I am working on this project again. And I cant' make it work.

I can't even call the webworker.

When I go to new Worker('url') in my JS file, I can't get the string to be the right URL. Again, I am using the hash, so I can't guess it.

@Lyrkan I could not make file-loader work. Could you give me some instructions on how to make it work with Encore?

Thanks!

[Lyrkan]

Hi @damiarita,

I'll have to look into it but theoretically the file-loader should give you a relative (to your build folder) path to the given JS file.

I've slightly edited my previous answer to add the exclamation marks before file-loader (to prevent other loaders from processing the JS files... which may or may not be what you want) but that's not really relevant since it doesn't change the generated path.

Maybe another solution that could help you (haven't tested it either) : https://github.com/webpack-contrib/worker-loader

[damiarita]

HI @Lyrkan

Thanks for your answer. Yesterday, I managed to make it work. I used, as you suggest, worker-loader.

I followed the instrucions on their readme file and it worked perfectly.

In stead calling new Worker('urlToJSFile'); you import myWorker from 'relativePathToJSFile'; and then construct that class in stead of Worker new myWorker();

That class, simply returns a worker pointing to the right URL.

[jakub-zawislak]

Hi, I wanted to post my solution.

yarn add worker-loader.

Add this in the webpack.config.js under the Encore:

.addLoader({
    test: /\.worker\.js$/,
    loader: 'worker-loader',
    // inline: true because otherwise it will not work with the webpack-dev-server
    options: { inline: true },
})

Change a globalObject option - related issue

cfg.output.globalObject = 'this'

So the webpack.config.js should look like:

Encore
    // ...
    .addLoader({
        test: /\.worker\.js$/,
        loader: 'worker-loader',
        options: {
            inline: true,
        },
    })
;

const cfg = Encore.getWebpackConfig();

cfg.output.globalObject = 'this'

module.exports = cfg;

Your Web Worker script name should end with the .worker.js'. Use it in that way:

import Worker from './my.worker.js';

const worker = new Worker();