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 ionic
npm 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.html

Fixed: /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 platforms
rm -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。