Question

我必须为CEF-Browser环境开发一个webapp。没有可用的HTTP服务器，所有内容都将通过file：// protocol提供。

现在开发Web应用程序时，人们不会使用像react / vue这样的框架来处理前端。这些标准的webpack构建脚本构建了一个只能通过HTTP服务的捆绑包。

是否可以将webpacks build bundle配置为在file：//上工作？还是有另一种方法可以通过file：//？

使用react或vue

Answer 1

我建议更仔细地阅读CEF wiki。您对https://bitbucket.org/chromiumembedded/cef/wiki/GeneralUsage.md#markdown-header-request-handling

特别感兴趣

简而言之：

您可以注册自定义方案处理程序，通过http +自定义假域提供资源。
如果您愿意，您可以在zip中打包资源，或者将它们保留在文件系统中（但在这种情况下，您可以预期一些有趣的用户可以编辑您的文件，然后将未发送的错误报告回来给你）。
已完成的重要助手（但您可以在需要时自行编写。）
你可以...许多其他事情。

“文件”方案的主要内容更受限制，例如您无法执行XHR请求。但对于自定义处理程序，您可以即使动态加载器出于某种原因使用XHR而不是基于DOM的加载，它也可以在http 上使用，而不需要触摸网络。

cefclient本身也使用自定义方案。在菜单中检查测试的网址 - ＆gt;其他... ：）

PS：很抱歉，我的回答没有直接回答你的问题。但是，CEF中的自定义资源处理是如此常见，我应该说。

Answer 2

fddima是对的 - 您不需要配置您的webpack（虽然理论上可行）。相反，您可以在CEF中使用自定义方案处理程序。我在工作中使用了角度。

我写了blog post关于如何通过CEF中的'文件'协议提供Web应用程序。

您想要添加的是您的方案处理程序及其工厂：

using System;
using System.IO;
using CefSharp;

namespace MyProject.CustomProtocol
{
    public class CustomProtocolSchemeHandler : ResourceHandler
    {
        // Specifies where you bundled app resides.
        // Basically path to your index.html
        private string frontendFolderPath;

        public CustomProtocolSchemeHandler()
        {
            frontendFolderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "./bundle/");
        }

        // Process request and craft response.
        public override bool ProcessRequestAsync(IRequest request, ICallback callback)
        {
            var uri = new Uri(request.Url);
            var fileName = uri.AbsolutePath;

            var requestedFilePath = frontendFolderPath + fileName;

            if (File.Exists(requestedFilePath))
            {
                byte[] bytes = File.ReadAllBytes(requestedFilePath);
                Stream = new MemoryStream(bytes);

                var fileExtension = Path.GetExtension(fileName);
                MimeType = GetMimeType(fileExtension);

                callback.Continue();
                return true;
            }

            callback.Dispose();
            return false;
        }
    }

    public class CustomProtocolSchemeHandlerFactory : ISchemeHandlerFactory
    {
        public const string SchemeName = "customFileProtocol";

        public IResourceHandler Create(IBrowser browser, IFrame frame, string schemeName, IRequest request)
        {
            return new CustomProtocolSchemeHandler();
        }
    }
}

然后在调用之前注册 Cef.Initialize：

var settings = new CefSettings
{
  BrowserSubprocessPath = GetCefExecutablePath()
};

settings.RegisterScheme(new CefCustomScheme
{
  SchemeName = CustomProtocolSchemeHandlerFactory.SchemeName,
  SchemeHandlerFactory = new CustomProtocolSchemeHandlerFactory()
});

为文件配置Webpack构建：//在CEF中使用

2 个答案: