ionic3 从UIWebView升级到WKWebView（翻译）

在iOS中，现在已经有两个网页浏览器，UIWebView和WKWebView。Ionic应用程序已经在历史版本中使用UIWebView，但之后不再使用。 Ionic现在在构建iOS时默认使用WKWebview。

我们坚信，WKWebview是任何应用程序的最佳选择，因为它具有对旧版本的Webview（UIWebView）的许多改进。 这些功能包括：

• JIT将JS代码转换为机器代码，运行速度更快
• 改善了渲染性能
• 减少内存消耗
• 更好地遵守网络标准
• 可靠的滚动事件（对虚拟列表很重要）

首先升级Ionic cli

WKWebView 插件需要最新的Ionic CLI才能正常工作。
如果你的ionic cli低于3.x,那么先升级到3.x以上。

npm uninstall -g ionicnpm install -g ionic

CORS（跨域资源共享）
UIWebView从来没有执行CORS，但WKWebView有。
不幸的是，没有API禁用此功能，因此您需要确保您的应用程序使用的任何远程API，正确实现CORS。 CORS MDN Docs

CORS 清单:
Whitelist Origin: http://localhost:8080
Whitelist Methods
Whitelist Header
CORS preflight request (OPTION)

重写 file://
如果您正在使用本地文件（文本文件，图像，视频），则需要确保文件的路径在其前面没有file：//。
例如:

file:///usr/home/dev/app/index.html

应该重写为:

/usr/home/dev/app/index.html

从Ionic 3.2.0开始添加了自动重写file：// URLs的内置函数：

import { normalizeURL } from 'ionic-angular';let path = cordova.file.dataDirectory;console.log('Original: ' + path);path = normalizeURL(path);console.log('Fixed: ' + path);

输出:

Original: file:///Users/manuelmartinez-almeida/Library/Developer/CoreSimulator/Devices/94646EFE-DE04-46BD-AFC1-B4F312BA06CB/data/Containers/Bundle/Application/6AD1018C-6836-4BF9-83DA-4430392D10D5/ionic-wk-test.app/www/index.htmlFixed: /Users/manuelmartinez-almeida/Library/Developer/CoreSimulator/Devices/94646EFE-DE04-46BD-AFC1-B4F312BA06CB/data/Containers/Bundle/Application/6AD1018C-6836-4BF9-83DA-4430392D10D5/ionic-wk-test.app/www/index.html

或者在模板中使用:

<img [src]="imagePath" />takePhoto() {  this.camera.getPicture().then((img)=>{    this.imagePath = normalizeURL(img);  })}

注意：Core cordova插件还允许您通过cdvfile：//协议引用文件。 不幸的是，我们无法重写此路径，因为它是以本机代码解析的东西。 我们建议，当您引用文件时，请使用完整路径进行重写，而不是cdvfile：//。

升级到WKWebView (仅UIWebView 用户)

ionic cordova plugin add cordova-plugin-ionic-webview –save

详请: https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions

降级到UIWebView

正如我们之前所说，我们强烈建议开发人员升级到WKWebView，但如果您仍然需要使用UIWebView，那么降级的步骤就是：
方案1：强制使用UIWebView
您可以强制cordova使用默认引擎（UIWebView）通过显式地告诉所以：

<preference name =“CordovaWebViewEngine”value =“CDVUIWebViewEngine”/>

方案2：卸载Ionic的WebView插件

$ ion cordova插件删除cordova cordova-plugin-ionic-webview --save$ rm -rf platforms/$ rm -rf plugins /$ ion cordova build ios

常见问题

App数据不会复制

我刚从UIWebView迁移到WKWebView，存储数据丢失。

由于WKWebView本质上是一个新的浏览器，所以在LocalStorage或IndexDB中可以拥有的任何数据都不会被复制。 在这种情况下，建议将数据迁移到本机存储机制SQLite，以确保数据仍然可用。

我们强烈建议您使用ionic-storage，它解决了持久存储的大部分问题。

app无法加载，白屏

代码没有任何报错信息，但是仍然黑屏

大多数时候这个问题来自于Cordova没有正确安装

确保Xcode已经关闭
清楚安装:

rm -rf platformsrm -rf plugins

重新添加平台

ionic cordova platform add ios

确保允许localhost:

<allow-navigation href="http://localhost:8080/*"/>

确保WKWebView 是默认引擎:

<feature name="CDVWKWebViewEngine">  <param name="ios-package" value="CDVWKWebViewEngine" /></feature><preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

构建ionic ios

ionic cordova build ios

打开Xcode 重试.

Malloc: *** error for object 0x1700af180: pointer being freed was not allocated

它看起来像是一个Safari错误，因此只有当您使用Safari调试Webview时才会出现。 在Safari中：Develop - > Your_Device_Name取消选中“自动显示JSContexts的Web检查器”。

这应该可以解决你的问题。

本地资源无法加载

一些<img>/<video>/<audio>无法加载.

确保资源的URL不以file：//开头。 如果是这样，请使用normalizeURL（）重写路径：

import { normalizeURL} from 'ionic-angular';imageSRC = normalizeURL(url);

配置AVAudioSession不影响WKWebView

WKWebView与您的应用程序分开运行。 它可能与您的应用程序的AudioSession分离了自己的AudioSession。 一个可行的解决方法是允许您的应用程序的AudioSession与其他人混合：

[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayAndRecord                                  withOptions:AVAudioSessionCategoryOptionMixWithOthers                                       error:&error];

幸运的是，Ionic的WebView可以通过将AudioCanMix cordova首选项设置为true来为您做到这一点。

<preference name =“AudioCanMix”value =“true”/>

XHR请求不起作用

我正在尝试使用XHR（或fetch）调用一些远程服务，但它不工作。

如前所述，WKWebView强制执行CORS。 您将需要将http：// localhost：8080列入“Origin”and/or 正确实现CORS。

无法实现CORS

我不控制后端，所以我不能添加CORS，如何使它与WKWebView一起工作？

如果在服务器中不可能实现或配置CORS，则有一个本机插件可以使用本地代码“代理”HTTP请求，因此可以完全绕过CORS：

在这里阅读更多：cordova-plugin-http。