trunk [safari] preload loads wasm twice

see the wasm being downloaded twice:

also note the warning:

The resource http://localhost:8080/index-8235c780f17b17e9_bg.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.

here is my pretty standard index.html:

<html>

<head>
    <title>Live-Ask</title>
    <base href="/">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link data-trunk rel="sass" href="all.scss" />
    <link data-trunk rel="copy-dir" href="../frontend/src/assets/" />
    <link data-trunk rel="rust" data-wasm-opt="z" />

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

</html>

this does not happen on chrome.

Aug 15 '21 01:08 extrawurst

Can you test this on some other browser? I have a feeling is a browser issue, not a trunk issue

Aug 15 '21 14:08 ranile

like I wrote above:

this does not happen on chrome.

Aug 15 '21 14:08 extrawurst

@extrawurst very interesting. Thanks for the report. Do you have any suggestions on a good way to mitigate this? I have not investigated this issue at all (I don't normally use Safari), and I'm wondering if this is perhaps a known issue in Safari.

Let's keep our eyes open, and if there is something we can do to address this issue, we'll look into it.

Aug 20 '21 02:08 thedodd

Ok here's more weirdness. If you recall, Trunk puts the following line in the <head> of index.html (introduced in #147)

<link rel="preload" href="my-webapp_bg.wasm" as="fetch" type="application/wasm" crossorigin="">

If you remove the crossorigin="" at the end, then Safari only fetches the WASM file once. Here's a side-by-side: Screen Shot 2022-07-13 at 14 20 36 Importantly, it is actually the frontend.js file that fetches the article first, and the preload hits the cache. This is the opposite of what we want!

Further, with this "fix", Safari fetches the file once on a normal refresh, and 0 times on a hard refresh, since it uses the If-Modified-Since header and gets back a 304 Not Modified. Yes this is weird. In fact it's the weirdest thing I've seen Safari do so far. Again, this is on a cold, cache-ignoring refresh Screen Shot 2022-07-13 at 14 29 56

Problem with the "fix": If you remove the crossorigin="", then it breaks Chrome and Firefox, forcing them to download the file twice (on a hard refresh; 0 times on a normal refresh, which makes more sense). Here's a side-by-side: Screen Shot 2022-07-13 at 14 22 26

Going forward: I can't seem to get Safari to do the right thing with preloading at all. It would be nice if there was a way to remove this feature altogether for Safari. But I don't know of a way to do a conditional preload from a <link> tag 🤷‍♂️

Jul 13 '22 18:07 rozbb

I am also having the same issue with Trunk as @rozbb described. I’ve been looking into many resources like this page, but haven’t found any solutions that mitigate this problem. Moreover, issue #147 is still open. Does anyone have an update on this matter?

Feb 26 '23 14:02 Rynibami

Hi guys! Looks if we:

Remove crossorigin="" in index.html
Add input = fetch(input, { mode: "no-cors" }); instead of input = fetch(input); in frontend.js

Works for all browsers.

Jun 04 '23 09:06 tikitko

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

Nov 10 '23 00:11 github-actions[bot]

This bug still exists

Nov 10 '23 00:11 rozbb

if @tikitko solution works on all browsers. how about integrating this into the automatically generated output of trunk?

Dec 18 '23 11:12 extrawurst

I find it a bit problematic to change working code, which seems compliant with the definition of how things should work, just because one browser has an issue, which also doesn't seem to be breaking anything. Just loading it twice.

It indeed looks like a Safari issue. So why not raise an issue with Safari?

Dec 18 '23 12:12 ctron