javascript - 屏幕解锁后如何在 iOS8 网络应用程序上恢复 JavaScript 计时器?

标签 javascript html ios8

在 iOS8 上,如果该 web 应用程序处于事件状态并从主屏幕图标启动,则该 HTML5 网络应用程序不会在屏幕锁定后恢复 js 计时器然后解锁。在 iOS7 上,计时器会在这种情况下继续。我需要在屏幕解锁后继续计时 - 有什么技巧可以实现吗?

注意/请先通过共享按钮使用 Safari 的“添加到主屏幕”将网络应用程序添加到主屏幕。在 Safari 中运行页面不会导致上述问题。

<html>
<head>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Test</title>
    <script>
        var tim;
        function go() {
            tim = window.setInterval(action, 1000);
        }
        function action() {
            document.getElementById('x').innerHTML = new Date().getTime().toString();
        }
    </script>
</head>
<body onload="go()">
    <div id="x"></div>
</body>
</html>

最佳答案

我们最终的解决方案并没有解决 IOS8 sleep 模式后所有损坏的功能,而只是 ajax requests/setTimeout/setInterval/requestAnimationFrame 和它们各自的清晰功能。

sleep 模式后出现的其他问题:

  • -webkit-transition opacity 导致不可选择的区域
  • 在键盘打开时调用的 worker.postMessage 会永久杀死所有 WebWorker
  • 窗口弹跳/平移可以杀死所有 WebWorker。
  • overflowchange/resize 事件不再有效。您需要重新设计任何依赖于它们的逻辑。

制作一个半可行的解决方案:

  1. 覆盖 setTimeout/setInterval/requestAnimationFrame/clearInterval/clearTimeout/cancelAnimationFrame。所有这些功能都需要将 postMessage 发送给 webworker,webworker 将相应地执行 setTimeout/setInterval。您可能还需要为这些功能设置暂停机制,但我并不是 100% 有必要。
  2. 重写 XMLHttpRequest,以便在调用 send 时,请求实际上是在 webworker 上执行的。
  3. 为所有 webworker 创建一个暂停机制,以便主线程可以确定所有 webworker 何时刷新了他们的消息(基本上需要防止 postMessage 在键盘启动时在任何 worker 上被调用)。
  4. 防止键盘在可编辑元素上弹出。在可编辑元素上检测到点击/点击事件后,您需要手动调用焦点函数。
  5. 覆盖打开键盘的可编辑元素的焦点功能。 Focus 现在将调用 pause workers 函数。所有worker暂停后,调用focus的浏览器实现。
  6. 将 focusout 事件监听器添加到可编辑元素,以便调用 resume workers 函数。

我的 github 上有一个半抽象版本可供其他人使用。我们在相当复杂/大型且严重依赖动画+ajax 的应用程序中使用 github 版本,几乎没有问题。

https://github.com/TaDaa/IOS8-FIX

关于javascript - 屏幕解锁后如何在 iOS8 网络应用程序上恢复 JavaScript 计时器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26008300/

相关文章:

javascript - 数据表服务器端排序不工作。出了什么问题?

javascript - 根据选定的 <select> 值添加所需的属性

ios - 在 iOS 8 中以编程方式安装配置文件

javascript - 使用 Javascript 处理表单提交事件,避免 "Form Processed"

javascript - 无法读取未定义的 react 导航的属性 'routeName'

javascript - 日期选择器突出显示日期(如果不可用)

javascript - 在点击时播放iframe视频(带有弹出窗口),并在弹出窗口关闭时暂停

javascript - 将 HTML 表单输入到表格中

iOS 7 与 iOS 8 约束大小不同

iOS - Google AdMob v6.12.0 - "idfa class missing, won' t 收集 idfa”