渐进式Web应用程序上的Android后退按钮关闭de App [英] Android Back Button on a Progressive Web Application closes de App

问题描述

纯HTML5 / Javascript（累进式）网络应用程序是否可以截取移动设备后退按钮以避免应用程序退出？

Can a "pure" HTML5/Javascript (progressive) web application intercept the mobile device back button in order to avoid the App to exit?

此问题类似这一个但我想要要知道是否有可能在不依赖PhoneGap / Ionic或Cordova的情况下实现此类行为。

This question is similar to this one but I want to know if it is possible to achieve such behavior without depending on PhoneGap/Ionic or Cordova.

推荐答案

虽然android后退按钮不能在渐进的Web应用程序上下文中直接连接，我们可以使用历史API来实现您想要的结果。

While the android back button cannot be directly hooked into from within a progressive web app context, there exists a history api which we can use to achieve your desired result.

首先，当没有浏览器历史记录时对于用户所在的页面，按后退按钮会立即关闭应用程序。

我们可以通过在应用首次打开时添加以前的历史记录状态来阻止这种情况：

First up, when there's no browser history for the page that the user is on, pressing the back button immediately closes the app.
We can prevent this by adding a previous history state when the app is first opens:

window.addEventListener('load', function() {
  window.history.pushState({}, '')
})

此函数的文档可以可在 mdn 上找到：

The documentation for this function can be found on mdn:

pushState（）有三个参数：状态对象，标题（当前被忽略）和（可选）URL [...]如果未指定，则将其设置为文档的当前URL。

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL[...] if it isn't specified, it's set to the document's current URL.

所以现在用户必须按两次后退按钮。一个印刷机将我们带回原始历史状态，下一个印刷机关闭应用程序。

So now the user has to press the back button twice. One press brings us back to the original history state, the next press closes the app.

第二部分是我们挂钩窗口的 popstate 事件，只要浏览器导航就会触发通过用户操作在历史记录中向后或向前（当我们调用history.pushState时不是这样）。

Part two is we hook into the window's popstate event which is fired whenever the browser navigates backwards or forwards in history via a user action (so not when we call history.pushState).

将弹出一个popstate事件发送到窗口每次活动历史记录条目在同一文档的两个历史记录条目之间更改。

A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.

所以现在我们有：

window.addEventListener('load', function() {
  window.history.pushState({}, '')
})

window.addEventListener('popstate', function() {
  window.history.pushState({}, '')
})

加载页面后，我们会立即创建一个新的历史记录条目，每次用户按返回转到第一个条目时，我们再次添加新条目！

When the page is loaded, we immediately create a new history entry, and each time the user pressed 'back' to go to the first entry, we add the new entry back again!

当然，这种解决方案对于没有路由的单页应用程序来说非常简单。它必须适用于已经使用历史记录API的应用程序，以使当前网址与用户导航的位置保持同步。

Of course this solution is only so simple for single-page apps with no routing. It will have to be adapted for applications that already use the history api to keep the current url in sync with where the user navigates.

为此，我们将添加一个历史的状态对象的标识符。这将允许我们利用 popstate 事件的以下方面：

To do this, we will add an identifier to the history's state object. This will allow us to take advantage of the following aspect of the popstate event:

如果激活的历史记录条目是通过调用history.pushState（）创建的，则popstate事件的state属性包含历史记录条目的状态对象的副本。

If the activated history entry was created by a call to history.pushState(), [...] the popstate event's state property contains a copy of the history entry's state object.

所以现在在我们的 popstate 处理程序中，我们可以区分我们用来阻止后退按钮关闭应用程序的历史记录条目用于在应用程序内进行路由的行为与历史记录条目，并且只有在特定弹出时才重新推送我们的预防性历史记录条目：

So now during our popstate handler we can distinguish between the history entry we are using to prevent the back-button-closes-app behaviour versus history entries used for routing within the app, and only re-push our preventative history entry when it specifically has been popped:

window.addEventListener('load', function() {
  window.history.pushState({ noBackExitsApp: true }, '')
})

window.addEventListener('popstate', function(event) {
  if (event.state && event.state.noBackExitsApp) {
    window.history.pushState({ noBackExitsApp: true }, '')
  }
})

---

观察到的最终结果行为是当按下后退按钮时，我们要么返回我们的渐进式网络应用程序的路由器的历史记录，要么我们保持在应用程序打开时看到的第一页。

---

The final observed behaviour is that when the back button is pressed, we either go back in the history of our progressive web app's router, or we remain on the first page seen when the app was opened.

这篇关于渐进式Web应用程序上的Android后退按钮关闭de App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！