Cordova 后退按钮中断应用程序答案

【问题标题】：Cordova backbutton breaking applicationCordova 后退按钮中断应用程序
【发布时间】：2018-05-25 12:27:18
【问题描述】：

我对基于 Angular 5+ 的 Cordova 的 android 应用程序有疑问。我发现window.history.back() 和类似的原生 JS 后退函数会产生两个问题：

返回时，页面正在闪烁。似乎首先加载了所有 HTML 内容，然后加载了 CSS
在返回操作的一页中，我的布局已损坏（以下屏幕）

原始视图：

后退按钮：

奇怪的是 - 改变手机方向后一切恢复正常。

我找到了一个解决方案——我使用 Angular 路由器创建了我的而不是使用 vanilla JS 后退函数：

我已经订阅了路由器的事件并保存了所有路由：

this._subs.push(this._router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this._cordovaService.saveRoute(e.url);
      }
    }));

如果我想回来，我使用navigateByUrl函数：

back(): void {
    const lastRoute = this._routingHistory[this._routingHistory.length - 2];
    if (lastRoute) {
      this._router.navigateByUrl(lastRoute);
      this._routingHistory.pop();
    }
  }

为我的 inApp 后退按钮实现此功能后一切正常 - 没有闪烁或中断布局。

虽然，在为我的物理后退按钮实现此功能后，错误是相同的 - 布局中断或闪烁。在我的实现下面：

服务：

this.deviceReady = Observable.fromEvent(document, 'deviceready').publishReplay(1);
    (this.deviceReady as ConnectableObservable<Event>).connect();
    this.restore = Observable.fromEvent(document, 'resume').publishReplay();
    (this.restore as ConnectableObservable<Event>).connect();
    this.backbutton = Observable.fromEvent(document, 'backbutton').publishReplay();
    (this.backbutton as ConnectableObservable<Event>).connect();

使用它：

this._subs.push(this._cordovaService.deviceReady.subscribe(
      () => {
        document.addEventListener('backbutton', function (e) {
          e.preventDefault();
          e.stopPropagation();
          this._cordovaService.back();
        }.bind(this), false);
      }
      )
    );

我确定backbutton 中的函数已执行（我已经记录了一些信息），但问题仍然存在。

更多信息：

我使用的是cordova 8.0.0版
我正在使用以下插件：

https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix.git" />

一些提示：

曾经，我构建了 Cordova 的 android 应用程序，这些应用程序运行良好（带有原生 JS 后退功能），但在下一次构建后，一切都回来了。在 hockeyapp 中，我看到在运行良好的版本中，最低可用的 Android 版本是 4.1。在新应用中，它是 4.4。

我曾尝试降级 Cordova/android 引擎版本，但没有任何积极结果。

此外，我想使用最新的可用库。

感谢您在这种情况下的任何帮助。

【问题讨论】：

标签： javascript android cordova

【解决方案1】：

我终于找到了解决方案，基于以下博客的帖子：http://weblogs.thinktecture.com/thomas/2017/02/cordova-vs-zonejs-or-why-is-angulars-document-event-listener-not-in-a-zone.html，我在导入 cordova.js 之前添加了以下脚本：

   <script>
    (function () {
      'use strict';

      window.addEventListener = function () {
        EventTarget.prototype.addEventListener.apply(this, arguments);
      };

      window.removeEventListener = function () {
        EventTarget.prototype.removeEventListener.apply(this, arguments);
      };

      document.addEventListener = function () {
        EventTarget.prototype.addEventListener.apply(this, arguments);
      };

      document.removeEventListener = function () {
        EventTarget.prototype.removeEventListener.apply(this, arguments);
      };
    })();
  </script>
  <script type="text/javascript" src="cordova.js"></script>

有关此错误发生原因的更多信息，您可以在此 GitHub 问题中阅读：https://github.com/angular/angular/issues/22509

【讨论】：