加载应用内的内容

您可以为您的应用提供基于网络的内容(例如 HTML、JavaScript 和 CSS),以供您静态编译到应用中,而不是通过互联网提取。

应用内的内容无需访问互联网,也不会消耗用户的带宽。如果内容是专为 WebView 设计的(也就是说,内容依赖于与原生应用通信),那么用户就不会意外地在网络浏览器中加载该内容。

但是,应用内的内容也存在一些缺点。更新基于网络的内容需要推出新的应用更新,如果用户的应用版本已过时,那么网站上的内容和您设备上应用的内容之间可能会出现内容不匹配的情况。

WebViewAssetLoader

WebViewAssetLoader 是一种灵活且高效的方式,可在 WebView 对象中加载应用内内容。此类支持以下各项:

  • 使用 HTTP(S) 网址加载内容,以与同源政策兼容。
  • 加载 JavaScript、CSS、图片和 iframe 等子资源。

WebViewAssetLoader 添加到主 activity 文件中。以下示例展示了如何从资源文件夹加载简单的 Web 内容:

Kotlin

private class LocalContentWebViewClient(private val assetLoader: WebViewAssetLoader) : WebViewClientCompat() {
    @RequiresApi(21)
    override fun shouldInterceptRequest(
        view: WebView,
        request: WebResourceRequest
    ): WebResourceResponse? {
        return assetLoader.shouldInterceptRequest(request.url)
    }

    // To support API < 21.
    override fun shouldInterceptRequest(
        view: WebView,
        url: String
    ): WebResourceResponse? {
        return assetLoader.shouldInterceptRequest(Uri.parse(url))
    }
}

Java

private static class LocalContentWebViewClient extends WebViewClientCompat {

    private final WebViewAssetLoader mAssetLoader;

    LocalContentWebViewClient(WebViewAssetLoader assetLoader) {
        mAssetLoader = assetLoader;
    }

    @Override
    @RequiresApi(21)
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     WebResourceRequest request) {
        return mAssetLoader.shouldInterceptRequest(request.getUrl());
    }

    @Override
    @SuppressWarnings("deprecation") // To support API < 21.
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     String url) {
        return mAssetLoader.shouldInterceptRequest(Uri.parse(url));
    }
}

您的应用必须配置 WebViewAssetLoader 实例以满足其需求。下一部分包含一个示例。

创建应用内素材资源和资源

WebViewAssetLoader 依赖 PathHandler 实例来加载与给定资源路径对应的资源。虽然您可以实现此接口来根据应用的需要检索资源,但 Webkit 库分别捆绑了 AssetsPathHandlerResourcesPathHandler,用于加载 Android 资源和资源。

首先,请为您的应用创建资源和资源。通常,您需要满足以下条件:

  • HTML、JavaScript 和 CSS 等文本文件属于资源。
  • 图片和其他二进制文件属于资源。

如需将基于文本的 Web 文件添加到项目,请执行以下操作:

  1. 在 Android Studio 中,右键点击 app > src > main 文件夹,然后依次选择 New > Directory
    显示 Android Studio create-directory 菜单的图片
    图 1.为您的项目创建一个资源文件夹。
  2. 将该文件夹命名为“assets”。
    显示素材资源文件夹的图片
    图 2. 为素材资源文件夹命名。
  3. 右键点击 assets 文件夹,然后依次点击 New > File。 输入 index.html,然后按 ReturnEnter 键。
  4. 重复上一步,为 stylesheet.css 创建一个空文件。
  5. 使用接下来的两个代码示例中的内容填写您创建的空文件。
```html
<!-- index.html content -->

<html>
  <head>
    <!-- Tip: Use relative URLs when referring to other in-app content to give
              your app code the flexibility to change the scheme or domain as
              necessary. -->
    <link rel="stylesheet" href="/assets/stylesheet.css">
  </head>
  <body>
    <p>This file is loaded from in-app content.</p>
    <p><img src="/res/drawable/android_robot.png" alt="Android robot" width="100"></p>
  </body>
</html>
```

```css
<!-- stylesheet.css content -->

body {
  background-color: lightblue;
}
```

如需向项目中添加基于图片的 Web 文件,请执行以下操作:

  1. Android_symbol_green_RGB.png 文件下载到本地机器。

  2. 将文件重命名为 android_robot.png

  3. 手动将文件移动到硬盘上项目的 main/res/drawable 目录中。

图 4 显示了您添加的图片以及上述代码示例中的文本在应用中呈现。

展示应用渲染输出的图片
图 4. 在应用中呈现的应用内 HTML 文件和图片文件。

如需完成该应用,请执行以下操作:

  1. 将以下代码添加到 onCreate() 方法,以注册处理程序并配置 AssetLoader

    Kotlin

    val assetLoader = WebViewAssetLoader.Builder()
                           .addPathHandler("/assets/", AssetsPathHandler(this))
                           .addPathHandler("/res/", ResourcesPathHandler(this))
                           .build()
    webView.webViewClient = LocalContentWebViewClient(assetLoader)
    

    Java

    final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
             .addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
             .addPathHandler("/res/", new WebViewAssetLoader.ResourcesPathHandler(this))
             .build();
    mWebView.setWebViewClient(new LocalContentWebViewClient(assetLoader));
    
  2. 将以下代码添加到 onCreate() 方法中,以加载内容:

    Kotlin

    webView.loadUrl("https://appassets.androidplatform.net/assets/index.html")
    

    Java

    mWebView.loadUrl("https://appassets.androidplatform.net/assets/index.html");
    

