탭 알림 알림 파란색 원형 JavaScript 방법 비활성 제목 변경 감지
결론
document.title
를 다시 쓸 수 있습니다 document.title
또는 alert
에는 JS를 사용하지만)구구리 힘이 시험되어 지쳤다.
고정 상태 한정이라는 것을 이해하지 못했기 때문에, 거기를 이해하고 검색 키워드를 더하면 빨랐을 것이다.
사양에 자세한 쪽이 계시면 정보원등을 가르쳐 주면 도움이 됩니다.
(그 밖에도 로드 완료 등 통지 타이밍은 여러가지 있을 것 같습니다만, 검증은 힘들므로 문서를 원한다)
통지를 위한 구현으로서는
window.addEventlister('blur')
, window.addEventlister('focus')
로 액티브 상태를 관리해,blur
라면 통지 타이밍으로 document.title
를 재기록.focus
때때로 제목을 기본값으로 되돌리면 알림용 파란색 원 아이콘을 낼 수 있습니다.focus
때로 타이틀을 되돌릴 필요는 얇게 느끼지만, 2번째의 통지로 동명 변경→아이콘 나오지 않는다고 싫기 때문에 되돌려 놓는 것이 길이라고 생각합니다.환경
비활성 탭에 변경이 있을 때 탭의 파비콘 아래에 파란색 원이 붙어 통지되는 방법을 구현하고 싶었다.
내가 직접 만든 프로그램에서 일어난 범위 내라면 비활성 상태에서 alert시에 발생했다.
하지만, Slack이나 Twitter 등의 다른 서비스에서도 변경시에 통지되고 있었으므로, 그 방법을 알고 싶었다.
조사해도 조사해도 애드온이나 파비콘의 재기록이나 특히 푸시 통지만으로 곤란했다.
긴 처리의 완료 대기중을 다른 탭으로 브라우징하고 있을 때, 푸시 통지에서는 두껍고, alert에서는 OK가 귀찮다고 하는 속에서
부드러운 아토모스피어를 느끼게 하는 이 테크닉은 실제로 중요.
출처
고마워… 고마워…
결국 회답도 푸시 통지의 이야기만 되고 있습니다만, 질문자님이 자기 해결해 그것을 일부러 실어 준다고 하는 유능.
고정된 탭의 페이지 내용이 변경되면 파란색으로 빛나고 알림을 받습니다.
「핀 고정」이 키워드라고 판명되면 곧 나왔습니다…
「페이지의 내용이 변경」이 어느 정도인지 신경이 쓰이는 것입니다.
의사 코드
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)とか
}
}
기타
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)とか
}
}
서로…
Reference
이 문제에 관하여(탭 알림 알림 파란색 원형 JavaScript 방법 비활성 제목 변경 감지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/khsk/items/215cf51064be6ac3a513텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)