アプリのフロントを WebView で作る際、ローカルのHTMLを読み込ませると、import が使えなかったりいろんな制限で困る。VirtualHostNameToFolderMapping にて http://file/ から参照できるように WebView2 を設定して回避するサンプル。
ただ、ローカル制限ありの普通のパターンに比べて、起動が少し遅くなる気はする。
using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;
using System.Diagnostics;
using System.Security.Cryptography;
using System.Text;
namespace Browser {
public partial class Browser:Form {
public WebView2 view = new ();
public Browser() {
InitializeComponent();
ShowIcon = false;
Resize += (s,e)=>view.Size=ClientSize;
Load += (s,e)=>{
view.Size=ClientSize;
view.EnsureCoreWebView2Async(null);
view.CoreWebView2InitializationCompleted+=(s,e) => Ready();
Controls.Add(view);
};
}
async Task Ready(){
var core = view.CoreWebView2;
var s = Directory.GetCurrentDirectory();
//ローカル制限を回避、import使用可
core.SetVirtualHostNameToFolderMapping("file",s,CoreWebView2HostResourceAccessKind.Allow);
core.AddHostObjectToScript("Bridge",new HostObject(this));
await core.AddScriptToExecuteOnDocumentCreatedAsync(@"(()=>{
//お好みでブラウザ側の初期化コマンド
console.log('CoreWebView2InitializationCompleted')
window.browser = chrome.webview.hostObjects.sync.Bridge
})();");
view.Source=new Uri("http://file/index.html");
}
}
public class HostObject {
private Browser browser;
public HostObject(Browser form) {browser=form;}
public void openDevToolsWindow() {browser.view.CoreWebView2.OpenDevToolsWindow();}
public string title {get{ return browser.Text; } set{ browser.Text=value; }}
public string currentDirectory {get{ return Directory.GetCurrentDirectory(); }}
//・・・・
public string hash(string type,string input) {
HashAlgorithm a;
switch(type.ToUpper().TrimEnd('?')) {
case "MD5" : a=MD5.Create(); break;
default : a=SHA256.Create(); break;
}
byte[] data = a.ComputeHash(Encoding.UTF8.GetBytes(input));
a.Clear();
if(type.EndsWith('?')) {
return Convert.ToBase64String(data).TrimEnd('=').Replace('+','-').Replace('/','_');
} else {
var builder = new StringBuilder();
for(int i = 0; i<data.Length; i++) builder.Append(data[i].ToString("x2"));
return builder.ToString();
}
}
}
}
index.html
<!DOCTYPE html>
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="module">
import {View} from './Vanilla.js'
document.addEventListener("DOMContentLoaded",e=>{
console.log(location)
browser.openDevToolsWindow()
browser.title = browser.currentDirectory
var s = browser.hash('sha256?',browser.currentDirectory)
console.log(s)
//・・・・
})
class Dummy extends View{
constructor(){
super()
//・・・・
}
}
</script>
</head></html>