Question

一旦移动设备安装了pwa，如何在不让用户多次单击后退按钮的情况下关闭应用程序，就像本机应用程序一样。

我理解在网页上window.close是一个坏主意，但这是移动设备上的pwa。

在科尔多瓦，您将使用navigator.app.exitApp，这当然不适用于pwa。

Answer 1

这是我今天创建的解决方案。

当您单击后退按钮时，对话框将要求您再次单击后退按钮以实际关闭应用程序，或者单击取消以返回页面。

整个事情使用了一些历史记录，它适用于Chrome。人们可以调整一些东西，以便它适用于更多的浏览器。在谈到历史应该如何运作时，浏览器似乎往往略有不同的哲学。

因此，在这个例子中，我有一个条件，它只对Android的Chrome做了它的事情，你可以在代码中看到。

还有一个全屏条件（我的PWA全屏运行），因此这个逻辑不会在普通浏览器中使用（你可以通过设置testInBrowser = true在普通浏览器中测试）。

closePWA.js

var testInBrowser = false; // set this to true to test in browser
if (   testInBrowser 
    || 
       /Android/i.test(navigator.userAgent)
    && /Chrome/i.test(navigator.userAgent)
    && window.matchMedia('(display-mode: fullscreen)').matches
    ) {
  if (getCookie('closing') == "true") {
    setCookie('closing', '', 1);
    showCloseDialog();
    returnToOriginalPageIfUserCancels();
    window.stop();
  } else {
    history.pushState(null, null);
    window.addEventListener('popstate', function () {
      setCookie('closing', 'true', 10);
      history.go(-(history.length - 2));
    })
  }
}
function showCloseDialog() {
  document.body.style='background-color:#aaa;';
  var s = document.createElement('SPAN');
  s.style='border-radius:10px;padding:50px 30px 40px 30px;display:table;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background-color:#fff;font-size:30px;font-family:arial;font-weight:bold;';
  s.appendChild(document.createTextNode('Click back button again to close'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createTextNode('or'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createElement('BR'));
  var b = document.createElement('BUTTON');
  b.style='font-size:30px;font-family:arial;background:none!important;border:none;color:blue;font-weight:bold;';
  b.innerHTML='Cancel'
  b.addEventListener('click',function(){outsideResolve()});
  s.appendChild(b);
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createTextNode('to go back'));
  document.body.appendChild(s);
}
async function returnToOriginalPageIfUserCancels() {
  await new Promise(function(resolve) {
    outsideResolve = resolve;
  });
  var steps = history.length - 1;
  if (steps==1) steps=0; // takes care of the case when user clicks back on first page
  history.go(steps);
}
function setCookie(cname, cvalue, exseconds) {
  var d = new Date();
  d.setTime(d.getTime() + (exseconds * 1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

脚本应该添加在body元素的开头，或者在body中很早。这个很重要。如果在标题中添加它将无法工作，如果稍后在正文中添加或在正文的末尾添加它将无法正常工作。

这应该在您的PWA的每一页上完成。

像这样：

<!DOCTYPE html>
<html>
<head>
  <title>A page</title>
</head>
<body>
  <script src="/script/closePWA.js"></script>
  <h3>A page</h3>
  <a href="anotherPage.html">Go to another page</a>
</body>
</html>

您可以在此处测试

编辑2019-01-29：以下链接（演示PWA）的网站目前已关闭，我稍后会再次进行此操作。

Demo PWA （如果要在浏览器中进行测试，则必须在新窗口/标签页和Chrome中打开。）

此演示配置了testInBrowser = true，以便您可以在普通的Chrome浏览器中对其进行测试。它当然不会关闭浏览器，但你可以看到历史如何跳跃。

如果您想在普通（Chrome）浏览器中进行测试，请务必在新窗口/标签页中对其进行测试，因为我们的想法是历史记录中不得有任何早期页面。

真正的测试是在使用Chrome的Android设备中试用它。在Chrome浏览器中打开它，按三重点菜单，选择＆＃34;在主屏幕上添加快捷方式＆＃34;。

安装Progressive Web App后，启动它并在第1页和第2页之间来回导航一段时间，然后按设备的后退按钮测试整个内容。

如何关闭渐进式Web应用程序

1 个答案:

closePWA.js