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

2 당신의 첫 번째 서비스 워커

- 049

페리얼 호텔의 개인화된 에러 메시지가 나타날 겁니다

(

그림

2

-

8)

.

그림

2

-

8

간단한 오프라인 텍스트 메시지

우선, 메시지에 몇 가지 포맷을 적용한 후 코드를 차근차근 살펴보겠습니다.

2.10

HTML Response 생성하기

오프라인 상태에서 단순한 텍스트로 이루어진 오류 페이지로 웹을 퇴보시키는 대

신 우아한

HTML

페이지를 전송하도록 코드를 수정해 봅시다.

serviceworker

.

js

의 코드를 다음과 같이 수정합니다.

var responseContent

=

"<

html

>"

+

"<

body

>"

+

"<

style

>"

+

"

body

{

text

-

align

:

center

;

background

-

color

:

#

333

;

color

:

#

eee

;}"

+

"</

style

>"

+

"<

h1

>

Gotham Imperial Hotel

</

h1

>"

+

"<

p

>

There seems to be a problem with your connection

.</

p

>"

+

"<

p

>

Come visit us at 1 Imperial Plaza

,

Gotham City for free WiFi

.</

p

>"

+

"</

body

>"

+

050 - 프로그레시브 웹 앱

"</

html

>";

self

.

addEventListener

("

fetch

",

function

(

event ...