如何关闭渐进式Web应用程序 [英] How to close a progressive web app

问题描述

一旦在移动设备上安装了pwa，我该如何像本机应用程序一样关闭该应用程序，而无需让用户多次单击后退按钮.

Once a pwa is installed a mobile device, how do I close the application like a native app without having the user click the back button multiple times.

我知道在网页上 window.close 是一个坏主意，但这在移动设备上是一个pwa.

I understand it's a bad idea to window.close on a web page but this a pwa on a mobile device.

在Cordova中，您将使用 navigator.app.exitApp ，这当然在pwa上不可用.

In Cordova you will use navigator.app.exitApp, this is of course not available on pwa.

推荐答案

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

This is a solution I created today.

当您单击后退"按钮时，将出现一个对话框，要求您再单击一次后退"按钮以实际关闭应用程序，或单击取消"返回到该页面.

When you click the back button a dialog will request you to just click the back button one more time to actually close the app, or Cancel to go back to the page.

整个过程都对历史记录进行了一些处理，并且可以在Chrome上运行.可以调整一下内容，使其适用于更多浏览器.在详细了解历史记录的工作方式方面，浏览器似乎常有略有不同的理念.

The whole thing uses some manipulation of the history, and it works on Chrome. One could adjust things so that it would work for more browsers. It seems browsers often have slightly different philosophies when it comes to how the history should work in detail.

因此，在此示例中，我有一个条件，即它只能在带有Chrome的Android上执行操作，如代码中所示.

Therefore, in this example, I have a condition that it does its thing only for Android with Chrome, as you can see in the code.

还有一个全屏的条件(我的PWA在全屏模式下运行)，这样该逻辑将不会在普通浏览器中使用(您可以通过将testInBrowser = true设置为在普通浏览器中进行测试).

There is also a condition of fullscreen (my PWA runs in fullscreen) so that this logic will not be used in normal browser (you can test in normal browser by setting testInBrowser = true).

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元素的开头或正文的很早处添加脚本.这个很重要.如果在标头中添加，它将不起作用，并且如果稍后在正文中或正文的末尾添加，它将无法正常工作.

The script should be added right at the beginning of the body element, or very early in the body. This is important. It will not work if added in header, and it will not work properly if added later on in the body, or at the end of the body.

这应该在您的PWA的每一页中完成.

This should be done in every page of your 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>

您可以在此处进行测试

2020-08-17:更新:似乎新版本的Chrome改变了历史记录的工作方式.因此，必须对代码进行调整.当不使用标准解决方案并发明这样的东西时，这当然是典型的.这应该不难，但是需要进行一些调查.希望Chrome的历史记录功能会在一段时间后稳定下来，这样就不必一直调整此脚本.现在，当我对其进行测试时，它实际上可以在Firefox浏览器中使用.

2020-08-17: Update: It seems that Chrome in newer versions has changed the way the history works. So the code must be adjusted. That's of course typical when not using standard solutions and inventing something like this. It shouldn't be difficult, but it requires some investigation. Hopefully the history functionality in Chrome will stabilize after some time so that this script will not have to be adjusted all the time. Right now when I tested it, it actually works in the Firefox browser.

演示PWA (您必须在新窗口/标签中并使用 Chrome Firefox [请参阅上面的更新]，如果您想在浏览器中进行测试.)

Demo PWA (You must open in a new window / tab and with Chrome Firefox [see update above] if you want to test in browser.)

此演示使用testInBrowser = true配置，因此您可以在普通的Chrome浏览器中对其进行测试.当然，它不会关闭浏览器，但是您可以看到历史记录如何跳跃.

This demo is configured with testInBrowser = true so that you can test it in your normal Chrome browser. It will of course not close the browser, but you can see how the history jumps.

如果要在常规(Chrome)浏览器中对其进行测试，请务必在新的窗口/标签中打开它，这一点很重要，因为这样的想法是历史记录中不得包含任何较早的页面.

If you want to test it in your normal (Chrome) browser it is important that you open it in a new window / tab, because the idea is that there must not be any earlier page in the history.

真正的测试是在带有Chrome的Android设备上进行尝试.在Chrome浏览器中将其打开，按三点菜单，然后选择在主屏幕上添加快捷方式".

The real test is to try it in your Android device with Chrome. Open it in your Chrome browser, press the tripple dots menu, select "Add shortcut on homescreen".

安装了渐进式Web应用程序后，启动它并在第1页和第2页之间来回导航一段时间，然后通过按设备的后退按钮测试整个过程.

When the Progressive Web App is installed, start it and navigate back and forth between page 1 and 2 for a while, and then test the whole thing by pressing the back button of your device.

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