만들면서 배우는 프로그레시브 웹 앱: 사용자 경험을 극대화하는 차세대 웹 앱 기술

298 - 프로그레시브 웹 앱

이 시점에서는

Ajax

나

fetch

호출을 사용하여 구독 객체를 앱 서버에 전송하고

나중에 사용하기 위해 저장할 수 있습니다.

이제 어떻게 새로운 구독을 시작할 수 있는지 이해했으니, 앱에서 직접 구현해봅

시다.

10

.

3

.

4

고담 임페리얼 호텔에서 푸시 메시지 구독하기

이 장의 앞부분에서 고담 임페리얼 호텔 앱에 알림 지원을 추가했습니다. 사용자

가 예약을 하자마자 사용자에게 알림을 표시하기 위한 권한을 요청했습니다.

이제 알림 권한을 부여한 사용자를 위해 푸시 메시지를 구독하고, 구독 정보를 서

버에 저장하도록 코드를 수정하겠습니다.

my

-

account

.

js

의

offerNotification()

함수를 변경하세요.

var offerNotification

=

function

()

{

if

("

Notification

"

in window

&&

"

PushManager

"

in window

&&

"

serviceWorker

"

in navigator

)

{

subscribeUserToNotifications

();

}

};

offerNotification()

에 두 가지 수정 사항을 반영했습니다. 첫 번째, 브라우

저에서

PushManager

를 지원하는지 확인하기 위해

if

문을 하나 더 추가했습니

다. 두 번째, 알림 권한을 요청하는 로직과 푸시 이벤트를 ...