47일차: 푸시 알림

오늘은 프로그레시브 웹 앱의 푸시 알림에 대해 알아보았습니다. 다음은 요약입니다.

훌륭한 푸시 알림은 시의적절하고(시간에 민감하며) 적절하고 정확해야 합니다.

주의: 사용자가 페이지와 상호작용한 후에는 항상 푸시 알림을 요청하세요.

notification API 또는 Push API 을 사용하여 푸시 알림을 보낼 수 있습니다.

알림은 서비스 작업자와 연결되어 있는지 여부에 따라 지속성 또는 비지속성일 수 있습니다.
비영구적 애플리케이션 생성.

let n = new Notification('Title', {options})

옵션은 본문부터 시작하여 다양한 속성이 될 수 있습니다.

let n = new Notification('Title', {
 body: 'body text';
})

몇 가지 일반적인 옵션에는 배지, 아이콘, 이미지, 태그(그룹 알림), renotify(부울), 작업, 사운드 등이 있습니다.

지속적인 알림 생성

self.addEventlisner('notificationclick', evt => { })

푸시 API 개요

푸시 구성은 VAPID 키로 페이지를 제공하고, pushManager.getSubscription()를 사용하여 기존 구독을 확인하고, pushManager.subscribe()를 사용하여 구독이 허용된 경우 사용자에게 권한을 요청합니다.

//subscribe a user
sw.pushManager
  .subscribe({
    userVisibleOnly: true,
    applicationServerKey:
      urlBase64ToUint8Array(publicKey)//user declared function to convert Url Base64 to Uint8 Array.
  })
  .then(subscription => { });

그리고 마지막으로 서버에 구독을 보냅니다.

메시지 보내기
메시지를 보내려면 암호화된 메시지를 생성해야 합니다. web-push-libs 을 사용할 수 있습니다. 메시지를 웹 서버로 보낸 다음 웹 서버에서 브라우저로 보냅니다.

메시지 수신
메시지를 수신하려면 푸시 이벤트를 처리하고 수신해야 합니다.

self.addEventListener('push', evt => { })

그런 다음 서비스 워커에서 self.register.showNotification를 사용하여 알림 표시를 호출하고 알림 클릭 이벤트를 처리합니다. Notification.close() 를 사용하여 알림을 닫는 것으로 시작하는 것이 좋습니다.

오늘은 여기까지입니다. 그것의 건축 부분을 기대하는 방법으로.
-47일차_