Мне нужно знать, когда мое веб-приложение GWT переходит в фоновый режим на iPad. Приложение не является нативным приложением iOS, а скорее имеет «обертку», позволяющую запускать его как приложение. Оболочка написана на Swift и использует UIWebView.
Приложению необходимо знать, когда нажата кнопка «Домой», чтобы вызвать некоторую логику: если пользователь выходит за пределы приложения, то при возврате в приложение должно отображаться окно с предупреждением (т. Е. Получает фокус). Эта логика должна быть верной независимо от того, как приложение теряет фокус, если они явно не выходят из приложения. Я не могу объяснить, почему эта функциональность необходима в целях безопасности, но достаточно сказать, что это не тип приложения для широкой аудитории; Существуют определенные сценарии, в которых используется это приложение.
Я пытался использовать document.hasFocus (), но он всегда возвращает true, даже если эта же логика работает на устройствах Chromebook, Windows и MacBook.
Я добавил слушателя visibilityChange, но visibilityState всегда виден. Я также добавил слушателей событий для pagehow и pagehide. Отладочный оператор консоли выводится для EventListener pagehow, но никогда не для EventListener pagehide. Наконец, я добавил прослушиватель событий для события unload, но я никогда не вижу, чтобы мой оператор консоли распечатывал его.
Судя по различным поискам и статьям, которые я прочитал, кажется, что мобильный Safari игнорирует большинство, если не всех этих слушателей, и единственный вариант, который я не пробовал, - это использование таймеров, которых я предпочел бы избежать , Кроме того, мне нужно решение HTML / Javascript, так как я могу только изменить свое приложение и не могу изменить приложение-оболочку. Я использую iPad Pro с iOS 11.4.
Вот только одна из многих статей, на которые я ссылался:
Как обнаружить в веб-приложении iOS при переключении обратно в Safari из фона?
Соответствующий код из приложения ниже. Любые мысли или предложения с благодарностью!
/*************************** 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);
}