Require WebAssembly modules using script tag
You can install script-wasm using npm:
npm install --save script-wasmIf you aren't using npm in your project, you can include scriptWasm using UMD build in the dist folder with importScripts in the serviceWorker.
Once you have installed script-wasm, supposing a CommonJS environment, in yuor serviceWorker you can import and use it in this way:
import fetchWasmScript from 'script-wasm';
// if you prefer, you can import it using a CDN instead
// self.importScripts('https://unpkg.com/script-wasm@0.1.0/dist/script-wasm.min.js')
self.addEventListener('fetch', (event) => {
const newResponse = fetchWasmScript(event.request);
// using CND:
// const newResponse = scriptWasm.default(event.request)
// returns null if the given request is not a .wasm from a <script> tag
if (newResponse !== null) {
event.respondWith(newResponse);
}
});In your html file:
<!--
data-import represents the importObject passed to instantiate the module
check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
-->
<script src="/example.wasm" data-import="{ imports: { log: console.log } }"></script>example.wasm can be a file with an associated .wat like the following, it imports log and automatically runs the function $main after the instantiation, using the start instruction:
(module
(func $log (import "imports" "log") (param i32))
(func $main
(call $log
(i32.add
(i32.const 2)
(i32.const 5)
)
)
)
(start $main)
)// serviceWorker
fetchWasmScript(request: Request): Response?
// html
<script src="your_wasm_file.wasm" data-import="your_import_object"></script>This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.
Matteo Basso
Copyright (c) 2019, Matteo Basso.
script-wasm source code is licensed under the MIT License.