jjzjj

javascript - 如何关闭渐进式网络应用程序

coder 2024-07-20 原文

在移动设备上安装了 pwa 后,如何像关闭 native 应用一样关闭应用,而无需用户多次点击后退按钮。

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

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

最佳答案

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

当您点击后退按钮时,会出现一个对话框,要求您再次点击后退按钮以实际关闭应用程序,或取消以返回页面。

整个过程对历史进行了一些操作,并且可以在 Chrome 上运行。可以调整一些东西,使其适用于更多的浏览器。在历史应该如何详细工作方面,浏览器似乎经常有略微不同的理念。

因此,在这个示例中,我有一个条件,即它只对 Android 和 Chrome 执行其操作,如您在代码中所见。

还有一个全屏的条件(我的PWA是全屏运行的)所以这个逻辑在普通浏览器中是不会用到的(可以在普通浏览器中设置testInBrowser = true来测试)。

关闭PWA.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 "";
}

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

这应该在您的 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 浏览器中运行。

Demo PWA (如果您想在浏览器中进行测试,您必须在新窗口/选项卡中打开并使用 Chrome Firefox [请参阅上面的更新]。)

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

如果您想在您的普通 (Chrome) 浏览器中测试它,请务必在新窗口/选项卡中打开它,因为我们的想法是历史记录中不能有任何更早的页面。

真正的测试是在装有 Chrome 的 Android 设备上试用它。在 Chrome 浏览器中打开它,按三点菜单,选择“在主屏幕上添加快捷方式”。

安装 Progressive Web App 后,启动它并在页面 1 和 2 之间来回导航一会儿,然后按设备的后退按钮测试整个过程。

关于javascript - 如何关闭渐进式网络应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47757168/

有关javascript - 如何关闭渐进式网络应用程序的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  4. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  6. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  7. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  8. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  9. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  10. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

随机推荐