【C#】WebViewを活用する

・WebViewを使うことで、デスクトップアプリ内にWEBサイトを表示したり、ネイティブアプリ側の処理を呼び出すことが可能となる。

・Javascriptだけで実装できない機能も実現することができるようになる。

次のような機能はjs単独では実現できない。

・Javascriptからexeを起動することはできない。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1031964155

・ページを印刷した際に、印刷したのかキャンセルしたのかを把握することはできない。
https://teratail.com/questions/100063

・WebViewを使うことで、こういったWEBページ単独で実装できないことも、実現できるようになる。

C#でWebViewを使う方法

※WebBrowserコントロールでなく、WebView2を使うよう注意！
　WebView2はchromeのベースとなっているchromiumで動作する。

基本

・Nuget経由で、WebView2という公式パッケージを追加インストールできる。これを使う。

・インストール後に、フォームデザイナにこのコントロールを配置する。

・配置したコントロールのSourseプロパティに表示したいサイトのURLを設定することで、指定のページが表示される。

デスクトップアプリとWEBページ間の通信方法

・デスクトップアプリ　→　WEBページの実装方法

// C#側からalertメソッドを呼び出している例。このようにWebページ側のメソッドを呼ぶのが一般的。
webViewコントロール.CoreWebView2.ExecuteScriptAsync("alert('aaa')");

・WEBページ　→　デスクトップアプリの実装方法

// 【C#コード】
// C#側Webページのjsから呼び出せるようにしておく
public Form1()
{
    InitializeComponent();
    InitializeAsync();
}
// jsからメッセージ受信できるようイベントハンドラを設定
async void InitializeAsync()
{
    await webViewコントロール.EnsureCoreWebView2Async(null);
    webViewコントロール.CoreWebView2.WebMessageReceived += MessageReceived;
}
// jsからメッセージを受信した時に実行される処理
private void MessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs args)
{
    String text = args.TryGetWebMessageAsString();
    MessageBox.Show(text);
}
// 【Javascriptコード】
// js側からは、以下のようにメッセージ送信することが可能。
 window.chrome.webview.postMessage("jsからデスクトップアプリ側へメッセージ送信するよ！");
// js側でwebviewで表示しているかの判定はこのように行う。
if(window.chrome.webview){
    window.chrome.webview.postMessage(document.title);
}

ドキュメント

・WebView2概要（公式）
https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/

・WEbView2を使う（公式）
https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/get-started/winforms

・jsとの連携
https://web.biz-prog.net/readme/webview_new3.html

・基本操作
https://web.biz-prog.net/readme/webview_new2.html