为CEF配置file://使用的Webpack构建

Question

我必须开发一个适用于CEF-Browser环境的Webapp。没有可用的HTTP服务器，所有内容都将通过file://协议提供。

现在开发Webapp时，前端很难绕开像react/vue这样的框架。这些框架的标准webpack构建脚本生成的bundle只能在HTTP上运行。

是否可以配置webpack的构建包以在file://上工作，或者有其他方法可以通过file://使用react或vue？

- xDreamCoding

Answer 1

我建议仔细阅读CEF Wiki。您特别感兴趣的是https://bitbucket.org/chromiumembedded/cef/wiki/GeneralUsage.md#markdown-header-request-handling

简而言之：

• 您可以注册自定义模式处理程序以通过http+自定义虚拟域名提供资源。

• 您可以例如将资源打包成zip，或者将它们保留在文件系统中（但在这种情况下，您可以预期某些有趣的用户可能会编辑您的文件，然后向您反馈不存在的错误）。

• 重要的辅助功能已经完成（但如果需要，您可以编写自己的辅助功能）。

• 您可以......做很多其他事情。

主要问题是“file”模式更受限制，例如您不能进行XHR请求。但对于自定义处理程序，则可以这样做。即使动态加载器由于某种原因使用XHR而不是基于DOM的加载，也将再次像在http上一样工作，而无需触及网络。

cefclient本身也使用自定义模式。检查菜单中Tests->Other...的URL。 :)

PS：很抱歉我的回答没有直接回答您的问题。但是，CEF中的自定义资源处理非常普遍，我只需要说一下。

- Dmitry Azaraev

Answer 2

fddima是正确的-你不需要配置webpack(尽管在理论上是可能的)。相反，你可以在CEF中使用自定义方案处理程序。我在工作中让它与angular一起工作。

我写了一篇博客文章，介绍如何通过'file'协议在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之前，需要先注册它：

注意：请保留html标签。

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

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

- bartosz.baczek