출시되지 않은 향후 버전의 WebView에서 앱을 테스트할 수 있습니다. 지금 시작하기

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

JavaScript 및 WebAssembly 실행

JavaScript 평가

Jetpack 라이브러리 JavaScriptEngine은 애플리케이션이 WebView 인스턴스를 만들지 않고 JavaScript 코드를 평가할 수 있습니다.

대화형이 아닌 JavaScript 평가가 필요한 애플리케이션의 경우 JavaScriptEngine 라이브러리를 사용하면 다음과 같은 이점이 있습니다.

WebView 인스턴스를 할당할 필요가 없으므로 리소스 소비가 줄어듭니다.
서비스 (WorkManager 작업)에서 실행할 수 있습니다.
오버헤드가 낮은 여러 개의 격리된 환경을 제공하므로 애플리케이션에서 여러 JavaScript 스니펫을 동시에 실행할 수 있습니다.
API 호출을 사용하여 대량의 데이터를 전달하는 기능

기본 사용법

시작하려면 JavaScriptSandbox의 인스턴스를 만듭니다. 이것은 외부 자바스크립트 엔진에 연결할 수 있습니다

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
               JavaScriptSandbox.createConnectedInstanceAsync(context);

샌드박스의 수명 주기를 샌드박스의 수명 주기와 일치시키는 것이 JavaScript 평가가 필요한 구성 요소입니다.

예를 들어 샌드박스를 호스팅하는 구성요소는 Activity 또는 Service일 수 있습니다. 단일 Service를 사용하여 JavaScript 평가를 캡슐화할 수 있습니다. 설계할 수 있습니다

할당 비용이 상당히 높으므로 JavaScriptSandbox 인스턴스를 유지합니다. 애플리케이션당 하나의 JavaScriptSandbox 인스턴스만 허용됩니다. 애플리케이션이 두 번째 JavaScriptSandbox 인스턴스를 할당하려고 하면 IllegalStateException이 발생합니다. 하지만 여러 개의 실행 환경이 필요한 경우 여러 JavaScriptIsolate 인스턴스를 할당할 수 있습니다.

더 이상 사용하지 않으면 샌드박스 인스턴스를 닫아 리소스를 확보합니다. JavaScriptSandbox 인스턴스는 간단한 차단 사용 사례에 try-with-resources 사용을 허용하는 AutoCloseable 인터페이스를 구현합니다. 또는 JavaScriptSandbox 인스턴스 수명 주기를 다음에서 관리해야 합니다. 호스팅 구성요소로 이동하여 액티비티의 onStop() 콜백에서 닫거나 서비스(onDestroy()) 동안:

jsSandbox.close();

JavaScriptIsolate 인스턴스는 실행을 위한 컨텍스트를 나타냅니다. JavaScript 코드 필요한 경우 할당할 수 있으며, JavaScript가 본질적으로 단일 스레드이므로 서로 다른 출처의 스크립트에 약한 보안 경계를 제공하거나 동시 JavaScript 실행을 사용 설정할 수 있습니다. 동일한 인스턴스를 후속으로 호출하면 동일한 상태가 공유되므로 먼저 일부 데이터를 만든 다음 나중에 JavaScriptIsolate의 동일한 인스턴스에서 처리할 수 있습니다.

JavaScriptIsolate jsIsolate = jsSandbox.createIsolate();

close() 메서드를 호출하여 JavaScriptIsolate를 명시적으로 해제합니다. JavaScript 코드를 실행하는 격리된 인스턴스(불완전한 Future 있음)를 닫으면 IsolateTerminatedException이 발생합니다. 구현에서 JS_FEATURE_ISOLATE_TERMINATION를 지원하는 경우 이 페이지의 뒷부분에 있는 샌드박스 비정상 종료 처리 섹션에 설명된 대로 격리가 백그라운드에서 정리됩니다. 그렇지 않으면 대기 중인 모든 평가가 완료되거나 샌드박스가 닫힐 때까지 정리가 연기됩니다.

애플리케이션은 모든 스레드에서 JavaScriptIsolate 인스턴스를 만들고 액세스할 수 있습니다.

이제 애플리케이션에서 JavaScript 코드를 실행할 수 있습니다.

final String code = "function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
String result = resultFuture.get(5, TimeUnit.SECONDS);

형식이 지정된 동일한 JavaScript 스니펫:

function sum(a, b) {
    let r = a + b;
    return r.toString(); // make sure we return String instance
};

// Calculate and evaluate the expression
// NOTE: We are not in a function scope and the `return` keyword
// should not be used. The result of the evaluation is the value
// the last expression evaluates to.
sum(3, 4);

