通过 Inappbrowser(IOS) 调用网页很慢。如何使用 Cordova WkWebView？

Question

我创建了通过 inappbrowser 调用网页的 cordova 应用程序 (ios)。但是由于ios速度下降，我google了一下，发现了WKWebView。我已经安装了 WkWebview 的所有插件，但我想知道如何使用它来调用网页？ 在 Inappbrowser 中，我使用它来调用网页，

   var url = 'http://google.com'; 
   var target = '_blank';
   var options = "location=no,closebuttoncaption=exit,toolbar=no";
   var ref = cordova.InAppBrowser.open(url, target, options);

   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loadloaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
  console.log('Loading started: '  + event.url)
  }

  function loadstopCallback(event) {
  console.log('Loading finished: ' + event.url)
  }

  function loaderrorCallback(error) {
  console.log('Loading error: ' + error.message)
  }

   function exitCallback() {
  console.log('Browser is closed...')
  }

同样我想知道有没有办法通过wkwebview调用网页？

Answer 1

更新 我已经用我的 Cordova InAppBrowser 插件的分支修复了剩余的已知问题，我已经将其重写为使用 WKWebView 而不是 UIWebView（就像原始的 InappBrowser 插件一样），并将其发布为 cordova-plugin-inappbrowser-wkwebview 所以：

cordova plugin add cordova-plugin-inappbrowser-wkwebview

Answer 2

你可以做一件事。用 XIB 创建一个本机控制器并为其创建一个 WKWebview。编写一个 cordova 调用并将您的 url 传递给本机函数。然后在 WKWebview 中加载 url。不要使用 inappBrowser。

例如。 你的 WKWebViewController.h 文件

#import <WebKit/WebKit.h>

@interface WKWebViewController : UIViewController

@property(strong,nonatomic) WKWebView *webView;
@property (strong, nonatomic) NSString *urlToBeLoaded;

@end

你的 WKWebViewController.m 文件

#import "WKWebViewController.h"

@interface WKWebViewController ()

@end


@implementation WKWebViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:self.urlToBeLoaded];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    _webView = [[WKWebView alloc] initWithFrame:self.view.frame];  
    [_webView loadRequest:request];
    _webView.frame = CGRectMake(self.view.frame.origin.x,self.view.frame.origin.y, self.view.frame.size.width, self.view.frame.size.height);
    [self.view addSubview:_webView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@结束

除此之外，您还必须编写一个插件类，并在那里定义一个您将从 javascript 调用的方法。从插件类你必须加载上面的控制器

Answer 3

更新：

最新版本的 cordova-plugin-inappbrowser 允许使用 wkwebview 作为选项，这将提高 iOS 12 的性能：

在尝试打开 inAppBrowser 时将"usewkwebview=yes" 添加到您的选项中。请务必在您的项目中安装 WKWebView 引擎插件。

文档：

https://github.com/apache/cordova-plugin-inappbrowser#cordovainappbrowseropen

---

使用最新版本的插件后，我的性能得到了改善。对于使用 iOS 12 的设备来说尤其明显：

https://github.com/apache/cordova-plugin-inappbrowser/pull/271

包含一些重大更改，但有了UIWebView now deprecated in iOS 12，那么让这个插件支持 WKWebView 现在似乎是一个更高的优先级。

这是在官方插件中使用的此功能的批准 PR（制作 PR 的人是另一个答案中引用的 cordova-plugin-inappbrowser-wkwebview 的作者）。您可以安装最新的插件：

cordova plugin add https://github.com/dpa99c/cordova-plugin-inappbrowser#CB-7179

你仍然需要安装 apache/cordova-plugin-wkwebview-engine 就像来自 https://github.com/dpa99c/cordova-plugin-inappbrowser-wkwebview 的 cordova-plugin-inappbrowser-wkwebview 一样：

cordova plugin add cordova-plugin-wkwebview-engine

此外，如果您在使用这些插件制作包时遇到问题，请确保没有冲突的插件：

删除 cordova-plugin-inappbrowser 的 cordova-plugin-inappbrowser-wkwebview（使用上面列出的 CB-7179 PR 提供的版本）

为 cordova-plugin-wkwebview-engine 移除 cordova-plugin-ionic-webview（为 ionic 3 安装）

cordova plugin rm cordova-plugin-wkwebview-engine

cordova plugin rm cordova-plugin-ionic-webview

tl;博士：

cordova plugin add https://github.com/dpa99c/cordova-plugin-inappbrowser#CB-7179

cordova plugin add cordova-plugin-wkwebview-engine

我会留意 github 上的 cordova-plugin-inappbrowse 的下一个版本，看看 PR 是如何被批准和合并的。当新版本发布时，您应该只使用最新的 cordova-plugin-inappbrowser。在撰写本文时，最新版本 (3.0.0) 是在 4 月。

https://github.com/apache/cordova-plugin-inappbrowser/releases