Este Browser Suporta Webassembly? Quais características?

Como ter certeza de que seu código Webassembly roda no browser do seu usuário? Além do mais, enquanto Webassembly evoluí, sua aplicação encontrará uma população de Browsers que suporta características diferentes de Webassembly. Isso não é verdade hoje, mas será num futuro próximo, por exemplo, threads, é uma característica nova que está chegando. Como descobrir quais características do Webassembly são suportadas pelo browser do seu usuário?

E se o Browser do meu usuário não suporta Webassembly?

É possível que o seu usuário não tenha a oportunidade de usar um Browser mais novo, esta situação pode acontecer em empresas com políticas de TI rígidas, onde a versão de Browser aprovada não suporta Webassembly. Duas opções:

1.Peça ao seu usuário para usar um Browser mais novo e saia de sua aplicação. Esta é a implementação mais fácil, mas talvez não seja a solução mais prestativa.

2.Execute uma versão Javascript de sua aplicação, mas também diga a seu usuário para que instale um Browser mais novo.

Sua aplicação talvez se comporte de maneira errática se ela é executada em um Browser que não suporte todas características do Webassembly.

Aí você pode culpar o computador:

Errar é humano e culpar o computador é ainda mais humano

Como testar minha aplicação em um Browser que não suporta Webassembly?

Você pode desabilitar Webassembly suporte no seu Browser e então verificar o que acontece com a sua aplicação. No Firefox, abra about:config, e Accept the risk, mas seja cuidadoso pois você poderá perder a garantia do Firefox, Sério?

Firefox-Void-Warranty

Então entre wasm na caixa de procura. Firefox mostrará todas as opções relacionadas com Webassembly, você está procurando por javascript.options.wasm. Duplo clique modifica seu conteúdo, coloque false quando for testar:

Firefox-Wasm-Config-OFF

Como descobrir se a minha aplicação Webassembly executará?

O objeto webassembly somente existe em Browsers que suportam Webassembly, mas existe uma verificação mais completa que, como mostrado abaixo neste post, permite a verificação de uma característica particular do Webassembly no Browser. Veja este HTML:


<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>  

A função WasmSupported() implementa as seguintes importante tarefas antes de dizer que o Browser suporta Webassembly:

  1. O Browser consegue criar um módulo Webassembly.
  2. O Browser consegue criar uma instância Webassembly.
  3. O Browser consegue executar uma função Webassembly.
  4. Ele não usa Javascript promisses, o que permite uma avaliação síncrona do Browser.

O que são aqueles bytes em Uint8Array?

Todos os bits nesta sequência estao descritas em Dissecando um Módulo Webassembly Mínimo, mas Útil. Não perca aquele post, pois ele explica como escrever Webassembly usando seu formato texto!

Espere um pouco, e como verificar por novas características no Webassembly?

um monte de novas características que serão adicionadas em Webassembly. Threads é uma característica importante que usarei como exemplo. Vamos assumir que a sua nova aplicação usa threads (quando implementado no futuro). Sua aplicação encontrará browsers que suporta Webassembly, mas não suporta threads, como o seu Browser de hoje. Nesta condição o código que mostrei acima confirmará que o browser suporta Webassembly, mas o seu código terá problemas quando tentar usar Threads. O que devemos fazer então?

Há alguns caminhos a seguir para verificar esta limitação antes de executar a sua aplicação e então falhar de uma maneira melhor (isso existe?) e comunicar para o usuário algo mais acurado, que seria “o seu Browser não suporta Webassembly threads”. Ou, em vez de falhar, execute a verão de sua aplicação que não usa threads.

A maneira mais simples que posso pensar seria modificar o módulo Webassembly acima, que correntemente contém apenas a função XOR, para conter outra função, vamos chamá-la de BrowserSupportsWasmThreads(). A função BrowserSupportsWasmThreads() executaria operações de thread, talvez criar e destruir threads, e então retornar TRUE se todas as operações com threads funcionem e FALSE se alguma operação falhar. Modifique a função WasmSupported() para executar BrowserSupportsWasmThreads().

Sua aplicação deverá ter quantas funções sejam necessárias para descobrir quais características não são suportadas pelo Browser do usuário. E então tome a ação que acha apropriada, falhar ou contornar.

Conclusão

Não é muito trabalhoso verificar que características do Webassembly são suportadas no Browser do usuário e daí tomar uma ação mais clara.

Ou voce pode começar a memorizar:

Explicações mais dadas pelos programadores:

Estranho…

Alguem modificou o meu código.

Eu nunca vi isso.

Funcionava ontem.

Como isso é possivel?

Eu nao consigo testar tudo!

ISSO não pode resultan NAQUILO!

Eu já arrumei isso?

Acho que há um virus na aplicação.

De acordo com meus cálculos este problema não existe.

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:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *