我使用 Ionic 3 开发了一个 PWA(基于选项卡)。它工作正常,直到在 Android 浏览器中按下硬件后退按钮或浏览器的后退按钮。如果它从主屏幕运行,按硬件返回将关闭应用程序。如果应用程序在 android 中的 chrome 中运行(仅在 chrome 中测试),硬件后台或浏览器后台将重新加载 PWA 的首页,而不是以前访问过的页面。如何在 Ionic 3 PWA 中处理这些事件?
我对所有页面都使用延迟加载。
到目前为止我尝试过的:
根据 jgw96 的评论here https://github.com/ionic-team/ionic/issues/8726#issuecomment-294193166,我认为 IonicPage 会自行处理导航。但它不起作用。
使用了 platform.registerBackButtonAction,但它不适用于 PWA。
根据下面答案中 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, "");
});
}
}
}
您提到您正在使用应用程序和浏览器中的硬件后退按钮,因此您没有明确提及在哪个阶段需要做什么,因此我提出了在大多数情况下有用的通用解决方案
应用程序组件.ts
platform.ready().then(() => {
// your other plugins code...
this.configureBkBtnprocess ();
});
配置BkBtn进程
private configureBkBtnprocess () {
// If you are on chrome (browser)
if (window.location.protocol !== "file:") {
// Register browser back button action and you can perform
// your own actions like as follows
window.onpopstate = (evt) => {
// Close menu if open
if (this._menu.isOpen()) {
this._menu.close ();
return;
}
// Close any active modals or overlays
let activePortal = this._ionicApp._loadingPortal.getActive() ||
this._ionicApp._modalPortal.getActive() ||
this._ionicApp._toastPortal.getActive() ||
this._ionicApp._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
return;
}
// Navigate back
if (this._app.getRootNav().canGoBack())
this._app.getRootNav().pop();
}
else{
// you are in the app
};
// Fake browser history on each view enter
this._app.viewDidEnter.subscribe((app) => {
history.pushState (null, null, "");
});
解决方案2尝试在平台中添加这些事件监听器:
window.addEventListener('load', function() { window.history.pushState({}, '')
})
window.addEventListener('popstate', function() { window.history.pushState({},
'') })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)