Webassembly, wasm files, webservers and MIME types

adding_wasm_MIME.md

When compiling client files to webassembly, usually you'll end up with both .js and .wasm files. By default, most webservers don't know about the wasm MIME type. You'll likely see the following error: wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Here is how to add the wasm MIME type (on linux systems, apache + nginx):

Open /etc/mime.types You'll see two columns, media type on the left, file type on the right Add the line application/wasm wasm

Restart your webserver and you're good to go. This will work for Apache and also the Python SimpleHttpServer.

If you're using Nginx, you'll have to edit Nginx's mime types located in /etc/nginx/mime.types Reload nginx for the changes to take effect: sudo systemctl reload nginx

If I may add some additional info here, just in case anyone's still using PHP built-in webserver for testing: You may create a router.php file containing this small script (slightly adapted from PHP's doc):

<?php
//router.php
$path = pathinfo($_SERVER["SCRIPT_FILENAME"]);
if ($path["extension"] == "wasm") {
    header("Content-Type: application/wasm");
    readfile($_SERVER["SCRIPT_FILENAME"]);
}
else {
    return FALSE;
}
?>

then simply run php -S localhost:8080 router.php

Should do the same for compressed files, ie. if file extension is "wasm.gz" then Content-Type => "application/wasm"

I have not tried it, but I guess if you're about to serve a Gzip-compressed wasm file, then you should serve it with according media type, e.g. application/gzip

Some APIs require the Content-Type be set to application/wasm, eg. WebAssembly.instantiateStreaming().

Also, I don't think the browser deflates application/gzip (not 100% sure). It does deflate Content-Encoding: gzip

Oh, my bad, it seemsI answered a little too fast. I was absolutely not thinking about the browser handling the un-gzipping.
I think you're right then: sending the file with Content-Type: application/wasm & Content-Encoding: gzip should do the trick: browser receives asset, uncompress it (since it has the associated content encoding), and load it as wasm. Though I'm curious if WebAssembly.instantiateStreaming() can actually stream a gzip-compressed WASM file ? I guess one has to try in order to figure it out... Maybe it will be necessary to fetch & then instantiate().

I've been searching for a way to declare the mime type for wasm on an aws s3 bucket (static site) - no luck so far

Mr. corbin-c may i ask how you send the file with Content-Type: application/wasm & Content-Encoding: gzip in ngnix webserver? I have this problem with my webserver. ( https://prnt.sc/10bfog7 ) (here is the problem in screenshot)

@stevendamianakis (https://docs.unity3d.com/Manual/webgl-server-configuration-code-samples.html) this might help , there is a sample for multiple servers(Nginx, Apache) config file so that it will support gzip compression and fix the wasm error(MIME type).