基于Android平台GeckoView加载本地Web应用的技术问询

一、从assets目录加载带资源的本地网页 #

GeckoSession.Loader.data()仅适合加载单段HTML内容，无法处理关联资源。正确做法是直接通过asset URI加载网页：

• 将HTML、CSS、JS、图片等资源全部放在Android项目的assets目录下（可创建子目录归类，比如assets/css/、assets/js/）
• 使用session.loadUri("asset:///index.html")加载主页面，网页内的资源引用直接用相对路径（比如<link rel="stylesheet" href="css/style.css">）
• 确保GeckoSettings中开启了allowJavascript和allowFileAccess（默认开启，但建议显式配置）

二、网页与Kotlin原生双向通信 #

推荐使用GeckoView的WebExtension Port Messaging方案，解决你之前遇到的隔离问题：

1. 配置WebExtension #

• 在assets目录下创建扩展目录（比如assets/my_extension/），包含manifest.json和所需脚本：

  {
    "manifest_version": 2,
    "name": "NativeMessaging",
    "version": "1.0",
    "content_scripts": [
      {
        "matches": ["asset:///*"],
        "js": ["content.js"]
      }
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "permissions": ["nativeMessaging"]
  }
  

• 解决CSP脚本加载错误：如果之前出现「内容安全策略：页面设置阻止加载内联资源（script-src）」的报错，要么把所有JS代码移到外部.js文件（推荐），要么在manifest.json中添加CSP字段：

  "content_security_policy": "script-src 'self' 'unsafe-inline'; object-src 'self'"
  

2. 双向通信实现 #

• 网页侧（content.js）：通过扩展端口与原生通信

  const port = browser.runtime.connect();
  // 向原生发送消息
  port.postMessage({ type: "WEB_TO_NATIVE", data: "Hello from web" });
  // 接收原生消息
  port.onMessage.addListener((msg) => {
    console.log("Received from native:", msg);
    // 处理消息，比如更新网页内容
  });
  

• Kotlin原生侧：注册ExtensionDelegate监听端口

  val runtime = GeckoRuntime.create(context)
  val session = GeckoSession()
  session.open(runtime)
  
  // 加载扩展
  val extension = runtime.webExtensionManager.loadBuiltIn("resource://android/assets/my_extension/")
  extension?.let { ext ->
    ext.registerExtensionDelegate(object : WebExtension.Delegate {
      override fun onPortConnect(
        webExtension: WebExtension,
        port: Port,
        source: Port.Source
      ) {
        // 接收网页消息
        port.setDelegate(object : Port.Delegate {
          override fun onMessage(port: Port, message: Any) {
            // 处理网页消息，比如执行原生逻辑
            val response = mapOf("type" to "NATIVE_TO_WEB", "data" to "Hello from Kotlin")
            port.postMessage(response)
          }
        })
      }
    })
  }
  

三、处理网页跨域Ajax请求 #

本地asset网页直接发起跨域Ajax会被同源策略阻止，有两种解决方案：

方案1：通过WebExtension转发请求 #

利用WebExtension的跨域权限，在background脚本中处理请求：

// background.js
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "AJAX_REQUEST") {
    fetch(request.url, request.options)
      .then(res => res.json())
      .then(data => sendResponse(data))
      .catch(err => sendResponse({ error: err.message }));
    return true; // 告知异步响应
  }
});

// content.js（网页侧）
function sendAjax(url, options) {
  return browser.runtime.sendMessage({
    type: "AJAX_REQUEST",
    url: url,
    options: options
  });
}
// 使用示例
sendAjax("https://example.com/api/data", { method: "GET" })
  .then(data => console.log("Ajax result:", data));

方案2：原生拦截请求并处理 #

通过GeckoSession.RequestDelegate拦截网页的请求，由原生执行网络请求后返回结果：

session.setRequestDelegate(object : GeckoSession.RequestDelegate {
  override fun onLoadRequest(
    session: GeckoSession,
    request: GeckoSession.RequestDelegate.LoadRequest
  ): GeckoSession.RequestDelegate.LoadRequestResult? {
    if (request.uri.startsWith("native://api/")) {
      // 解析请求参数，执行原生网络请求
      val apiUrl = request.uri.replace("native://api/", "https://example.com/api/")
      // 用OkHttp等库发送请求，然后将结果返回给网页
      val responseBody = "{\"data\": \"Native fetched result\"}"
      val loader = GeckoSession.Loader.data(
        responseBody,
        "application/json",
        "UTF-8"
      )
      session.load(loader)
      return GeckoSession.RequestDelegate.LoadRequestResult.CANCEL
    }
    return null // 其他请求正常处理
  }
});

网页侧只需将Ajax请求的URL改为自定义协议（比如native://api/data）即可触发原生拦截。

内容的提问来源于stack exchange，提问作者Fedir Tsapana