Web View在原生应用上支持Web apps。
与Capacitor集成的应用程序将被自动提供Web View。
对于Cordova,Ionic维护一个Web View插件。使用Ionic CLI时默认提供该插件。
什么是Web View?
ionic应用程序是使用Web技术构建的,并使用Web Views呈现,Web Views是全屏且功能强大的Web浏览器。
现代Web View为硬件功能(例如相机,传感器,GPS,扬声器和蓝牙)提供了许多内置的HTML5 API,但有时也可能需要访问特定于平台的硬件API。 在Ionic应用中,通常可以使用公开JavaScript API的原生插件,通过桥接层访问硬件API。
Ionic Web View插件专门用于现代JavaScript应用程序。 对于iOS和Android,始终在本地设备(如手机)上运行的优化的HTTP服务器, 使用http://协议托管应用文件。
跨域资源共享(CORS Cross-Origin Resource Sharing )
Web View强制执行CORS,因此外部服务正确处理跨域请求很重要。 有关在Ionic应用程序中处理CORS的信息,请参阅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插件:@ionic-native/ionic-webview。
实现
iOS: WKWebView
Android: Web View for Android