탭 알림 알림 파란색 원형 JavaScript 방법 비활성 제목 변경 감지

결론


  • document.title를 다시 쓸 수 있습니다
  • 따라서 JavaScript를 사용한 브라우저에 대한 통지 방법, API가있는 것은 아니다 ( document.title 또는 alert에는 JS를 사용하지만)
  • "탭 고정"상태의 경우에만 발생하므로 조우 수가 적습니다. → 정보가 적습니다.

    구구리 힘이 시험되어 지쳤다.
    고정 상태 한정이라는 것을 이해하지 못했기 때문에, 거기를 이해하고 검색 키워드를 더하면 빨랐을 것이다.
    사양에 자세한 쪽이 계시면 정보원등을 가르쳐 주면 도움이 됩니다.

    (그 밖에도 로드 완료 등 통지 타이밍은 여러가지 있을 것 같습니다만, 검증은 힘들므로 문서를 원한다)

    통지를 위한 구현으로서는 window.addEventlister('blur') , window.addEventlister('focus') 로 액티브 상태를 관리해,blur 라면 통지 타이밍으로 document.title 를 재기록.focus 때때로 제목을 기본값으로 되돌리면 알림용 파란색 원 아이콘을 낼 수 있습니다.focus 때로 타이틀을 되돌릴 필요는 얇게 느끼지만, 2번째의 통지로 동명 변경→아이콘 나오지 않는다고 싫기 때문에 되돌려 놓는 것이 길이라고 생각합니다.

    환경


  • Firefox 61
  • Windows 7


  • 비활성 탭에 변경이 있을 때 탭의 파비콘 아래에 파란색 원이 붙어 통지되는 방법을 구현하고 싶었다.



    내가 직접 만든 프로그램에서 일어난 범위 ​​내라면 비활성 상태에서 alert시에 발생했다.
    하지만, Slack이나 Twitter 등의 다른 서비스에서도 변경시에 통지되고 있었으므로, 그 방법을 알고 싶었다.

    조사해도 조사해도 애드온이나 파비콘의 재기록이나 특히 푸시 통지만으로 곤란했다.

    긴 처리의 완료 대기중을 다른 탭으로 브라우징하고 있을 때, 푸시 통지에서는 두껍고, alert에서는 OK가 귀찮다고 하는 속에서
    부드러운 아토모스피어를 느끼게 하는 이 테크닉은 실제로 중요.

    출처


  • 자바 스크립트 - 페이지를 고정 할 때만 가능한 푸시 알림이 아닌 알림을 만드는 방법 | teratail

  • 고마워… 고마워…
    결국 회답도 푸시 통지의 이야기만 되고 있습니다만, 질문자님이 자기 해결해 그것을 일부러 실어 준다고 하는 유능.
  • 고정된 탭 | Firefox 고객센터

  • 고정된 탭의 페이지 내용이 변경되면 파란색으로 빛나고 알림을 받습니다.

    「핀 고정」이 키워드라고 판명되면 곧 나왔습니다…
    「페이지의 내용이 변경」이 어느 정도인지 신경이 쓰이는 것입니다.

    의사 코드


    var active = false
    window.addEventListener('blur', e = > {
      active = false
    })
    window.addEventListener('focus', e = > {
      active = true
      document.title = originalTitle
    })
    function hoge() {
      // hogehoge
      if (!active) {
        document.title = document.title + '完了' // とか(1)とか
      }
    }
    
    

    기타


  • 탭에 파란색 원이 표시되는 것을 중지하고 싶습니다. - Google 제품 포럼
  • 오페라 탭의 아오마루 - 공식 사이트 어딘가에 썼습니다 ... - Yahoo! 지혜 가방
  • Chrome 북마크 탭의 푸른 원 - 브라우저 마감일 | 【OKWAVE】

  • 서로…

    좋은 웹페이지 즐겨찾기