Web View

Web View 为原生设备上的 Web 应用提供动力。

对于集成了 Capacitor 的应用，Web View 会自动提供。

对于 Cordova，Ionic 维护了一个 Web View 插件。使用 Ionic CLI 时默认会提供该插件。

什么是 Web View？

Ionic 应用使用 Web 技术构建，并通过 Web View 进行渲染，Web View 是一个全屏且功能完备的 Web 浏览器。

现代 Web View 提供了许多内置的 HTML5 API，用于访问摄像头、传感器、GPS、扬声器和蓝牙等硬件功能，但有时也可能需要访问特定平台的硬件 API。在 Ionic 应用中，硬件 API 可以通过桥接层访问，通常使用暴露 JavaScript API 的原生插件。

Ionic Web View 插件专门针对现代 JavaScript 应用进行了优化。对于 iOS 和 Android，应用文件始终使用 http:// 协议托管，该协议由运行在本地设备上的优化 HTTP 服务器提供。

CORS

Web View 强制执行 CORS，因此外部服务正确处理跨域请求非常重要。请参阅 CORS 常见问题了解有关在 Ionic 应用中处理 CORS 的信息。

文件协议

Capacitor 和 Cordova 应用托管在本地 HTTP 服务器上，并使用 http:// 协议提供服务。然而，某些插件会尝试通过 file:// 协议访问设备文件。为了避免 http:// 和 file:// 之间的兼容问题，设备文件的路径必须重写以使用本地 HTTP 服务器。例如，file:///path/to/device/file 必须在渲染到应用之前重写为 http://<host>:<port>/<prefix>/path/to/device/file。

对于 Capacitor 应用，可以这样转换文件 URI：

import { Capacitor } from '@capacitor/core';

Capacitor.convertFileSrc(filePath);

对于 Cordova 应用，Ionic Web View 插件 提供了一个用于转换文件 URI 的工具函数：window.Ionic.WebView.convertFileSrc()。还有一个对应的 Ionic Native 插件：@awesome-cordova-plugins/ionic-webview。

实现

• iOS：WKWebView
• Android：Android WebView