Обновить страницу Inapbrowser в приложении Apache Cordova, при выходе из фона

Задача: Мобильное приложение, созданное на Apache Cordova должно перезагрузить текущую страницу, открытую с помощью плагина inappbrowser.

Мобильное приложение реализовано таким образом, что внутри себя открывает внешний веб-сайт. По сути, сайт имитирует поведение мобильного приложения. При этом сайт многостраничный, и пользователь может перевести приложение в фоновый режим, находясь на любой странице, например, переключиться на другое приложение или просто свернуть его.

Для того чтобы приложение при возвращении пользователя восстанавливало актуальную версию открытой страницы, необходимо ее перезагрузить. Это может быть полезно, например, при возврате пользователя из платежной системы или при необходимости отображать актуальную версию страницы.

Реализация события onResume в Cordova

В Apache Cordova есть встроенное событие resume, которое срабатывает, когда приложение возвращается из фонового режима. Мы будем использовать его.

На сайте, который загружается в приложение, необходимо добавить скрипт, который просто обновит текущую страницу по событию resume. Скрипт подключается глобально на всем сайте, чтобы он был доступен на всех страницах.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
	document.addEventListener("resume", onResume, false);
	function onResume() {
	     setTimeout(function() {
		location.reload;
	    }, 2);
        }
}

Здесь мы отслеживаем готовность устройства с помощью onDeviceReady, который существует только в мобильном приложении и не сработает, если сайт будет открыт в обычном браузере. С использованием таймаута в две миллисекунды мы обновляем страницу.

Без таймаута событие может не сработать на устройствах iOS, а две миллисекунды почти не заметны для пользователя.

Проброс API Cordova в InAppBrowser

Обратите внимание: все API Apache Cordova не будут работать внутри InAppBrowser просто так. Для того чтобы "пробросить" работу всех плагинов и событий Cordova в InAppBrowser, не забудьте установить соответствующий плагин.

cordova plugin add cordova-plugin-remote-injection

Также открытие сайта внутри приложения должно быть выполнено в режиме _self. Пример открытия сайта из одного из реальных проектов, код в index.html:

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    ref = cordova.InAppBrowser.open(
        'https://ВАШ_САЙТ_ПРИЛОЖЕНИЕ.ru/',
        '_self',
        'location=no, zoom=no, toolbar=no'
    );
}

Михаил Базаров 01.04.2024

Учтите, что плагин cordova-plugin-remote-injection нужно немного модифицировать, так как по умолчанию установится старая версия.
Старая версия использует устаревший движек рендеринга и не пройдет проверку в AppStore.

Скачать исправленный плагин cordova-plugin-remote-injection:
https://bazarow.ru/upload/fo_all/cordova-plugin-remote-injection.zip