wasm android electron

네, Android Cordova와 Electron 앱에서 WebAssembly (WASM)를 사용할 수 있습니다. 각각의 환경에서 WASM을 사용하는 방법을 정리해 드릴게요.

1. Android Cordova에서 WASM 사용

Cordova 앱은 기본적으로 웹뷰(WebView)를 기반으로 동작하므로, WASM을 지원하는 웹뷰 환경에서만 동작합니다.

(1) 지원 여부
• Android WebView는 Chromium을 기반으로 하므로, 최신 버전에서는 기본적으로 WASM을 지원합니다.
• 하지만 Android 5 (Lollipop) 이하 버전에서는 지원되지 않음에 유의해야 합니다.

(2) 사용 방법

일반적인 웹 앱에서 WebAssembly를 사용하는 방식과 동일합니다.

WebAssembly.instantiateStreaming(fetch("module.wasm"), {}).then(result => {
    console.log(result.instance.exports);
});

(3) Cordova에서 실행 시 주의할 점
• 파일 접근 문제: fetch("module.wasm")이 정상적으로 동작하지 않을 수 있습니다.
• 해결 방법: module.wasm 파일을 www/ 폴더에 두고 cordova-plugin-file을 사용해 로드할 수도 있습니다.
• Content Security Policy (CSP) 설정: wasm 파일을 불러오는 경우 CSP 설정을 확인해야 합니다.
• meta 태그에서 wasm-unsafe-eval을 허용해야 할 수도 있습니다.

2. Electron 앱에서 WASM 사용

Electron은 Chromium과 Node.js 환경을 함께 사용하므로, WASM을 문제없이 사용할 수 있습니다.

(1) 사용 방법

Electron은 브라우저 환경과 유사하므로, 일반적인 WASM 로딩 방식이 그대로 동작합니다.

WebAssembly.instantiateStreaming(fetch("module.wasm"), {}).then(result => {
    console.log(result.instance.exports);
});

(2) 로컬 파일 접근 문제

Electron에서는 fetch()를 사용하여 로컬 .wasm 파일을 로드할 경우 문제가 발생할 수 있습니다.
이 경우 fs.readFileSync()를 사용하여 파일을 읽고, WebAssembly.instantiate()를 직접 호출하면 됩니다.

const fs = require("fs");

const wasmBuffer = fs.readFileSync("module.wasm");

WebAssembly.instantiate(wasmBuffer, {}).then(result => {
    console.log(result.instance.exports);
});

(3) 추가 고려 사항
• WASM 관련 플래그: 기본적으로 WASM은 활성화되어 있지만, 특정 환경에서 --experimental-wasm-bigint 등의 플래그가 필요할 수 있습니다.
• Node.js 환경에서 WASM 사용: Electron의 메인 프로세스에서 WASM을 사용할 경우, WebAssembly.instantiate()를 직접 사용해야 합니다.

결론
• Cordova: 최신 Android WebView(Chromium)에서는 WASM이 동작하지만, 파일 로딩 방식과 CSP 설정을 조정해야 할 수도 있음.
• Electron: Chromium 기반이므로 WASM이 기본적으로 동작하며, 로컬 파일 로딩 시 fs.readFileSync()를 활용 가능.

Cordova와 Electron 환경에 맞게 로딩 방식을 조정하면 원활하게 WebAssembly를 사용할 수 있습니다!