jsモジュールが使えるタイプのローカルWebアプリ #JavaScript

アプリのフロントを 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>