在移动应用的开发过程中，使用 WebView 进行前端开发是非常常见的，而 Ionic 作为一个主流的跨平台移动开发框架，也提供了多种 WebView 引擎供用户选择。其中，cordova-plugin-ionic-wkwebview-engine 能够提供更好的性能和体验，本文将针对此 npm 包进行详细的使用教程。
一、什么是 cordova-plugin-ionic-wkwebview-engine
cordova-plugin-ionic-wkwebview-engine 是一个 Ionic 插件，它能够利用 iOS 8.0+ 上引入的 WKWebView 引擎来替代 Cordova 内置的 UIWebView 引擎，提升 WebView 的性能和稳定性。此外，cordova-plugin-ionic-wkwebview-engine 还提供了额外的功能来优化 WKWebView 的使用体验。
二、cordova-plugin-ionic-wkwebview-engine 的优点
cordova-plugin-ionic-wkwebview-engine 相对于内置的 UIWebView 引擎有以下几个优点：
- 性能更好：WKWebView 引擎能够更快地加载和渲染 JavaScript 和 CSS，使得应用的性能得到提升。
- 内存占用更低：WKWebView 引擎使用的内存比 UIWebView 引擎更低，从而降低了应用的内存占用，提升了应用的稳定性。
- 支持缓存和离线：WKWebView 引擎支持下文所述的本地缓存和离线使用，使得用户能够在没有网络的情况下仍然使用应用。
三、如何安装 cordova-plugin-ionic-wkwebview-engine
需要注意的是，当前 cordova-plugin-ionic-wkwebview-engine 只支持 iOS 平台上的使用，如果你想在 Android 上使用 WKWebView 引擎，请查看相关的 cordova 插件。
下面是使用 cordova-plugin-ionic-wkwebview-engine 的基本步骤：
- 安装 cordova-plugin-ionic-wkwebview-engine：
ionic cordova plugin add cordova-plugin-ionic-wkwebview-engine
- 删除旧的 WebView 引擎：
ionic cordova plugin rm cordova-plugin-ionic-webview
- 安装 cordova-plugin-ionic-webview-backend：
ionic cordova plugin add cordova-plugin-ionic-webview-backend
- 将你的 WebView 引擎设置为 wkwebview：
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
- 去掉 cordova-plugin-wkwebview-file-xhr 插件（如果有）：
ionic cordova plugin rm cordova-plugin-wkwebview-file-xhr
- 重新编译并部署你的项目。
四、cordova-plugin-ionic-wkwebview-engine 的高级用法
除了提供基本的 WKWebView 引擎功能以外，cordova-plugin-ionic-wkwebview-engine 还提供了一些高级的功能来优化 WebView 的体验，需要在 app.module.ts 中进行配置。
1. 设置本地缓存
可以通过配置 LocalStorageDbSize 进行本地缓存大小的设置，方式如下：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------
------ - ----------- - ---- ----------------
-----------
------------- -
-----
--
-------- -
-------------------------- -
-- ---------
------------- -
----- ---------
----- -- - ---- - -----
--------- ---------
-
--
--
---------- -----------
---------------- -
-----
--
---------- -
----------
--------- ------------- --------- ------------------
-
--
------ ----- --------- --2. 设置白名单
如果你需要在 WKWebView 中加载一些外部资源，可以通过设置 Whitelist 进行允许：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------
------ - ----------- - ---- ----------------
-----------
------------- -
-----
--
-------- -
-------------------------- -
-- -------------
-------- -
------------ -
-----------------------------------
-----------------------
-
-
--
--
---------- -----------
---------------- -
-----
--
---------- -
----------
--------- ------------- --------- ------------------
-
--
------ ----- --------- --3. 避免潜在的 cookie 问题
在 WKWebView 中，有可能存在 cookie 丢失的问题。为了避免这个问题，并且让应用能够正确管理 cookie，可以使用一个库：cordova-plugin-ionic-native-transitions，具体方法如下：
ionic cordova plugin add cordova-plugin-ionic-native-transitions
-- -------------------- ---- -------
------ - --------- - ---- --------------------------
------ - ----------- - ---- ----------------
-----------
------------- -
-----
--
-------- -
-------------------------- -
-- -- ------ --
-------- -
---------- -
------------------ ------
------------------ -------------------- ------------------ -----------------
--
-------------- ------
-
--
--
---------- -----------
---------------- -
-----
--
---------- -
----------
--------- ------------- --------- ------------------
-
--
------ ----- --------- --五、cordova-plugin-ionic-wkwebview-engine 的示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------
------ - ---------- --------------- - ---- --------------------------
------------
--------- ------------
------------ -----------
--
------ ----- -------- -
------ ------- ------ - ------------------------
------------
------ -------- --------------
------- ---------- ---------
- - -
----------------- ---- -
--------------------------- ----------------
------------------------------
-
---------------- ------- -
-------------------------- -------- ------------------
---------------- -- -
---------------------- --------- -- ----------
--
-------------- -- -
---------------------- ------ -- -------
---
-
--- -- ------- --
------------- --------------- -
----- -------- --------------- - -
-- ------------------------- ------
-- -------------------------------- ------
-- ------------------- -----
-- ------------------------------- -----
-- ------------------ ------
-- --------------------------- ------
-- --------------------------- -----
-- ------------------- -----
--
------ --------
-
-
六、总结
通过本文对 cordova-plugin-ionic-wkwebview-engine 的讲解，我们了解到了 WKWebView 引擎的作用和优势，以及如何正确地进行安装和配置。此外，还介绍了高级用法，包括设置本地缓存、白名单和避免 cookie 问题，并提供了相关的示例代码。
使用 cordova-plugin-ionic-wkwebview-engine 可以更好地优化 WebView 的使用体验，如果你正在开发跨平台移动应用，并且需要使用 WebView 进行前端开发，请一定要尝试使用此插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea081e8991b448dbf51