This Browser Supports Webassembly? At what degree?

How to make sure your Webassembly code can run on your user’s browser? Besides, as Webassembly evolves, your application is going to encounter a mixed population of browser versions with different degrees of Webassembly support. This is not true today, but will be in the near future, for instance, threads is a new feature that is coming to Webassembly. How to tell what Webassembly features are supported by your user’s browser?

And if my User’s Browser Does Not Support Webassembly at All?

Your user may not have a chance to use a newer browser, this situation can happen in a rigid corporate environment, where the approved browser version does not support Webassembly. Two choices:

1.Request the user to get a newer browser and then quit your application. This is the easiest developer implementation, but perhaps not the most helpful.

2.Run a Javascript version of your application, but also tell your user to install a newer browser.

Your application may fail erratically If you run it on a browser that does not support all the Webassembly features used by it.

Then you can blame on the machine:

To err is human and to blame it on a computer is even more so

How to Test my Webassembly Application in a Browser That Does Not Support Webassembly?

You can disable Webassembly support in your browser and then check what is going to happen with your application. In Firefox, open about:config, then Accept the risk, but be careful because you could void Firefox warranty, really?

Firefox-Void-Warranty

Then type wasm in the search box. Firefox shows all configuration related with Webassembly, you are looking for javascript.options.wasm. Double click changes its content, turn it off when testing:

Firefox-Wasm-Config-OFF

How to Tell if my Webassembly Application is going to run?

The Webassembly object only exists if the browser supports Webassembly, but there is a more complete check that, as shown later in this post, allows checking if a particular Webassembly feature is implemented in the browser. Look at this self contained HTML file:


<html>  
<head>  
</head>  
<body>  

  <! Where wasm support is shown, there is javascript below that changes color and msg >  
  <h1 id="WasmSuppordId" style="color:blue;">Webassembly supported</h1>  
  
<script>  
  
  // Main function, return true if wasm is supported and false otherwise  
  function WasmSupported()  
  {  
      var ret=false;  
        
      // A try section is much more convenient as we don't need to keep adding ifs  
      try  
      {  
          /* This is the minimum and useful webassembly module  
              explanation of every bit is here:  
              https://webassemblycode.com/dissecting-minimum-useful-webassembly-module/ */  
 
          var xorBinWasm = new Uint8Array([ 0x00, 0x61, 0x73, 0x6D, 0x01, 0x00, 0x00, 0x00,  
                                            0x01, 0x07, 0x01, 0x60, 0x02, 0x7F, 0x7F, 0x01,  
                                            0x7F, 0x03, 0x02, 0x01, 0x00, 0x07, 0x07, 0x01,  
                                            0x03, 0x58, 0x4F, 0x52, 0x00, 0x00, 0x0A, 0x09,  
                                            0x01, 0x07, 0x00, 0x20, 0x00, 0x20, 0x01, 0x73,  
                                            0x0B]);  

          var WebAssemblyInstance = new WebAssembly.Instance(new WebAssembly.Module(xorBinWasm));  
          var xorFunc=WebAssemblyInstance.exports.XOR;  

          /* Is the webassembly code working?  
              details on dead beef can be found here:  
              https://webassemblycode.com/xor-english-word/ */  
 
          if(  
              (xorFunc(0xFF00, 0x21AD) !== 0xdead ) ||  
              (xorFunc(0xAA55, 0x14BA) !== 0xbeef )  
              )  
          {  
              // NO! let the world know about  
              throw false;  
          }  
            
          // Everything worked, webassembly is supported  
          ret=true;  
      }  
      catch(e)  
      {  
          ret=false;  
      }  
        
      return ret;  
  }  

  // Is webassembly supported?  
  if( !WasmSupported() )  
  {  
      // No!, Change the paragraph message and color to tell in RED that webassembly is not supported  
      var element=document.getElementById("WasmSuppordId");  
      element.innerHTML="WEBASSEMBLY NOT SUPPORTED!";  
      element.style="color:red;"  
  }  
    
</script>  
</body>  
</html>  

The WasmSupported() function accomplishes the following important tasks before asserting the browser can run Webassembly code:

  1. The browser can create a Webassembly module.
  2. The browser can create a Webassembly instance.
  3. The browser can execute a Webassembly function.
  4. It does not use Javascript promises, which allows a sync evaluation of user’s browser.

What Is that Bunch of Bytes in Uint8Array?

All bits in that sequence is explained in Dissecting a Minumum Webassembly Module. Don’t miss that post as it shows how to write Webassembly in its text format!

Wait a Minute and How About Checking for Webassembly New Features?

There are lots of new features that are going to be added to Webassembly. Threads is a big one that I am going to use as an example. So lets assume your new Webassembly application uses threads (when eventually implemented). Your application is going to encounter browsers that supports Webassembly, but not threads, like our today’s browser. In that situation the code above will tell you the user’s browser supports Webassembly, but your code will fail when trying to use threads. What we should do then?

There are a couple of ways to check this browser limitation ahead of time and fail gracefully (does such a thing exists?) and tell your user the accurate problem, which would be your browser version does not support Webassembly threads. Or, instead of failing, run a version of your application that does not use threads.

The simplest way I can think of would be to change the Webassembly module above, which currently only has a XOR() function, to have another function, lets call it BrowserSupportsWasmThreads(). The BrowserSupportsWasmThreads() function would do some basic thread operations, maybe it would only create a thread and then delete it, and then return TRUE if all thread operations worked and FALSE otherwise. Then change the WasmSupported() function to call BrowserSupportsWasmThreads().

Your application should have as many functions as necessary to figure out what Webassembly features are not supported by your user’s Browser. And then take what you consider appropriated action, fail or workaround.

Conclusion

It is not very laborious to verify in detail what Webassembly features your user’s browser support and then take a more clear action. Or you could start memorizing the

Top Explanations by Programmers:

Strange…

Somebody must have changed my code.

I’ve never heard about that.

It did work yesterday.

How is this possible?

I can’t test everything!

THIS can’t do THAT.

Didn’t I fix it already?

There must be a virus in the application software.

According to my calculations the problem doesn’t exist.

Post MindMap

MindMap-Browser-Support-webassemblycode.com
Software version
Firefox 58.0.2 (64-bit)

Leave a message below. Webassembly is evolving rapidly, please let me know if this post got outdated.

Enjoyed this post?

Don't miss new posts: Share it with your friends:

1 Response

  1. February 16, 2018

    […] via This Browser Supports Webassembly? At what degree? – WebAssemblyCode […]

Leave a Reply

Your email address will not be published. Required fields are marked *