partytown
partytown copied to clipboard
Support spawning third-party Web Worker from within the Partytown thread (nested workers).
Is your feature request related to a problem? Please describe.
At work we use Permutive. Our Lighthouse audits consistently places Permutive at the top of the list for third-party code with the most impact. The problem I am running into is that Permutive also uses a Web Worker and Partytown does not seem to support Workers within Workers.
Describe the solution you'd like
Disabling Workers within the Partytown Worker thread looks intentional. There may be a good reason for disabling it but I could not find additional context. If support is not possible, can the documentation reflect this limitation and the reasons for it? This would be helpful to understand and better plan for alternative solutions.
If support is possible, can the codebase be updated to define the Worker constructor and prototype in the Partytown Worker Window?
Describe alternatives you've considered
- Used any available Partytown option I could find (
mainWindowAccessors
,globalFns
) with no success. - Edited the Permutive source code when reverse proxying the script file, but this approach is fickle and not sustainable. I would not feel comfortable doing this in production.
Additional context
I've been updating a local version of Partytown to test within the development build of our site. I've managed to make some edits that do enable third-party Workers, allowing the script to get further in execution but other things are breaking down the line (for example, thi$
becomes undefined at times??). This leads me to believe third-party workers are either not possible, or I just lack enough familiarity with the source code to successfully mock this functionality.
I've tested this using a basic web worker example (with Next.js Script
component):
// public/static/worker.js
onmessage = function(e) {
debugger;
console.log('Worker: Message received from main script');
const workerResult = 'Result: ' + e;
postMessage(workerResult);
}
// my_app/src/component/head/inline-scripts.js
<Script strategy="worker" id="test-worker">{`
try {
const myWorker = new Worker("https://localhost:12345/static/worker.js");
document.addEventListener('click', function () {
myWorker.postMessage('testing');
});
myWorker.onmessage = function(e) {
console.log('Message received from worker');
}
} catch(err) {
debugger;
console.log('Web workers not supported.');
}
`}</Script>