将应用内内容与您网站上的资源混合在一起

您的应用可能需要同时加载应用内内容和来自互联网的内容,例如由您网站的 CSS 设置样式的应用内 HTML 页面。WebViewAssetLoader 支持此用例。如果所有已注册的 PathHandler 实例都无法找到给定路径的资源,则 WebView 会回退到从互联网加载内容。如果您将应用内内容与您网站上的资源混合使用,请为应用内资源预留目录路径,例如 /assets//resources/。请避免将网站中的任何资源存储在这些位置。

Kotlin

val assetLoader = WebViewAssetLoader.Builder()
                        .setDomain("example.com") // Replace this with your website's domain.
                        .addPathHandler("/assets/", AssetsPathHandler(this))
                        .build()

webView.webViewClient = LocalContentWebViewClient(assetLoader)
val inAppHtmlUrl = "https://example.com/assets/index.html"
webView.loadUrl(inAppHtmlUrl)
val websiteUrl = "https://example.com/website/data.json"

// JavaScript code to fetch() content from the same origin.
val jsCode = "fetch('$websiteUrl')" +
        ".then(resp => resp.json())" +
        ".then(data => console.log(data));"

webView.evaluateJavascript(jsCode, null)

Java

final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
           .setDomain("example.com") // Replace this with your website's domain.
           .addPathHandler("/assets/", new AssetsPathHandler(this))
           .build();

mWebView.setWebViewClient(new LocalContentWebViewClient(assetLoader));
String inAppHtmlUrl = "https://example.com/assets/index.html";
mWebView.loadUrl(inAppHtmlUrl);
String websiteUrl = "https://example.com/website/data.json";

// JavaScript code to fetch() content from the same origin.
String jsCode = "fetch('" + websiteUrl + "')" +
      ".then(resp => resp.json())" +
      ".then(data => console.log(data));";

mWebView.evaluateJavascript(jsCode, null);

如需查看提取网站托管的 JSON 数据的应用内 HTML 页面示例,请参阅 GitHub 上的 WebView 演示

loadDataWithBase网址

如果您的应用只需要加载 HTML 页面,不需要拦截子资源,请考虑使用不需要应用资源的 loadDataWithBaseURL()。您可以按照以下代码示例所示使用它:

Kotlin

val html = "<html><body><p>Hello world</p></body></html>"
val baseUrl = "https://example.com/"

webView.loadDataWithBaseURL(baseUrl, html, "text/html", null, baseUrl)

Java

String html = "<html><body><p>Hello world</p></body></html>";
String baseUrl = "https://example.com/";

mWebView.loadDataWithBaseURL(baseUrl, html, "text/html", null, baseUrl);

请谨慎选择参数值。请注意以下几点:

  • baseUrl:这是加载 HTML 内容的网址。此网址必须是 HTTP(S) 网址。
  • data:您要以字符串形式显示的 HTML 内容。
  • mimeType:此参数通常必须设置为 text/html
  • encoding:当 baseUrl 是 HTTP(S) 网址时,此字段不会用到,因此可以设置为 null
  • historyUrl:此属性设置为与 baseUrl 相同的值。

我们强烈建议您使用 HTTP(S) 网址作为 baseUrl,因为这有助于确保您的应用符合同源政策。

如果您找不到适合您内容的 baseUrl,并且希望使用 loadData(),则必须使用百分号编码Base64 编码对内容进行编码。 我们强烈建议您选择 Base64 编码并使用 Android API 来以编程方式进行编码,如以下代码示例所示:

Kotlin

val encodedHtml: String = Base64.encodeToString(html.toByteArray(), Base64.NO_PADDING)

webView.loadData(encodedHtml, mimeType, "base64")

Java

String encodedHtml = Base64.encodeToString(html.getBytes(), Base64.NO_PADDING);

mWebView.loadData(encodedHtml, mimeType, "base64");

需要避免的事项

您还可以通过其他几种方式加载应用内内容,但我们强烈建议您不要使用:

  • file:// 网址和 data: 网址被视为不透明源,这意味着它们无法利用强大的 Web API,如 fetch()XMLHttpRequestloadData() 在内部使用 data: 网址,因此我们建议改用 WebViewAssetLoaderloadDataWithBaseURL()
  • 虽然 WebSettings.setAllowFileAccessFromFileURLs()WebSettings.setAllowUniversalAccessFromFileURLs() 可以解决 file:// 网址的问题,但我们建议您不要将这些网址设置为 true,因为这会导致您的应用容易受到基于文件的攻击。我们建议您在所有 API 级别中明确将这些 API 级别设置为 false,以尽可能提高安全性。
  • 出于同样的原因,我们建议您不要使用 file://android_assets/file://android_res/ 网址。AssetsHandlerResourcesHandler 类旨在直接替换。
  • 避免使用 MIXED_CONTENT_ALWAYS_ALLOW。此设置通常不是必要的,并且会降低应用的安全性。我们建议您通过与网站资源相同的架构(HTTP 或 HTTPS)加载应用内内容,并在适当情况下使用 MIXED_CONTENT_COMPATIBILITY_MODEMIXED_CONTENT_NEVER_ALLOW