如何使用 HTML 和 JavaScript 检测 iOS 应用何时进入后台

Posted 2023-03-14

【中文标题】如何使用 HTML 和 JavaScript 检测 iOS 应用何时进入后台

【英文标题】：How to detect when iOS app goes the background using HTML and JavaScript

【发布时间】：2019-01-09 19:19:59

【问题描述】：

我需要知道我的 GWT Web 应用程序何时进入 iPad 的后台。该应用程序不是原生 ios 应用程序，而是围绕它有一个“包装器”，允许它作为应用程序运行。包装器用 Swift 编写并使用 UIWebView。

应用程序需要知道何时按下主页按钮以触发一些逻辑，即如果用户离开应用程序，则应用程序应在返回应用程序时显示警告屏幕（即获得焦点）。无论应用程序如何失去焦点，这个逻辑都应该是正确的，除非他们明确退出应用程序。我无法解释为什么出于安全目的需要该功能，但可以说这不是一般受众类型的应用程序；有特定场景下使用此应用。

我尝试过使用 document.hasFocus()，但它始终返回 true，即使相同的逻辑适用于 chromebook、Windows 机器和 macbook。

我添加了 visibilityChange 监听器，但 visibilityState 始终可见。我还为 pageshow 和 pagehide 添加了事件侦听器。为 pageshow eventlistener 打印出调试控制台语句，但不会为 pagehide eventlistener 打印。最后，我为 unload 事件添加了一个事件侦听器，但我从来没有看到我的控制台语句打印出来。

根据我阅读的各种搜索和文章，移动版 Safari 似乎忽略了大多数（如果不是全部）这些听众，我似乎没有尝试过的唯一选择是使用我更愿意避免的计时器.另外，我需要一个 html/javascript 解决方案，因为我只能修改我的应用程序而不能修改“包装器”应用程序。我使用的是装有 iOS 11.4 的 iPad Pro。

这只是我引用的众多文章之一： How to detect in iOS webapp when switching back to Safari from background?

应用程序的相关代码如下。非常感谢任何想法或建议！

/*************************** page visibility ***************************/
var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined")  // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
 else if (typeof document.msHidden !== "undefined") 
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
 else if (typeof document.webkitHidden !== "undefined") 
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";


console.log("debug - common.js - customBlur - visibilityChange : " + visibilityChange + " | hidden: " + hidden);


if (typeof document.addEventListener === "undefined" || hidden === undefined) 
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
 else 
// Handle page visibility change
    document.addEventListener(visibilityChange, handleVisibilityChange, false);


var forceBlur = false;
function handleVisibilityChange() 
if (document.visibilityState == 'hidden') 
    console.log("debug - common.js - handleVisibilityChange - calling delayBlur");
    forceBlur = true;
 else console.log("debug - common.js - handleVisibilityChange - document not hidden");


/*************************** pageshow and pagehide ***************************/
var forcePhBlur = false;
window.addEventListener("pageshow", function(evt)
    console.log("debug - common.js - pageshow - showing the page");
, false);
window.addEventListener("pagehide", function(evt)
    console.log("debug - common.js - pagehide - hiding the page");
    forcePhBlur = true;
, false);

/*************************** unload ***************************/
var forceUlBlur = false;
window.addEventListener("unload", function(evt)
    console.log("debug - common.js - unload - unloading the page");
    window.onblur = true;
    forceUlBlur = true;
, false);

/*************************** custom blur logic ***************************/
function delayCheck() 
    console.log("debug - common.js - delayCheck - document.hasFocus(): " +             
    document.hasFocus());
    console.log("debug - common.js - delayCheck - document.hidden: " +        document.hidden);
    if (!document.hasFocus() || document.hidden || forceBlur) 
        delayBlur();  //implemented in the java code
    


var delayVar;

function customBlur() 
console.log("debug - common.js - customBlur - document.hasFocus(): " + document.hasFocus());
console.log("debug - common.js - customBlur - document.hidden: " + document.hidden);
console.log("debug - common.js - customBlur - Document.visibilityState : " + document.visibilityState);
console.log("debug - common.js - customBlur - forceBlur : " + forceBlur);
console.log("debug - common.js - customBlur - forcePhBlur : " + forcePhBlur);
console.log("debug - common.js - customBlur - forceUlBlur : " + forceUlBlur);

if (!document.hasFocus() || document.hidden || forceBlur) 
    console.log("debug - common.js - customBlur - calling delayCheck to blur");
    delayVar = window.setTimeout(delayCheck, 200);

【问题讨论】：

停止回家操作似乎很烦人以卸载应用程序，也许可以改进您的应用程序，使状态在任何情况下都不会松散，因此如果用户返回总是在同一点继续？跨度>

该应用类似于安全考试浏览器等安全测试应用。它仅用于特定场景，因此包括阻止用户离开应用程序的强制性原因。

【参考方案1】：

有些人与你同游，剖析their code可能会很有趣。

或者您可以使用Cordova 将您的 Web 应用程序打包成一个原生应用程序，这将为您提供通过 javascript 调用访问原生信息的方法。

【讨论】：

感谢您的评论！我之前确实看过那个库，但发现它不能满足我的需要。 :) 科尔多瓦看起来很有趣。我最近听到了更多关于它的消息。

如果你对这个方向感兴趣，你也可以看看 phonegap，它非常相似，但似乎得到了更好的支持。 phonegap.com

【参考方案2】：

简而言之，我认为在使用混合应用程序时按下主页按钮时无法使用 javascript 来判断。不会触发页面可见性、卸载等 UI 事件。由于我无法指定的原因，我无法使用计时器。看起来唯一的选择是编辑 iPad 包装器的 swift 代码，以在应用程序进入后台时发出信号。