一旦PWA安装在移动设备上，如何像原生应用程序一样关闭应用程序而不需要用户多次点击返回按钮。
我知道在网页上使用window.close是个坏主意，但这是在移动设备上的PWA。
在 Cordova 中，您将使用 navigator.app.exitApp，但在 PWA 上当然不可用。
如何关闭渐进式Web应用程序
14
- fredtma
6
1个回答
7
这是我今天创建的一个解决方案。
当您点击返回按钮时，会显示一个对话框，要求您再次点击返回按钮以实际关闭应用程序，或点击取消返回到页面。
整个过程使用了一些操作历史记录的技巧，在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中添加，或者在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>
您可以在这里进行测试
2020-08-17更新：似乎Chrome在更新版本中已经改变了历史记录的工作方式。因此，代码必须进行调整。当然，在不使用标准解决方案并发明类似于这样的东西时，这是典型的。这应该不难，但需要一些调查。希望Chrome浏览器中的历史功能会在一段时间后稳定下来，这样就不必经常调整这个脚本。目前，当我测试它时，它实际上可以在Firefox浏览器中运行。
演示PWA (如果您想在浏览器中测试，请在新窗口/选项卡中打开Firefox [见上面的更新])
此演示配置为testInBrowser = true，以便您可以在普通Chrome浏览器中测试它。它当然不会关闭浏览器，但您可以看到历史记录跳转的情况。
如果您想在普通（Chrome）浏览器中测试它，重要的是您在新窗口/选项卡中打开它，因为想法是历史记录中不能有任何早期页面。
真正的测试是在您的Android设备上使用Chrome尝试它。在Chrome浏览器中打开它，按三个点菜单，选择“添加主屏幕快捷方式”。
安装渐进式Web应用程序后，启动它并在页面1和2之间来回导航一段时间，然后通过按设备的后退按钮来测试整个过程。
- Magnus
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
window.close了吗？它有效吗？ - GolezTrolwindow.close()关闭窗口，除非脚本打开了该窗口。其他参考资料：https://dev59.com/GWTWa4cB1Zd3GeqPF7AU - abielita