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

Question

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

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

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

我添加了 visibilityChange 监听器，但 visibilityState 始终可见。我还为 pageshow 和 pagehide 添加了事件监听器。为 pageshow 事件监听器打印出调试控制台语句，但从不为 pagehide 事件监听器打印出调试控制台语句。最后，我为卸载事件添加了一个事件监听器，但我从未看到为此打印出我的控制台语句。

根据我读过的各种搜索和文章，移动版 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);
}

Answer 1

有些人经历了同样的旅程，剖析一下可能会很有趣 their code .

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