
310 - 프로그레시브 웹 앱
고담 임페리얼 호텔에서 보낸 메시지는 다음 구조를 가지고 있습니다.
{
"
type
":
"
reservation
-
confirmation
",
"
reservation
":
{
"
id
":
"
79212418
",
"
arrivalDate
":
"
November 5th 2022
",
"
nights
":
"
3
",
"
guests
":
"
2
",
"
status
":
"
Confirmed
",
"
bookedOn
":
"
2016
-
10
-
31T15
:
40
:
41
+
02
:
00
",
"
price
":
636
}
}
푸시 메시지 데이터를
type
과
reservation
객체로 구조화한 것은 완전히 임의적
인 선택입니다.
type
없이 구조화 시킬 수도 있습니다. 전체 메시지를 최종 알림 텍스
트가 담긴 간단한 문자열로 만들 수도 있고, 서비스 워커에서 파싱하고
IndexedDB
에서 해당
ID
에 대한 예약 세부 정보를 가져오도록 "
reservationconfirmati
on
,
79212418
"와 같은 문자열로 만들 수도 있습니다.
새로운 이벤트 핸들러 코드를 더 자세히 살펴보겠습니다.
먼저 ‘
push
’ 이벤트 리스너 코드는 푸시 이벤트를 완료하기 전에,
event
.
waitUntil()
를 사용하여
IndexedDB
업데이트와 알림을 표시하기 위한 코드
가 성공적으로 완료될 때까지 기다립니다.
3