PWA 中 Android 后退按钮的自定义事件答案

【问题标题】：Custom Event for Android Back button in PWAPWA 中 Android 后退按钮的自定义事件
【发布时间】：2020-01-05 21:49:36
【问题描述】：

我正在开发 PWA，并且我有一个页面，其中包含全屏模式，单击按钮执行特定操作时会弹出该页面。

在模态框上，我有一个关闭按钮，该按钮与一个可以很好地关闭模态框的功能相关联。但是我注意到，在大多数本机应用程序中，当模式处于活动状态时，单击我这样的 UI 中的 (android) 后退按钮会关闭模式，而不是转到上一个视图。

我担心的是是否有可能监听到被点击的 android 后退按钮，阻止默认操作并调用另一个操作。或者，如果这附近还有其他东西！

我进行了研究，但我所看到的只是处理浏览器后退按钮，在我的情况下它不起作用。在三星 A30、S10、A50 上测试。

从我经历过的Suggested question来看，没有关于如何处理后退按钮的答案，只有如何拦截它。这些都没有回答我的问题。

请注意，PWA 已安装，因此处于独立模式

【问题讨论】：

【解决方案1】：

在 PWA 环境下无法处理 Android 的后退按钮。
它是一个系统按钮，可以“点击”打开浏览器的 history.back()。如果没有回溯历史，则关闭浏览器。
但它对这个特殊按钮一无所知。将需要诸如按键事件之类的东西。但是没有标准，因此在浏览器中没有实现。

在您的应用中处理这些内容的唯一方法是在您的应用中管理 history.state。通过打开模式推送新状态。并在 popstate-event 中关闭 modal。

【讨论】：

是的，我意识到，我目前使用 history_state 来管理导航，尝试将它用于模态，但结果并不好！如果用户访问该页面作为该会话的第一页，则它在某些情况下有效，但是如果用户访问另一个页面并在按下后退键时以 !1 导航到该页面，它会返回到前一页。我已经看到这在反应中效果很好的情况，如果构建一个 SPA，由于我们的应用不是 SPA，所以仍然没有弄清楚。