Javascript 如何关闭渐进式web应用程序_Javascript_Progressive Web Apps

Javascript 如何关闭渐进式web应用程序

javascript

Javascript 如何关闭渐进式web应用程序,javascript,progressive-web-apps,Javascript,Progressive Web Apps,一旦将pwa安装到移动设备上，如何像本地应用程序一样关闭应用程序，而不让用户多次单击后退按钮我知道在网页上关闭窗口是个坏主意，但这是移动设备上的pwa 在Cordova中，您将使用navigator.app.exitApp，这当然在pwa上不可用。这是我今天创建的解决方案当您单击“后退”按钮时，一个对话框将要求您再次单击“后退”按钮以实际关闭应用程序，或单击“取消”以返回页面整个过程使用了一些历史操作，它在Chrome上工作。人们可以调整一些东西，使之适用于更多的浏览器。在历史应该如何详细

一旦将pwa安装到移动设备上，如何像本地应用程序一样关闭应用程序，而不让用户多次单击后退按钮

我知道在网页上关闭

窗口是个坏主意，但这是移动设备上的pwa
在Cordova中，您将使用navigator.app.exitApp
，这当然在pwa上不可用。
这是我今天创建的解决方案
当您单击“后退”按钮时，一个对话框将要求您再次单击“后退”按钮以实际关闭应用程序，或单击“取消”以返回页面
整个过程使用了一些历史操作，它在Chrome上工作。人们可以调整一些东西，使之适用于更多的浏览器。在历史应该如何详细工作的问题上，浏览器的理念似乎常常略有不同
因此，在这个例子中，我有一个条件，即它只对使用Chrome的Android进行操作，正如您在代码中看到的那样
还有一个全屏条件（my PWA在全屏模式下运行），因此此逻辑不会在普通浏览器中使用（您可以通过设置testInBrowser=true在普通浏览器中进行测试）
closePWA.js
var testInBrowser=false；//将此设置为true以在浏览器中进行测试
if（testInBrowser）
|| 
/Android/i.test（navigator.userAgent）
&&/Chrome/i.test（navigator.userAgent）
&&匹配媒体（“（显示模式：全屏）”）。匹配
) {
if（getCookie（'closing'）=“true”）{
setCookie（'结束'，''，1）；
showCloseDialog（）；
returnToOriginalPageIfUserCancels（）；
window.stop（）；
}否则{
history.pushState（null，null）；
addEventListener（'popstate'，函数（）{
setCookie（'closing'，'true'，10）；
history.go（-（history.length-2））；
})
}
}
函数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%）；文本对齐：居中；背景色：#fff；字体大小：30px；字体系列：arial；字体重量：粗体；'；
s、 appendChild（document.createTextNode（'再次单击后退按钮关闭'）；
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；字体系列：arial；背景：无！重要；边框：无；颜色：蓝色；字体重量：粗体；'；
b、 innerHTML='Cancel'
b、 addEventListener（'click'，function（）{outsidesolve（）}）；
s、 儿童（b）；
s、 appendChild（document.createElement（'BR'））；
s、 appendChild（document.createElement（'BR'））；
s、 appendChild（document.createTextNode（'to back'）；
文件。正文。附录子项；
}
异步函数returnToOriginalPageIfUserCancels（）{
等待新承诺（功能（解决）{
局外人解决=决心；
});
var steps=history.length-1；
if（steps==1）steps=0；//在用户单击第一页返回时处理该情况
历史。走（步）；
}
函数setCookie（cname、cvalue、exseconds）{
var d=新日期（）；
d、 设置时间（d.getTime（）+（exseconds*1000））；
var expires=“expires=“+d.togmString（）；
document.cookie=cname+“=”+cvalue+”；“+expires+”；path=/”；
}
函数getCookie（cname）{
变量名称=cname+“=”；
var decodedCookie=decodeURIComponent（document.cookie）；
var ca=decodedCookie.split（“；”）；
对于（变量i=0；i

脚本应该直接添加到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浏览器中工作
（若要在浏览器中进行测试，必须在新窗口/选项卡中打开，并使用Chrome Firefox[请参阅上面的更新]。）
此演示配置为testInBrowser=true，以便您可以在普通的Chrome浏览器中进行测试。当然，它不会关闭浏览器，但您可以看到历史是如何跳跃的
如果您想在普通（Chrome）浏览器中测试它，请在新窗口/选项卡中打开它，这一点很重要，因为这样做的目的是历史记录中不能有任何早期页面
真正的测试是用Chrome在Android设备上试用。在Chrome浏览器中打开它，按三点菜单，选择“在主屏幕上添加快捷方式”
安装Progressive Web App后，启动它并在第1页和第2页之间来回导航一段时间，然后按下设备的“后退”按钮来测试整个过程。
您是否尝试了窗口。是否关闭？它工作了吗？window.close不工作我得到脚本可能只关闭由它打开的窗口。
您可以参考这个。据称，除非脚本打开窗口，否则某些浏览器将不允许您使用window.close（）关闭窗口。附加参考文献
<!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>