Skip to main content

Web View

Web 视图支持原生设备上的 Web 应用。

🌐 Web Views power web apps on native devices.

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

🌐 The Web View is automatically provided for apps integrated with Capacitor.

对于 Cordova，Ionic 保持一个 Web 视图插件。使用 Ionic CLI 时，默认提供该插件。

什么是 Web View？​

🌐 What is a Web View?

Ionic 应用是使用 web 技术 构建的，并通过网页视图渲染，网页视图是一个全屏且功能完整的网页浏览器。

🌐 Ionic apps are built using web technologies and are rendered using Web Views, which are a full screen and full-powered web browser.

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

Diagram illustrating the architecture of a Web View in Ionic apps, showing the bridge between native app components and web components.

Ionic Web View 插件专为现代 JavaScript 应用设计。对于 iOS 和 Android，应用文件总是使用 http:// 协议通过在本地设备上运行的优化 HTTP 服务器进行托管。

🌐 The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the http:// protocol with an optimized HTTP server that runs on the local device.

跨域资源共享​

🌐 CORS

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

🌐 Web Views enforce CORS, so it's important that external services properly handle cross-origin requests. See the CORS FAQs for information on dealing with CORS in Ionic apps.

文件协议​

🌐 File Protocol

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

对于 Capacitor 应用，转换文件 URI，如下所示：

🌐 For Capacitor apps, convert file URIs like so:

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

Capacitor.convertFileSrc(filePath);

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

🌐 For Cordova apps, the Ionic Web View plugin provides a utility function for converting File URIs: window.Ionic.WebView.convertFileSrc(). There is also a corresponding Ionic Native plugin: @awesome-cordova-plugins/ionic-webview.

实现​

🌐 Implementations

目录