사용자가 탭을 떠나거나 화면을 끈 후 브라우저가 타이머 및 웹 소켓 연결 끊기 시간을 감지하는 방법은 무엇입니까? (자바 스크립트)


12

문맥

진보적 인 타이머를 가지고 웹 응용 프로그램 (로 제공 게임 setTimeout, setInterval)와 웹 소켓 연결은 실시간 통신을 얻을 수 있습니다.

무슨 일이야

사용자가 앱에 머무르는 한 모든 것이 정상입니다. 그러나 사용자가 다른 탭이나 다른 앱으로 이동하거나 화면을 끄면 (모바일의 경우) "지각적인 미지의 세계"가됩니다.

  • 웹 소켓이 "일시 중지"되거나 "꺼져"있을 수 있습니다
  • 타이머는 스로틀되거나 디 바운스되는 것처럼 보입니다.

이 동작은 브라우저와 플랫폼에 의존하는 것으로 보이며 특정 사용자 행동에 따라 결정될 수도 있습니다. 브라우저와 OS에는 배터리 및 / 또는 계산을 저장하는 자체 수명주기 / 메커니즘이 있다고 생각합니다.

사용자가 돌아 오면 앱이 알 수없는 상태이며 상태를 올바르게 복원하기 위해 고심하고 있습니다.

웹 소켓과 관련하여 socket.io다시 연결하는 웹 소켓 을 자동으로 다시 연결 했지만 모든 것을 해결하기에는 충분하지 않습니다.

답을 찾고

  • 이와 관련하여 다른 브라우저의 "라이프 사이클"은 무엇입니까? 이 문서가 있습니까? 그들은 언제 끄고 조절하기로 결정합니까?
  • 웹 소켓에 정확히 무엇을합니까? 브라우저가 연결을 끊습니까?
  • 타이머와 정확히 어떤 관계가 있습니까? 그들은 그들을 조절하거나 그들 또는 다른 것을 디 바운스합니까?
  • 자바 스크립트 실행은 일반적으로 어떻게됩니까? 일시 중지 / 파괴 / 스로틀?
  • 기능을 끌 때 브라우저 수명주기 이벤트에 연결하는 방법이 있습니까? 내가 찾을 수있는 유일한 것은 가시성 API 일 수 있습니다.
  • 솔루션을 테스트 할 수 있도록이 동작을 인위적으로 재현하는 방법이 있습니까? 데스크탑에서는 특히 어렵습니다. 웹 소켓을 끌 수 없으며 크롬 개발자는 2014 (!)부터 문제를 해결 하기 위해 서둘러 보이지 않습니다. 연결 조절을 사용할 때 웹 소켓이 포함되지 않음

  • 위와 상관없이이 문제를 감지 / 해결할 수있는 실용적인 크로스 브라우저 솔루션이 있습니까? (예를 들어 경험상 데스크톱의 Firefox는 Chrome과 완전히 다르게 작동하며 iPhone은 Android보다 훨씬 자주 연결이 끊어집니다)

관련된 링크들


답변:


7

확실하지는 않지만 서비스 작업자를 사용할 수 있습니다. 내가 아는 한, 탭이 열리지 않아도 백그라운드에서 실행되고 탭이 닫히면 종료됩니다.

Btw. 브라우저 탭의 수명주기는 모든 브라우저에서 다르게 처리되므로 모든 브라우저에서 다르게 보입니다. 내가 보는 것에서 브라우저가 다른 것들을 위해 더 많은 메모리를 필요로하면 브라우저가 탭을 고정시킬 수 있음을 알 수 있습니다.

다음은 Chrome 의 문서입니다 .

사용자가 탭을 떠났거나 다시 열 었는지 알려주는 onload와 같은 일부 이벤트가 있음을 기억했습니다. 이 이벤트를 사용하여 다시 연결할 수 있습니다.


이것은 흥미로운 아이디어입니다. 공유 할 코드로 수행 한 것입니까?
Kev

죄송합니다. 현재 예제 코드가 없지만 서비스 작업자를 검색하는 경우이를 설정하는 방법에 대한 많은 자습서가 있습니다. 당신이해야 할 유일한 것은 ws-server에 연결하는 작은 코드와 ws-server console.log()에서 메시지를받을 때입니다. 크롬에서는 서비스 담당자의 콘솔을 열 수 있으므로 탭을 떠날 때 메시지가 표시되는지 테스트 할 수 있습니다.
Mointy

0

앱 디자인 방법에 대해 다른 조언을 드리겠습니다. 내가 이해 한 바에 따르면 사용자가 브라우저에서 더 이상 활동하지 않는지를 이해하기 위해 더 많은 논리를 추가하는 것이 좋습니다. 이를 위해서는 해당 로직을 구현하기 위해 브라우저 마다 다른 문제가 발생 합니다 . 이를 염두에두고 서버와 클라이언트 모두에서 더 나은 오류 처리에 투자 합니다.

브라우저마다 오류가 발생하지 않습니다. 이를 처리하면 앱이 브라우저 변경 사항에보다 탄력적이고 무관 심해져 결국에는 탭에서 동면하는 방식, 공급 업체가 향후 구현할 수있는 다른 기능을 변경할 수 있습니다.

이것은 서비스 아키텍처에서 찾을 수 있지만 동일한 패턴이 모든 웹앱에 적용된다는 아이디어입니다. Design-for-Fail개념 을 찾고 싶을 수도 있습니다 .

복잡성은 의존하는 시스템 부분에서 견고성을 가정하는 것이 불가능합니다. 대신 IT 스택 기반의 특정 계층에서 시스템 및 응용 프로그램을 설계하여 하위 수준에서 장애가 발생할 가능성을 가정해야합니다. 장애 대비 설계는 모든 계층의 내결함성에 대한 사고가 필요합니다. 더 이상 응용 프로그램 개발자가 기능에 대한 생각으로 제한 할 수 없습니다.

https://www.oreilly.com/library/view/designing-delivery/9781491903742/ch04.html


어떤 종류의 "더 나은 오류 처리"를 생각하십니까?
Kev
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.