푸시 이벤트

지금까지 사용자 구독과 푸시 메시지 전송에 관해 알아보았습니다. 다음 단계는 사용자의 기기에서 이 푸시 메시지를 수신하고 알림을 표시할 뿐 아니라 하고 싶습니다.

푸시 이벤트

메시지가 수신되면 푸시 이벤트가 서비스 워커에 전달됩니다.

푸시 이벤트 리스너를 설정하는 코드는 다른 이벤트와 매우 유사해야 합니다. 리스너입니다.

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

서비스 워커를 처음 접하는 대부분의 개발자에게 이 코드의 가장 이상한 부분은 self입니다. 변수의 값을 지정합니다. self는 일반적으로 서비스 워커인 웹 워커에서 사용됩니다. self는 다음을 나타냅니다. 전역 범위(예: 웹페이지의 window) 그러나 웹 작업자와 서비스 작업자의 경우 self는 작업자 자체를 나타냅니다.

위의 예에서 self.addEventListener()는 서비스 워커 자체의 역할을 합니다

푸시 이벤트 예시 내에서 데이터가 있는지 확인하고 콘솔에 무언가를 출력합니다.

푸시 이벤트에서 데이터를 파싱하는 다른 방법은 다음과 같습니다.

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

대부분의 사용자는 애플리케이션에서 기대하는 내용에 따라 json() 또는 text()를 사용합니다.

이 예에서는 푸시 이벤트 리스너를 추가하는 방법과 데이터에 액세스하는 방법을 보여주지만 두 가지 매우 중요한 기능이 누락되었을 수 있습니다. 이것은 알림을 표시하지 않고 event.waitUntil()를 사용하지 않음

대기 시간

서비스 워커에 대해 알아야 할 것 중 하나는 서비스가 실행 중일 때 서비스 워커 코드가 실행될 것입니다 브라우저에서 절전 모드 해제 시간과 해제 시간을 결정합니다. 종료할 수 있습니다 사용자가 항목'은 프로미스를 event.waitUntil() 메서드에 전달하는 것입니다. 이렇게 하면 브라우저에서 전달한 프라미스가 해결될 때까지 서비스 워커를 계속 실행시켜야 합니다.

푸시 이벤트의 경우 자네가 전달한 약속은 이제 됐어.

다음은 알림을 표시하는 기본적인 예입니다.

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

self.registration.showNotification() 호출은 알림을 표시하는 메서드입니다. 알림을 표시하고 나면 확인될 프라미스를 반환합니다.

이 예를 최대한 명확하게 설명하기 위해 이 약속을 promiseChain라는 변수가 포함되어 있습니다. 그런 다음 event.waitUntil()에 전달됩니다. 알고 있습니다. 너무 장황했지만, 그 결과로 극심한 많은 문제들을 waitUntil()에 전달되어야 하는 내용을 잘못 이해하거나 프라미스가 깨진 결과 있습니다.

데이터에 대한 네트워크 요청과 분석은 다음과 같이 표시될 수 있습니다.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

여기서는 pushReceivedTracking() 프로미스를 반환하는 함수를 호출합니다. 이 예를 들어, 네트워크 요청을 하는 것처럼 Google 애널리틱스 제공업체에 전송합니다 또한, 네트워크 요청을 만들어서 제목의 응답 데이터를 사용하여 알림을 표시하고 메시지가 표시됩니다.

이 두 작업이 모두 수행되는 동안 서비스 워커가 활성 상태로 유지되도록 하려면 Promise.all()로 이러한 프로미스를 살펴보겠습니다. 결과 프로미스는 event.waitUntil()에 전달됩니다. 브라우저가 두 프라미스가 완료될 때까지 기다렸다가 알림을 서비스 워커를 종료합니다.

waitUntil()에 대해 우려해야 하는 이유와 그 사용 방법은 개발자들이 직면하는 일반적인 문제는 프라미스 체인이 잘못되었거나 끊어지면 Chrome이 이 '기본값'을 표시합니다 있습니다.

Chrome의 기본 알림 이미지

Chrome에는 '이 사이트는 백그라운드에서 업데이트되었습니다'만 표시됩니다. 알림을 받는 경우 푸시 메시지가 수신되고 서비스 워커의 푸시 이벤트가 수신된 메시지를 표시하지 않는 event.waitUntil()에 전달된 프라미스가 완료된 후 알림을 받습니다.

개발자가 여기에 걸리게 되는 주된 이유는 코드가 종종 self.registration.showNotification()를 호출하지만 그렇게 하고 있지 않습니다. 어떤 것이든 반환하는 것입니다. 이로 인해 간헐적으로 기본 알림이 표시됩니다. 있습니다. 예를 들어 self.registration.showNotification()로 설정되어 있으므로 이 오류가 발생할 위험이 있습니다. 있습니다.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

이를 간과하기 쉽다는 것을 알 수 있습니다.

이 알림이 표시되면 프라미스 체인과 event.waitUntil()를 확인하세요.

다음 섹션에서는 알림의 스타일을 지정하고 지정할 수 있습니다.

다음에 수행할 작업

Codelab