我开发了一个PWA(基于标签)使用离子3.它工作正常,直到硬件返回按钮或浏览器的返回按钮在Android浏览器中按下.如果它是从主屏幕运行,按硬件返回将关闭应用程序.如果应用程序在Android中的Chrome中运行(仅在chrome中测试),硬件或浏览器的背面将重新加载PWA的第一页,而不是以前访问过的页面。如何在Ionic 3 PWA中处理这些事件?
我对所有页面都使用延迟加载。
到目前为止,我尝试的是:
1.根据jgw96在这里的评论,我以为IonicPage会自己处理导航。但它不工作。
1.使用platform.registerBackButtonAction,但它不适用于PWA。
1.根据Webruster在下面的答案中的建议,尝试了app.component.ts中的代码。但没有变化。
发布代码:
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController, Alert, Events, App, IonicApp, MenuController } from 'ionic-angular';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage:any = 'TabsPage';
constructor(public platform: Platform,
public alertCtrl: AlertController, public events: Events,
public menu: MenuController,
private _app: App,
private _ionicApp: IonicApp) {
platform.ready().then(() => {
this.configureBkBtnprocess ();
});
}
configureBkBtnprocess() {
if (window.location.protocol !== "file:") {
window.onpopstate = (evt) => {
if (this.menu.isOpen()) {
this.menu.close ();
return;
}
let activePortal = this._ionicApp._loadingPortal.getActive() ||
this._ionicApp._modalPortal.getActive() ||
this._ionicApp._toastPortal.getActive() ||
this._ionicApp._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
return;
}
if (this._app.getRootNav().canGoBack())
this._app.getRootNav().pop();
};
this._app.viewDidEnter.subscribe((app) => {
history.pushState (null, null, "");
});
}
}
}
2条答案
按热度按时间knpiaxh11#
你提到你正在使用应用程序和浏览器上的硬件返回按钮,所以你没有清楚地提到在哪个阶段需要做什么,所以我提出了在大多数情况下都有用的通用解决方案
app.component.ts
configureBkBtnprocess
解决方案2尝试在platform ready中添加这些事件监听器:
t40tm48m2#
我有几乎相同的要求,但没有一个解决方案完全工作,所以我想出了我自己的。在这里,我使用了一个数组来跟踪访问过的页面,并在返回单击事件中删除它。
注意:
window.onpopstate
即使在推新页面时也会被调用