코드 스니펫은 String로 전달되고 결과는 String로 전달됩니다. evaluateJavaScriptAsync()를 호출하면 JavaScript 코드의 마지막 표현식의 평가 결과가 반환됩니다. 이 이름은 JavaScript String 유형의 속성입니다. 그렇지 않으면 라이브러리 API가 빈 값을 반환합니다. JavaScript 코드는 return 키워드를 사용하면 안 됩니다. 샌드박스가 특정 기능을 지원하는 경우 추가 반환 유형(예: String로 확인되는 Promise)이 가능할 수 있습니다.

이 라이브러리는 또한 AssetFileDescriptor 또는 ParcelFileDescriptor입니다. 자세한 내용은 evaluateJavaScriptAsync(AssetFileDescriptor) 및 evaluateJavaScriptAsync(ParcelFileDescriptor)에서 자세한 내용을 확인하세요. 이 API는 디스크 또는 앱의 파일에서 평가하는 데 더 적합합니다. 하위 디렉터리입니다.

또한 이 라이브러리는 디버깅 목적으로 사용할 수 있는 콘솔 로깅을 지원합니다. setConsoleCallback()를 사용하여 설정할 수 있습니다.

컨텍스트가 유지되므로 코드를 업로드하고 여러 번 실행할 수 있습니다. JavaScriptIsolate의 전체 기간 동안:

String jsFunction = "function sum(a, b) { let r = a + b; return r.toString(); }";
ListenableFuture<String> func = js.evaluateJavaScriptAsync(jsFunction);
String twoPlusThreeCode = "let five = sum(2, 3); five";
ListenableFuture<String> r1 = Futures.transformAsync(func,
       input -> js.evaluateJavaScriptAsync(twoPlusThreeCode)
       , executor);
String twoPlusThree = r1.get(5, TimeUnit.SECONDS);

String fourPlusFiveCode = "sum(4, parseInt(five))";
ListenableFuture<String> r2 = Futures.transformAsync(func,
       input -> js.evaluateJavaScriptAsync(fourPlusFiveCode)
       , executor);
String fourPlusFive = r2.get(5, TimeUnit.SECONDS);

물론, 변수는 영구적이므로 이전 코드를 계속 사용할 수 있습니다. 다음 코드를 추가합니다.

String defineResult = "let result = sum(11, 22);";
ListenableFuture<String> r3 = Futures.transformAsync(func,
       input -> js.evaluateJavaScriptAsync(defineResult)
       , executor);
String unused = r3.get(5, TimeUnit.SECONDS);

String obtainValue = "result";
ListenableFuture<String> r4 = Futures.transformAsync(func,
       input -> js.evaluateJavaScriptAsync(obtainValue)
       , executor);
String value = r4.get(5, TimeUnit.SECONDS);

예를 들어, 필요한 모든 객체와 JavaScript 코드를 실행하는 방법은 다음과 같습니다.

final ListenableFuture<JavaScriptSandbox> sandbox
       = JavaScriptSandbox.createConnectedInstanceAsync(this);
final ListenableFuture<JavaScriptIsolate> isolate
       = Futures.transform(sandbox,
               input -> (jsSandBox = input).createIsolate(),
               executor);
final ListenableFuture<String> js
       = Futures.transformAsync(isolate,
               isolate -> (jsIsolate = isolate).evaluateJavaScriptAsync("'PASS OK'"),
               executor);
Futures.addCallback(js,
       new FutureCallback<String>() {
           @Override
           public void onSuccess(String result) {
               text.append(result);
           }
           @Override
           public void onFailure(Throwable t) {
               text.append(t.getMessage());
           }
       },
       mainThreadExecutor);

try-with-resources를 사용하여 모든 요청이 제대로 할당되었는지 리소스가 해제되고 더 이상 사용되지 않습니다 샌드박스 결과 닫기 실패한 모든 JavaScriptIsolate 인스턴스의 대기 중인 모든 평가에서 SandboxDeadException 포함 JavaScript 평가에서 오류가 발생하면 JavaScriptException가 생성됩니다. 서브클래스 참조 를 참조하세요.

샌드박스 비정상 종료 처리

모든 JavaScript는 애플리케이션이 아닌 별도의 샌드박스 프로세스에서 실행되며 기본 프로세스입니다. 자바스크립트 코드로 인해 샌드박스 처리된 프로세스가 애플리케이션의 기본 애플리케이션이 메모리 한도를 소진하거나 변경사항의 영향을 받지 않습니다.

샌드박스 비정상 종료가 발생하면 해당 샌드박스의 모든 격리가 종료됩니다. 가장 명확한 증상은 모든 평가가 IsolateTerminatedException로 실패하기 시작한다는 것입니다. 상황에 따라 SandboxDeadException 또는 MemoryLimitExceededException와 같은 더 구체적인 예외가 발생할 수 있습니다.

