머리말: 프론트엔드 개발자로서 웹서핑을 할 때 항상 눈에 띄는 참신한 기능이 있습니다. 직장에서 항상 Teambition을 사용하는 저에게는 항상 알림이 옵니다... 그래서 오늘은 이 H5 기능에 대해 공부하겠습니다...
1. 알림 인스턴스 let n = new 알림( 이것은 알림 메시지입니다. //표시될 필수 제목과 알림 제목입니다. { icon: xxx.png, // 이 아이콘은 알림 본문에 왼쪽 이미지를 표시하는 데 사용됩니다. 안녕하세요, 저는 xxx입니다. // 알림 디렉터리의 콘텐츠 문자: auto, // 텍스트의 방향 값에는 다음이 포함됩니다: auto(자동), ltr(왼쪽에서 오른쪽), rtl(오른쪽에서 왼쪽) 태그: gxlself / / 이 알림 메시지에 ID를 부여하고, 이 알림 메시지에 대한 새로 고침, 제거, 교체 및 기타 작업에 사용됩니다. // long: en-US //lang 필드는 https://tools.ietf.org/html/bcp47을 참조해야 합니다. 효과가 없습니다. .. // ... // 다른 선택적 속성은 아래 인스턴스 속성을 참조하세요.}) 해당 인스턴스 속성에 액세스합니다.n.actions //NotificationAction 객체의 읽기 전용 배열입니다. 각 개체는 사용자가 알림에서 선택할 수 있는 단일 작업을 설명합니다.
n.image // 알림의 일부로 표시되는 이미지의 URL
n.badge // 알림 자체를 표시할 공간이 부족할 때 알림을 표시하는 데 사용되는 이미지의 URL입니다.
n.permission // granted , denied , default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // 부울 값. 새 알림이 나타날 때 이전 알림을 바꿀지 여부입니다. true로 설정하면 교체를 의미하며, 이는 현재 표시에 대한 알림이 하나만 표시된다는 의미입니다. 여기에 현재 마크업이 표시되어 있습니까? 그렇습니다. true 매개변수가 작동하려면 tag必须.
n.requireInteraction // 부울 값, 자동으로 닫히는 대신 사용자가 알림을 클릭하거나 취소할 때까지 알림이 활성 상태로 유지되는지 여부를 나타냅니다.
n.silent // 부울 값. 알림이 나타날 때 소리가 나도록 할지 여부입니다. 기본값은 false , 이는 자동을 의미합니다.
n.timestamp //알림이 생성되거나 사용될 수 있는 시간입니다.
n.data // 알림과 관련된 모든 유형의 데이터입니다.
n.vibrate // 알림이 표시되면 기기 진동 하드웨어에 필요한 진동 모드입니다. 소위 진동 모드는 진동 및 비진동의 밀리초 수를 각각 나타내며 계속해서 교번하는 교번 시간을 설명하는 배열을 나타냅니다. 예를 들어, [200, 100, 200]은 장치가 200밀리초 동안 진동한 다음 100밀리초 동안 멈춘 다음 200밀리초 동안 진동한다는 의미입니다. (모바일 버전)
n.sound // 문자열. 오디오 주소. 재생할 사운드 리소스가 있다는 알림을 나타냅니다.
n.sticky // 알림 흡착이 지워지기 쉽지 않네요... (모바일 버전)
n.noscreen // 불리언 값. 화면에 알림 정보 표시를 중지할지 여부입니다. 기본값은 false 입니다. 이는 알림 내용이 화면에 표시되어야 함을 의미합니다. (모바일 버전)
1> 알림 정보에 대한 onclick 사용자의 클릭 이벤트
2> 알림 메시지가 표시된 후 onshow 이벤트가 트리거됩니다.
3> onerror는 오류가 발생할 때 트리거되는 이벤트입니다.
4> onclose 이벤트 처리
2. 알림 개체에는 어떤 속성/메서드가 있습니까? 콘솔의 창 개체 출력을 사용하여 열고 확인하세요.requestPermission() 메소드는 인스턴스 객체가 아닌 알림 객체에서만 유효하다는 점에 주목할 가치가 있습니다!!! 이 메소드는 사용자에게 알림 표시 권한을 적용하는 데 사용되며 사용자가 적극적으로 호출할 수 있습니다( 페이지 onload에서 호출할 수 있으며, 사용자에게 적용하고 나중에 보낼 수 있습니다...)
인스턴스 객체가 소유하는 메서드는 다음과 같습니다.
(1) close()는 알림 메시지를 닫는 데 사용됩니다. --> 사용자 경험을 개선하기 위해 onshow 메서드에 지연된 호출을 추가할 수도 있습니다.
(2) addEventListener()는 이벤트를 수신합니다(이 일반 메소드).
(3).removeEventListener는 청취 이벤트를 제거합니다(일반, 위와 동일).
(4).dispatchEvent 전달 이벤트 (위와 동일)
다음으로 js 테스트를 작성합니다. Google Chrome을 사용하는 경우 설정에서 알림을 표시하고 알림을 허용하도록 로컬 서비스 주소를 추가하는 것이 좋습니다.
그러나 http 도메인 이름은 Google Chrome에서 기본적으로 닫혀 있으며 변경이 허용되지 않습니다. Google Chrome 콘솔에서 경고 메시지를 확인하세요. --->
index.js:78 [지원 중단] 알림 API는 더 이상 안전하지 않은 출처에서 사용될 수 있습니다. 자세한 내용은 https://goo.gl/rStTGz를 참조하세요.
글쎄요, https 인증서를 추가하는 것은 정말 해롭습니다... 이 기능을 홈페이지에 추가하는 것은 Firefox에서만 즐거울 수 있지만...
(Tencent Cloud에는 1년 무료 SSL 인증서가 있으므로 직접 설치할 수 있습니다...)
// index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ constructor(){ this. isNotificationSupported = 창의 알림 } isPermissionGranted(){ returnNotification.permission === '허가됨'; } requestPermission(){ if(!this.isNotificationSupported){ return; }Notification.requestPermission(status=>{ let 허가 =Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) 반환; } if (!this.isPermissionGranted()) { 반환 } var n = new; Notion(gxlself가 여러분에게 인사드립니다. { icon : 'gxlself.png', body : '방문해주셔서 정말 감사드립니다! 클릭하시면 제 블로그 페이지로 이동합니다~' }); .log('gxlself가 알림 정보를 보냈습니다.'); setTimeout(function() { n.close(); }, 5000) } n.onclick = function () { location.href = 'http://gxlself.com/blog' n.close() } n.onerror = 함수(err) { console.log(err) } n.onclose = 함수() { console.log(' gxlself 메시지 창이 닫혔습니다.') } } }Firefox 브라우저가 실행된 후의 효과 표시는 다음과 같습니다.
Google을 로컬에서 실행했을 때의 효과를 살펴보겠습니다. (도메인 이름은 기본적으로 차단되어 비활성화되어 있습니다. 위에서 설명했으므로 반복하지 않겠습니다.)
구글의 효과는 사실 꽤 좋은데 뭐... 그냥 https가 나를 차단한 것 뿐인데...
------- 데스크탑 앱 -----------
열려 있는 웹 애플리케이션에서 알림을 사용하려면 매니페스트 파일에 desktop-notification 권한을 추가해야 합니다. 알림은 호스팅 이상의 모든 권한 수준에서 사용할 수 있습니다.
권한: { 데스크탑 알림:{} }이 알림이 더 재미있고, 앞으로 메시지를 보내는 중요한 부분이기도 합니다. 이 기록을 남겨주세요... 모든 분들의 학습에 도움이 되기를 바라며, 또한 모든 분들이 VeVb Wulin Network를 응원해 주시길 바랍니다.