Last active
October 1, 2022 14:02
-
-
Save lukaslihotzki/b50ccb61ff3a44b48fc4d5ed7e54303f to your computer and use it in GitHub Desktop.
Polyfill to support "import" in worklet scripts in Firefox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} | |
}; |
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
However, the fetches of individual modules are intercepted by
ServiceWorker
s. Can you explain the case where you need theServiceWorker
to intercept the combined source?