3D Client Programmer

1.웹뷰2의 환경 설정 및 기본 샘플 빌드 방법

• https://learn.microsoft.com/ko-kr/microsoft-edge/webview2/get-started/win32

2.위 샘플에서 WebView2에 대한 소스 코드

// <-- WebView2 sample code starts here -->
// Step 3 - Create a single WebView within the parent window
// Locate the browser and set up the environment for WebView
CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT 
        {
            // Create a CoreWebView2Controller and 
            // get the associated CoreWebView2 whose parent is the main window hWnd
            env->CreateCoreWebView2Controller(
                hWnd, 
                Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                [hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT 
                {
                    if (controller != nullptr) 
                    {
                        webviewController = controller;
                        webviewController->get_CoreWebView2(&webview);
                    }
                    
                    // Add a few settings for the webview
                    // The demo step is redundant since the values are the default settings
                    wil::com_ptr<ICoreWebView2Settings> settings;
                    webview->get_Settings(&settings);
                    settings->put_IsScriptEnabled(TRUE);
                    settings->put_AreDefaultScriptDialogsEnabled(TRUE);
                    settings->put_IsWebMessageEnabled(TRUE);
                    
                    // Resize WebView to fit the bounds of the parent window
                    RECT bounds;
                    GetClientRect(hWnd, &bounds);
                    webviewController->put_Bounds(bounds);

                    // Schedule an async task to navigate to Bing
                    webview->Navigate(L"https://www.bing.com/");

                    return S_OK;
                }).Get());
            return S_OK;
        }).Get());

WebView2의 코드는 Callback 기반으로 동작한다.

• 웹뷰2를 유저가 설정한 옵션에 맞게 생성한다
  • CreateCoreWebView2EnvironmentWithOptions
    • https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-1.0.2478.35#createcorewebview2environmentwithoptions
  • Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>
    • 결과 값으로 들어오는 env 를 가지고 controller를 생성한다
      • env->CreateCoreWebView2Controller
  • CoreWebView2Controller를 생성하고 부모가 기본 창 hWnd인 연결된 ICoreWebView2를 가져온다
  • ICoreWebView2를 이용하여 웹뷰의 크기와 url을 입력할 수 있다
  • 위에 코드로 웹뷰2에 www.bing.com 사이트가 뜨는 것 까지는 동작이 된다.

// Step 4 - Navigation events
// register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
EventRegistrationToken token;
webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT 
    {
        wil::unique_cotaskmem_string uri;
        args->get_Uri(&uri);
        std::wstring source(uri.get());
        if (source.substr(0, 5) != L"https") 
        {
            args->put_Cancel(true);
        }
        return S_OK;
    }).Get(), &token);

• Navigate할 때 이벤트를 등록할 수 있다
• 위에 코드는 Navigation을 시작할 때 uri가 https 가 아니면 사이트를 열지 않겠다는 이벤트를 등록한다

// Step 5 - Scripting
// Schedule an async task to add initialization script that freezes the Object object
webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
// Schedule an async task to get the document URL
webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
    [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT 
    {
        LPCWSTR URL = resultObjectAsJson;
        //doSomethingWithURL(URL);
        return S_OK;
    }).Get());

• WebView2 컨트롤에 JavaScript 코드를 삽입할 수 있다
• 삽입된 JavaScript는 JavaScript가 제거될 때까지 모든 새로운 최상위 문서와 모든 하위 프레임에 적용된다

// Step 6 - Communication between host and web content
// Set an event handler for the host to return received message back to the web content
webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT 
    {
        wil::unique_cotaskmem_string message;
        args->TryGetWebMessageAsString(&message);
        // processMessage(&message);
        webview->PostWebMessageAsString(message.get());
        return S_OK;
    }).Get(), &token);

// Schedule an async task to add initialization script that
// 1) Add an listener to print message from the host
// 2) Post document URL to the host
webview->AddScriptToExecuteOnDocumentCreated(
    L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
    L"window.chrome.webview.postMessage(window.document.URL);",
    nullptr);

• 호스트와 웹 콘텐츠의 통신도 가능하다 (postMessage)
• Web -> Host
  • WebView2 컨트롤 내에서 실행되는 웹 콘텐츠는 메서드를 통해 호스트에 게실될 수 있으며 window.chrome.webview.postMessage는 호스트에 등록된 ICoreWebView2WebMessageReceivedEventHandler 이벤트 핸들러에 의해 처리된다
• Host -> Web
  • ICoreWebView2::PostWebMessageAsString
  • ICoreWebView2::PostWebMessageAsJSON
  • 위 메서드를 통해 웹 콘텐츠에 메시지를 보낼 수 있으며 이 메시지는 리스너에 추가된 핸들러에 의해 포착된다
  • window.chrome.webview.addEventListener 이 통신 메커니즘을 사용하면 호스트에 기본 API를 실행하도록 요청하는 메시지를 전달하여 웹 콘텐츠가 기본 기능을 사용할 수 있다
• 메커니즘을 이해하기 위한 예로 WebView2에서 문서 URL을 출력하려고하면 다음 단계가 발생한다
  • 호스트는 수신된 메시지를 웹 콘텐츠로 다시 반환하기 위한 핸들러를 등록합니다.
  • 호스트는 호스트에서 메시지를 인쇄하기 위해 핸들러를 등록하는 스크립트를 웹 콘텐츠에 삽입합니다.
  • 호스트는 호스트에 URL을 게시하는 웹 콘텐츠에 스크립트를 삽입합니다.
  • 호스트의 핸들러가 트리거되어 메시지(URL)를 웹 콘텐츠에 반환합니다.
  • 웹 콘텐츠의 핸들러가 트리거되고 호스트(URL)의 메시지를 인쇄합니다.

1. WebView2 (https://learn.microsoft.com/en-us/microsoft-edge/webview2/)

2. 개발환경 세팅하기 (https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/win32)

3. API Reference (https://learn.microsoft.com/en-us/microsoft-edge/webview2/webview2-api-reference?tabs=dotnetcsharp)

4. github (https://github.com/MicrosoftEdge/WebView2Samples)

5. 참고하면 좋은 사이트
    - https://mariusbancila.ro/blog/2020/01/28/using-microsoft-edge-in-a-native-windows-desktop-app-part-1/