개별 평가마다 비정상 종료를 처리하는 것이 항상 실용적인 것은 아닙니다. 또한 격리는 명시적으로 요청된 백그라운드 작업 또는 다른 격리의 평가로 인해 평가를 받는 경우가 많습니다 비정상 종료 를 사용하여 콜백을 첨부하여 로직 처리를 중앙 집중화할 수 있습니다. JavaScriptIsolate.addOnTerminatedCallback()

final ListenableFuture<JavaScriptSandbox> sandboxFuture =
    JavaScriptSandbox.createConnectedInstanceAsync(this);
final ListenableFuture<JavaScriptIsolate> isolateFuture =
    Futures.transform(sandboxFuture, sandbox -> {
      final IsolateStartupParameters startupParams = new IsolateStartupParameters();
      if (sandbox.isFeatureSupported(JavaScriptSandbox.JS_FEATURE_ISOLATE_MAX_HEAP_SIZE)) {
        startupParams.setMaxHeapSizeBytes(100_000_000);
      }
      return sandbox.createIsolate(startupParams);
    }, executor);
Futures.transform(isolateFuture,
    isolate -> {
      // Add a crash handler
      isolate.addOnTerminatedCallback(executor, terminationInfo -> {
        Log.e(TAG, "The isolate crashed: " + terminationInfo);
      });
      // Cause a crash (eventually)
      isolate.evaluateJavaScriptAsync("Array(1_000_000_000).fill(1)");
      return null;
    }, executor);

선택적 샌드박스 기능

기본 WebView 버전에 따라 샌드박스 구현에서 사용할 수 있는 기능 집합이 다를 수 있습니다. 따라서 각 포드에 대한 JavaScriptSandbox.isFeatureSupported(...)를 사용하여 이 기능을 구현할 수 있습니다. 중요한 것은 이러한 기능에 의존하는 메서드를 호출하기 전에 기능 상태를 확인해야 합니다.

모든 곳에서 사용할 수 없는 JavaScriptIsolate 메서드는 RequiresFeature 주석으로 주석 처리되어 코드에서 이러한 호출을 더 쉽게 찾을 수 있습니다.

매개변수 전달

JavaScriptSandbox.JS_FEATURE_EVALUATE_WITHOUT_TRANSACTION_LIMIT가 지원되는 경우 JavaScript 엔진으로 전송되는 평가 요청은 바인더 트랜잭션 한도에 의해 제한되지 않습니다. 기능이 지원되지 않는 경우 JavaScriptEngine은 바인더 트랜잭션을 통해 발생합니다. 일반 트랜잭션 크기 제한은 데이터를 전달하거나 데이터를 반환하는 모든 호출에 적용됩니다.

응답은 항상 문자열로 반환되며 JavaScriptSandbox.JS_FEATURE_EVALUATE_WITHOUT_TRANSACTION_LIMIT가 지원되지 않는 경우 바인더 트랜잭션 최대 크기 제한이 적용됩니다. 문자열이 아닌 값은 JavaScript 문자열로 명시적으로 변환해야 합니다. 그러지 않으면 빈 문자열이 반환됩니다. JS_FEATURE_PROMISE_RETURN인 경우 기능이 지원되는 경우 JavaScript 코드가 Promise를 반환할 수도 있습니다. String로 확인됩니다.

대형 바이트 배열을 JavaScriptIsolate 인스턴스에 전달하는 방법은 다음과 같습니다. provideNamedData(...) API를 사용할 수 있습니다. 이 API의 사용은 다음 사항에 의해 구속되지 않습니다. Binder 트랜잭션 한도를 제어합니다. 각 바이트 배열은 고유한 다시 사용할 수 없습니다.

if (sandbox.isFeatureSupported(JavaScriptSandbox.JS_FEATURE_PROVIDE_CONSUME_ARRAY_BUFFER)) {
    js.provideNamedData("data-1", "Hello Android!".getBytes(StandardCharsets.US_ASCII));
    final String jsCode = "android.consumeNamedDataAsArrayBuffer('data-1').then((value) => { return String.fromCharCode.apply(null, new Uint8Array(value)); });";
    ListenableFuture<String> msg = js.evaluateJavaScriptAsync(jsCode);
    String response = msg.get(5, TimeUnit.SECONDS);
}

Wasm 코드 실행

WebAssembly(Wasm) 코드는 provideNamedData(...) API를 사용하여 전달한 다음 아래와 같이 일반적인 방식으로 컴파일하고 실행할 수 있습니다.

final byte[] hello_world_wasm = {
   0x00 ,0x61 ,0x73 ,0x6d ,0x01 ,0x00 ,0x00 ,0x00 ,0x01 ,0x0a ,0x02 ,0x60 ,0x02 ,0x7f ,0x7f ,0x01,
   0x7f ,0x60 ,0x00 ,0x00 ,0x03 ,0x03 ,0x02 ,0x00 ,0x01 ,0x04 ,0x04 ,0x01 ,0x70 ,0x00 ,0x01 ,0x05,
   0x03 ,0x01 ,0x00 ,0x00 ,0x06 ,0x06 ,0x01 ,0x7f ,0x00 ,0x41 ,0x08 ,0x0b ,0x07 ,0x18 ,0x03 ,0x06,
   0x6d ,0x65 ,0x6d ,0x6f ,0x72 ,0x79 ,0x02 ,0x00 ,0x05 ,0x74 ,0x61 ,0x62 ,0x6c ,0x65 ,0x01 ,0x00,
   0x03 ,0x61 ,0x64 ,0x64 ,0x00 ,0x00 ,0x09 ,0x07 ,0x01 ,0x00 ,0x41 ,0x00 ,0x0b ,0x01 ,0x01 ,0x0a,
   0x0c ,0x02 ,0x07 ,0x00 ,0x20 ,0x00 ,0x20 ,0x01 ,0x6a ,0x0b ,0x02 ,0x00 ,0x0b,
};
final String jsCode = "(async ()=>{" +
       "const wasm = await android.consumeNamedDataAsArrayBuffer('wasm-1');" +
       "const module = await WebAssembly.compile(wasm);" +
       "const instance = WebAssembly.instance(module);" +
       "return instance.exports.add(20, 22).toString();" +
       "})()";
// Ensure that the name has not been used before.
js.provideNamedData("wasm-1", hello_world_wasm);
FluentFuture.from(js.evaluateJavaScriptAsync(jsCode))
           .transform(this::println, mainThreadExecutor)
           .catching(Throwable.class, e -> println(e.getMessage()), mainThreadExecutor);
}

JavaScriptIsolate 분리

모든 JavaScriptIsolate 인스턴스는 서로 독립적이며 다음 작업을 수행하지 않습니다. 무엇이든 공유할 수 있습니다. 다음 스니펫의 결과는

Hi from AAA!5

다음 URL은

Uncaught Reference Error: a is not defined

'jsTwo' 인스턴스는 'jsOne'에서 생성된 객체를 볼 수 없기 때문입니다.

JavaScriptIsolate jsOne = engine.obtainJavaScriptIsolate();
String jsCodeOne = "let x = 5; function a() { return 'Hi from AAA!'; } a() + x";
JavaScriptIsolate jsTwo = engine.obtainJavaScriptIsolate();
String jsCodeTwo = "a() + x";
FluentFuture.from(jsOne.evaluateJavaScriptAsync(jsCodeOne))
       .transform(this::println, mainThreadExecutor)
       .catching(Throwable.class, e -> println(e.getMessage()), mainThreadExecutor);

FluentFuture.from(jsTwo.evaluateJavaScriptAsync(jsCodeTwo))
       .transform(this::println, mainThreadExecutor)
       .catching(Throwable.class, e -> println(e.getMessage()), mainThreadExecutor);

Kotlin 지원

이 Jetpack 라이브러리를 Kotlin 코루틴과 함께 사용하려면 kotlinx-coroutines-guava에 종속 항목을 추가합니다. 이렇게 하면 ListenableFuture와 통합할 수 있습니다.

dependencies {
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-guava:1.6.0"
}

이제 아래와 같이 코루틴 범위에서 Jetpack 라이브러리 API를 호출할 수 있습니다.

// Launch a coroutine
lifecycleScope.launch {
    val jsSandbox = JavaScriptSandbox
            .createConnectedInstanceAsync(applicationContext)
            .await()
    val jsIsolate = jsSandbox.createIsolate()
    val resultFuture = jsIsolate.evaluateJavaScriptAsync("PASS")

    // Await the result
    textBox.text = resultFuture.await()
    // Or add a callback
    Futures.addCallback<String>(
        resultFuture, object : FutureCallback<String?> {
            override fun onSuccess(result: String?) {
                textBox.text = result
            }
            override fun onFailure(t: Throwable) {
                // Handle errors
            }
        },
        mainExecutor
    )
}

구성 매개변수

격리된 환경 인스턴스를 요청할 때 구성을 조정할 수 있습니다. 구성을 조정하려면 IsolateStartupParameters 인스턴스를 JavaScriptSandbox.createIsolate(...)에 전달합니다.

현재 매개변수를 사용하면 최대 힙 크기와 최대 크기를 지정할 수 있습니다. 오류를 확인할 수 있습니다.