Веб-просмотр продолжает терять фокус

У меня есть приложение, которое в основном является оберткой для внутреннего веб-сайта компании. Идея состоит в том, чтобы легко загрузить веб-сайт в своем собственном окне на моем Chromebook, таким образом, он не будет выгружаться, когда ОЗУ станет низким.

У меня очень простое приложение с одним WebView, которое потребляет все окно приложения. Проблема в том, что всякий раз, когда я переключаюсь от окна и возвращаюсь, веб-просмотр потерял фокус. Это особенно раздражает, потому что это приложение для чата, и я хотел бы начать разговор сразу же после alt-tabbing обратно в окно.

Я просмотрел webview каждый раз, когда окно получает фокус, но разрыв между Window (от chrome.windows) и AppWindow (от chrome.app.window) делает это нетривиальным. Событие, которое мне нужно только для объектов Window, но я могу только окончательно получить текущий AppWindow. Теоретически я могу получить текущее активное окно, когда приложение запускается первым, но это кажется хакерским и ненадежным.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Chat App</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <webview src="https://example.com/" id="chat"></webview>
  </body>
</html>

background.js

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create(
    'index.html',
    {
      id: 'chat'
    }
  );
});

styles.css

Употребление веб-обозревателя всего окна было немного сложнее; Я должен был использовать некоторые избыточные свойства CSS, чтобы заставить его работать правильно.

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#chat {
  border: 0 none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

Ответ 1

Вы можете достичь этого просто с помощью API видимости страницы. Вы можете использовать его, чтобы добавить прослушиватель событий и проверить состояние document.hidden, чтобы вернуть фокус в поле чата. Вы также можете делать другие вещи, например, воспроизводить звуковое оповещение, когда вы получаете сообщения чата, когда вкладка не отображается.

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

JSFiddle

function handleVisibilityChange() {
    console.log(document.hidden);
    if (!document.hidden) {
        chatFocus();
    }
}

function chatFocus() {
    document.getElementById("ChatBox1").focus();
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);
document.getElementById("ChatBox1").addEventListener("blur", chatFocus, true);

<input type="text" id="ChatBox1" placeholder="ChatBox1">
<input type="text" id="ChatBox2" placeholder="ChatBox2">