Skip to content

Instantly share code, notes, and snippets.

@lukaslihotzki
Last active October 1, 2022 14:02
Show Gist options
  • Save lukaslihotzki/b50ccb61ff3a44b48fc4d5ed7e54303f to your computer and use it in GitHub Desktop.
Save lukaslihotzki/b50ccb61ff3a44b48fc4d5ed7e54303f to your computer and use it in GitHub Desktop.
Polyfill to support "import" in worklet scripts in Firefox
const wrappedFunc = Worklet.prototype.addModule;
Worklet.prototype.addModule = async function(url) {
try {
return await wrappedFunc.call(this, url);
} catch (e) {
if (e.name != 'AbortError') {
throw e;
}
// assume error is caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1572644
console.warn('direct addModule call failed, resorting to bundling');
const {rollup} = await import('https://unpkg.com/rollup@2.78.0/dist/es/rollup.browser.js');
const generated = await (await rollup({
input: url,
onwarn: console.warn,
plugins: [
{
resolveId(importee, importer) {
return new URL(importee, new URL(importer || window.location.href)).toString();
},
load(id) {
return fetch(id).then(response => response.text());
},
}
],
})).generate({});
const blob = new Blob([generated.output[0].code], {type: 'text/javascript'});
const objectUrl = URL.createObjectURL(blob);
try {
return await wrappedFunc.call(this, objectUrl);
} finally {
URL.revokeObjectURL(objectUrl);
}
}
};
@lukaslihotzki
Copy link
Author

One issue with using a Blob URL or Data URL is ServiceWorkers do not intercept requests from those URL's.

However, the fetches of individual modules are intercepted by ServiceWorkers. Can you explain the case where you need the ServiceWorker to intercept the combined source?

@guest271314
Copy link

Consider communicating with and supplying raw audio data to AudioWorkletGlobalScope before AudioWorkletProcessor construction, see WebAudio/web-audio-api#2456. One way to do that is intercepting import and sending data with respondWith(). That doesn't work when Blob URL or Data URL are used as Worklet URL w3c/ServiceWorker#712 (comment).

import json from './exports.json' assert {type: "json"};
let data = new Float32Array(json);
self.addEventListener('fetch', async (event) => {
  if (
    event.request.destination === 'audioworklet' &&
    event.request.url.includes('exports.js')
  ) {
    event.respondWith(
      new Response(JSON.stringify([...data]), {
        headers: { 'content-type': 'application/json' },
      })
    );
  }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment