[PWA] 프로그레시브 웹 앱 시작하기 (6) - Push, 푸시 알림

[ 공지 ]

프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다!

 

현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며,

하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다.

 

(도서 소개 및 실습 미리보기)

https://geundung.dev/106

[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

 

 

 

SNS 앱 예제로 배우는 프로그레시브 웹 앱

 

(구매 링크 / 2020.07.31 출간)

[YES24]

[교보문고]

[알라딘]

[인터파크도서]

 

 

프로그레시브 웹 앱의 기본적인 내용부터 시작하여, 서비스 워커, 오프라인 캐싱, 백그라운드 동기화 및 푸시 알림까지

상세한 설명을 통해 프로그레시브 웹 앱에 대해 더 다가갈 수 있을 것입니다.

 

---

 

 

안녕하세요~

 

이번 강좌는 지난 강좌에 이어서 진행되는 과정입니다!

 

소스코드는 역시 지난번 과정부터 이어서 진행하기 때문에 미리 준비가 되어있어야합니다.

(또는 아래 저장소의 ch6 으로 사용)

 

 

https://github.com/leegeunhyeok/pwa-example

(다운로드 방법은 첫 번째 강좌 참조)

 

 

이번 강좌에서는 푸시 알림을 클릭했을 경우의 이벤트 처리와 푸시 알림을 구독취소하는 방법

그리고 브라우저 알림 권한을 확인하고 UI로 간단히 표현하는 기능에 대해 진행할 예정입니다!

 

 

[1. 푸시알림 클릭 이벤트]

 

푸시 알림이 오면 윈도우의 경우 위와 같은 모습으로 푸시 알림이 보여지게 됩니다.

 

스마트폰 앱의 메신저를 예로 들어보면, 나에게 메시지가 올 경우 푸시알림이 오게되고 우리는 주로 그 푸시 알림을 터치하여 앱을 실행시키게 됩니다.

 

PWA도 이와 마찬가지로 푸시알림을 클릭하면 지정한 URL로 웹 페이지를 띄워줄 수 있습니다.

 

 

이러한 시나리오는 사용자의 재참여율을 높일 수 있는 방법이기 때문에 중요하다고 볼 수 있습니다.

 

 

 

푸시의 클릭 이벤트는 비교적 간단하게 구현할 수 있습니다.

 

 

위와 같이 service-worker.js에 notificationclick 이벤트 리스너를 구현하기만 하면 됩니다.

 

푸시 알림을 클릭하면 띄워져있던 푸시 알림을 닫고,

브라우저에서 지정한 URL의 페이지를 열 수 있도록 하는 코드입니다.

 

간단하죠?

 

 

이러한 방식으로 알림을 클릭하면 우리의 서비스 도메인으로 쉽고 빠르게 접속할 수 있도록 구현할 수 있습니다!

 

 

---

[2. 푸시 알림 구독 취소]

 

서비스워커는 웹 브라우저가 닫혀있어도 백그라운드에서 돌며 푸시 알림을 받을 수 있습니다.

이러한 특징 덕분에 푸시를 쉽게 받아볼 수 있는데요

 

브라우저가 닫혀있는데 계속해서 푸시 알림이 전달된다면 사용자 입장에서 불쾌할 수 있습니다.

이러한 문제를 해결하기 위해 사용자가 원하는 시점에 푸시알림 구독을 취소할 수 있도록

관련 기능을 제공해주어야합니다.

 

 

그럼 푸시 구독 취소를 할 수 있도록 기능을 구현해봅시다!

 

app.js의 위와 같이 비어있는 unsubscribe 함수를 찾아주세요

 

이 함수에 구독 취소와 관련된 로직을 구현할 예정입니다.

 

 

구독 취소는 위와 같이 구현하실 수 있습니다.

 

지난번 강좌에서 비슷한 코드를 보셨을겁니다.

 

initPush 함수를 확인해보면 getSubscription() 을 통해 구독 정보를 가져오고

구독 정보가 있으면 구독 됨 상태, 구독 정보가 없으면 구독 안 됨 상태로 판단할 수 있었습니다.

 

구독 취소도 동일하게 구독 정보의 유무를 확인한 후

구독 정보 객체의 unsubscribe() 메서드를 통해 구독을 취소할 수 있습니다.

 

 

unsubscribe는 Boolean 값을 resolve하는 프라미스를 반환하며

구독 취소에 대한 성공 여부를 판단할 수 있습니다.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription/unsubscribe

PushSubscription.unsubscribe()

 

간단한 프라미스 체이닝으로 구독 취소 여부를 확인하는 코드로 작성되어있습니다.

 

구독이 정상적으로 취소되었다면, updateSubscription 함수에 null 값을 전달하고 구독 상태를 저장하는 상태변수 isSubscribed의 값을 false로 전환합니다.

 

마지막으로 updateButton을 호출하여 현재의 구독상태에 맞는 버튼 UI를 표현하도록 하고 있습니다.

 

 

 

작성한 코드를 모두 저장하고 결과를 확인해봅시다!

(리소스를 다시 캐싱하기 위해 캐시 스토리지를 지우거나 service-worker에서 캐시 버전을 변경해주세요!)

 

 

구독 취소 버튼을 누르면 웹 페이지에 처음 접속했을 때와 동일하게

푸시를 구독할 수 있도록 버튼이 변경됨을 확인하실 수 있습니다.

 

콘솔에서도 정상적으로 구독이 취소되었음을 알 수 있죠

 

 

지난 강좌와 동일하게 아래 페이지에서 푸시 알림을 전송해보세요!

(푸시알림 전송방법은 이전 강좌 참고)

 

https://web-push-codelab.glitch.me

Push Companion

구독을 취소하니 푸시알림도 안오고 조~용 합니다.

 

이처럼 사용자가 구독 취소를 원하는 경우가 있을 수 있으므로 기능을 미리 구현해두어야 합니다.

 

 

---

[3. 브라우저 알림 권한 확인]

 

 

푸시 알림을 제공하기 전에 우선 브라우저에서 사용자에게 권한을 물어봅니다.

 

여기서 사용자의 선택에 따라 푸시 알림을 제공하거나, 제공하지 못하거나 결정이 됩니다.

 

사용자가 푸시 권한을 브라우저단에서 차단한 경우 이를 확인하여 UI에 표현해주어야 합니다.

(혹시 잘못눌렀거나, 이후 다시 활성화 하고싶은 경우가 있을 수 있기 때문에)

 

 

 

 

현재 우리가 개발한 상태는 브라우저에서 푸시 권한을 차단해도 구독 활성화 버튼이 그대로 보이는 상황입니다.

하지만 버튼을 누른다고 해서 구독이 되진 않습니다.

 

만약 유저가 실수로 차단을 한 상태이고, 푸시 알림을 받아보려고 구독 활성화 버튼을 누르는데 반응은 없고 구독은 안된다면?

비록 사용자 실수였지만 인지하지 못할 수 있기 때문에 UI에서 차단되었다는 상황을 알려줄 필요가 있습니다.

 

 

 

다행히도 브라우저의 푸시알림 권한은 간단히 확인할 수 있으며 쉽게 조건으로 필터링할 수 있습니다.

 

기존의 updateButton에 위와 같이 코드를 추가해주세요!

 

브라우저의 푸시 권한은 Notification의 permission 프로퍼티를 통해 참조할 수 있습니다.

권한 상태에 따라 해당하는 상태 값이 문자열 형태로 저장되어있습니다.

간단히 조건문을 통해 문자열을 비교하기만 하면 권한을 쉽게 확인할 수 있죠

 

permission 값은 푸시 권한에 따라 총 3가지 값을 가지게 됩니다.

 

상태	값
기본	default
허용 됨	granted
차단 됨	denied

 

기본 상태는 아직 브라우저가 사용자에게 허용/차단 여부를 받지 않은 상태를 의미합니다.

 

권한 상태가 denied인 경우 버튼을 비활성화하고,

버튼의 텍스트를 변경하여 사용자에게 권한이 차단되었음을 알릴 수 있습니다.

 

차단된 상태를 UI로 표현함으로써 사용자가 이를 인지할 수 있습니다.

 

차단을 해제하는 방법에 대한 가이드도 웹 서비스에 추가로 제공해주면 Best practice가 되겠죠?

 

 

---

드디어 PWA에서의 Push를 간단히 구현해보았습니다!

 

이후 강좌에서는 Firebase + Node.js를 통해 푸시를 요청할 수 있는 애플리케이션 서버를 개발하고,

푸시알림을 받아볼 수 있도록 하는 간단한 SNS 예제를 알아보도록 하겠습니다

 

 

감사합니다!