Safari re-requests preloaded Wasm files

[verhovsky]

For parsing Bash, curlconverter requires 2 wasm files /tree-sitter.wasm and /tree-sitter-bash.wasm. In index.html we have the bundle of all the JavaScript code

curlconverter.github.io/index.html

Line 372 in edf28e0

<script src="/main.js"></script>

and in that code, some of the first lines it executes is

await Parser.init(); // requests /tree-sitter.wasm
const Bash = await Parser.Language.load("/tree-sitter-bash.wasm");

https://github.com/curlconverter/curlconverter/blob/e4b6fb74d508a946d1311dc63cf0ec853d9a6c1d/src/shell/webParser.ts#L7-L8

So to load the website, you

1. get the HTML file which tells you to download the JavaScript file
2. download the JavaScript file, start executing it and it tells you to download tree-sitter.wasm
3. download tree-sitter.wasm execute it and then keep executing the javascript, which next tells you to download tree-sitter-bash.wasm
4. download the tree-sitter-bash.wasm

and you've finally loaded the website. To avoid the extra round trips from having to parse and execute JavaScript to know that you need to load more Wasm files

I added these lines to the HTML to tell it to fetch the Wasm files as soon as it parses the HTML

curlconverter.github.io/index.html

Lines 18 to 19 in edf28e0

	<link rel="preload" href="/tree-sitter.wasm" type="application/wasm" as="fetch" crossorigin>
	<link rel="preload" href="/tree-sitter-bash.wasm" type="application/wasm" as="fetch" crossorigin>

and this works on Chrome and Firefox

but on Safari it loads the wasm files twice, once from the preload and once from the JavaScript

and the console says

The resource http://localhost:8000/tree-sitter.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
The resource http://localhost:8000/tree-sitter-bash.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

I tried changing crossorigin to ="", ="anonymous" and ="use-credentials". I tried removing the type="application/wasm", removing the crossorigin= and removing both type= and crossorigin=.

One difference I see is in the Network tab under "Type" it says they're preloaded as xhr but then loaded by the JavaScript as fetch. The only difference in the sent request is the prefetch sends a Origin: http://localhost:8000 header if you have crossorigin="".

[verhovsky]

https://bugs.webkit.org/show_bug.cgi?id=268370