fre*_*tma 8 javascript progressive-web-apps
一旦pwa安装了移动设备,如何在不让用户多次单击后退按钮的情况下关闭应用程序,就像本机应用程序一样.
我理解window.close在网页上这是一个坏主意,但这是移动设备上的pwa.
在科尔多瓦你将使用navigator.app.exitApp,这当然不适用于pwa.
这是我今天创建的解决方案。
当您单击后退按钮时，一个对话框将要求您再次单击后退按钮以实际关闭应用程序，或取消以返回该页面。
整个事情使用了对历史的一些操作，它适用于 Chrome。人们可以调整一些东西，使其适用于更多浏览器。当涉及到历史应该如何详细工作时，浏览器似乎通常有略微不同的理念。
因此，在此示例中，我有一个条件，即它仅对带有 Chrome 的 Android 执行其操作，如您在代码中所见。
还有一个全屏的条件（我的PWA全屏运行），这样这个逻辑就不会在普通浏览器中使用（你可以通过设置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 元素的开头，或者在 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 年 8 月 17 日：更新：新版本的 Chrome 似乎改变了历史记录的工作方式。所以必须调整代码。当不使用标准解决方案并发明类似的东西时，这当然是典型的。这应该不难，但需要一些调查。希望 Chrome 中的历史功能会在一段时间后稳定下来，这样脚本就不必一直调整了。现在当我测试它时，它实际上可以在 Firefox 浏览器中运行。
演示 PWA （您必须在新窗口/选项卡中打开并使用铬合金 如果您想在浏览器中进行测试，请使用 Firefox [请参阅上面的更新]。）
该演示配置了 testInBrowser = true 以便您可以在普通 Chrome 浏览器中进行测试。它当然不会关闭浏览器，但是你可以看到历史是如何跳转的。
如果你想在你的普通（Chrome）浏览器中测试它，在新窗口/标签中打开它很重要，因为这个想法是历史中不能有任何更早的页面。
真正的测试是在装有 Chrome 的 Android 设备上进行尝试。在 Chrome 浏览器中打开它，按三点菜单，选择“在主屏幕上添加快捷方式”。
安装 Progressive Web App 后，启动它并在第 1 页和第 2 页之间来回导航一段时间，然后按设备的后退按钮测试整个过程。
| 归档时间： |
|
| 查看次数： |
3893 次 |
| 最近记录： |