이 페이지는 Cloud Translation API를 통해 번역되었습니다.

오픈 웹의 푸시 알림

Matt Gaunt

개발자들에게 이 기능에는 어떤 휴대기기 기능이 누락되어 있는지 물으면 웹에서는 푸시 알림이 항상 목록에서 가장 높습니다.

푸시 알림을 사용하면 사용자가 사이트의 최신 업데이트를 받도록 선택할 수 있습니다. 관심을 끌 수 있는 맞춤 콘텐츠로 효과적으로 재참여를 유도할 수 있습니다.

Chrome 버전 42부터 Push API 및 Notification API는 있습니다.

Chrome의 Push API는 웹 앱 매니페스트 및 서비스 워커를 참조하세요. 이 게시물에서는 이러한 기술을 각각 하나씩 살펴보겠지만 푸시 메시지를 실행할 수 있습니다 이러한 계층 구조를 이해하기 위해 매니페스트의 다른 기능과 서비스 워커의 오프라인 기능을 위의 링크를 확인하세요.

또한 향후 Chrome 버전에서 API에 어떤 기능이 추가될지도 알아볼 것입니다. 마지막으로 FAQ가 있습니다.

Chrome용 푸시 메시지 구현

이 섹션에서는 푸시를 지원하기 위해 완료해야 하는 각 단계를 설명합니다. 메시지를 작성할 수 있습니다.

서비스 워커 등록

푸시 메시지를 구현하기 위해 서비스 워커가 있어야 하는 것은 있습니다. 그 이유는 푸시 메시지가 수신될 때 브라우저에서 서비스 워커를 시작할 수 있으며, 이 서비스 워커는 백그라운드에서 실행되는 처리할 방법을 결정할 수 있도록 이벤트를 전달하는 것입니다. 푸시 메시지를 보냅니다

다음은 웹 앱에서 서비스 워커를 등록하는 방법의 예입니다. 날짜 등록이 성공적으로 완료되면 initialiseState()를 호출합니다. 곧 다루겠습니다

var isPushEnabled = false;

…

window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

버튼 클릭 핸들러는 사용자의 푸시 메시지를 구독하거나 구독을 취소합니다. isPushEnabled는 푸시 여부를 추적하는 전역 변수입니다. 메시지를 현재 구독 중인지 여부를 나타냅니다. 이러한 내용은 코드 스니펫입니다.

그런 다음 service-worker.js를 등록하기 전에 서비스 워커가 지원되는지 확인합니다. 이 파일에는 푸시 메시지를 처리하는 로직이 있습니다. 여기서는 단순히 브라우저에 이 JavaScript 파일이 서비스 워커라고 하고 있습니다.

초기 상태 설정

서비스 워커가 등록되면 UI의 상태를 설정해야 합니다.

사용자는 사이트에서 푸시 메시지를 사용 또는 사용 중지할 수 있는 간단한 UI를 기대합니다. 사용자는 변경사항이 발생하는 경우 항상 최신 정보를 반영하기를 기대합니다. 기타 사이트에 대한 푸시 메시지를 사용할 수 있게 하는 경우 푸시 메시지가 이미 활성화되어 있음을 UI에 강조표시해야 합니다.

이 문서의 UX 가이드라인 이 도움말에서는 기술적인 측면에 초점을 맞춥니다.

이 시점에서 처리해야 할 두 가지 상태만 있다고 생각할 수 있습니다. 사용 또는 사용 중지합니다. 하지만 뉴런을 둘러싸고 있는 몇 가지 중요한 알림이 있습니다

버튼을 사용 설정하기 전에 확인해야 할 여러 API가 있습니다. 모든 것이 지원되면 UI를 사용 설정하고 초기 상태를 푸시 메시지를 구독 중인지 여부를 나타냅니다.

대부분의 검사에서 UI가 사용 중지되므로 초기 상태를 사용 중지로 설정합니다. 이렇게 하면 문제가 발생했을 때 페이지의 자바스크립트와 관련된 문제일 수 있습니다. 예를 들어 JS 파일은 사용자가 자바스크립트를 사용 중지했을 수 있습니다.

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

이 초기 상태에서는 위에서 설명한 확인 작업을 수행할 수 있습니다. initialiseState() 메서드(서비스 워커가 등록된 후)를 호출하세요.

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

각 단계에 대한 간략한 개요:

ServiceWorkerRegistration에서 showNotification를 사용할 수 있는지 확인합니다. 프로토타입을 제작합니다. 이것이 없으면 서비스 워커의 알림을 표시할 수 없습니다. 푸시 메시지를 수신할 때
Google은 현재 Notification.permission가 무엇인지 확인하여 다음과 같은 문제가 아닌지 확인합니다. "denied"입니다. 권한이 거부되면 알림을 표시할 수 없습니다. 사용자가 브라우저에서 권한을 수동으로 변경할 때까지 계속 유지됩니다.
푸시 메시지가 지원되는지 확인하려면 PushManager가 사용할 수 있습니다.
마지막으로 pushManager.getSubscription()를 사용하여 구독 여부 등이 있습니다 Google에서는 구독 세부정보를 올바른 정보를 포함하도록 하고 UI를 설정하여 확인할 수 있습니다 이 과정에서 어떤 세부정보가 구독 객체에 존재합니다.

navigator.serviceWorker.ready이(가) 해결될 때까지 기다린 다음 푸시 버튼을 활성화해야 합니다. 실제로 푸시 메시지를 구독할 수 있는 활성 상태인지 확인합니다.

다음 단계는 사용자가 푸시 메시지를 사용 설정하려고 할 때를 처리하는 것이지만, 그러려면 먼저 Google Developer Console 프로젝트를 매니페스트에 몇 가지 매개변수를 추가하여 Firebase 클라우드 메시징 (FCM) 사용 이전의 Google 클라우드 메시징 (GCM)

Firebase 개발자 콘솔에서 프로젝트 만들기

Chrome은 FCM을 사용하여 푸시 메시지의 전송 및 전송을 처리합니다. 그러나 FCM API를 사용하려면 Firebase Developer Console에서 프로젝트를 설정해야 합니다.

다음 단계는 Chrome, Android용 Opera, 삼성에만 적용됩니다. FCM을 사용하는 브라우저입니다. 다른 브라우저에서는 어떻게 작동하는지 이 도움말의 뒷부분에서 설명하겠습니다.

새 Firebase 개발자 프로젝트 만들기

시작하려면 https://console.firebase.google.com/에서 새 프로젝트를 만들어야 합니다. '새 프로젝트 만들기'를 클릭하면 됩니다.

새 Firebase 프로젝트 스크린샷

프로젝트 이름을 추가하고 프로젝트를 만들면 해당 프로젝트로 이동합니다. 대시보드:

Firebase 프로젝트 홈

이 대시보드에서 상단의 프로젝트 이름 옆에 있는 톱니바퀴 아이콘을 클릭합니다. 왼쪽 모서리에 있는 '프로젝트 설정'을 클릭합니다.

설정 페이지에서 '클라우드 메시징' 탭

Firebase 프로젝트 클라우드 메시징 메뉴

이 페이지에는 나중에 사용할 푸시 메시징용 API 키가 포함되어 있습니다. 다음 단계에서 웹 앱 매니페스트에 입력해야 하는 발신자 ID를 섹션으로 이동합니다.

웹 앱 매니페스트 추가

푸시하려면 gcm_sender_id 필드가 있는 매니페스트 파일을 추가해야 합니다. 푸시 구독이 성공할 수 있습니다 이 매개변수는 FCM / GCM을 사용할 수 있도록 Chrome, Opera for Android, 삼성 브라우저를 사용해야 합니다.

gcm_sender_id는 사용자를 구독할 때 이러한 브라우저에서 사용합니다. 기기를 사용해야 합니다. 즉, FCM이 사용자의 기기를 식별하고 발신자 ID가 해당 API 키와 일치하고 사용자가 서버가 푸시 메시지를 보내도록 허용했습니다.

다음은 매우 간단한 매니페스트 파일입니다.

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

gcm_sender_id 값을 발신자 ID로 설정해야 합니다. Firebase 프로젝트

프로젝트에 매니페스트 파일을 저장한 후 (manifest.json이 좋습니다. 헤드에 다음 태그를 추가하여 HTML에서 이를 참조합니다. 있습니다.

<link rel="manifest" href="/manifest.json">

이러한 매개변수를 사용하여 웹 매니페스트를 추가하지 않으면 예외가 발생합니다. 사용자가 푸시 메시지를 수신하려고 시도할 때 "Registration failed - no sender id provided" 또는 "Registration failed - permission denied"

푸시 메시지 구독

이제 매니페스트를 설정했으므로 사이트의 JavaScript로 돌아갈 수 있습니다.

구독하려면 구독에서 subscribe() 메서드를 호출해야 합니다. PushManager 객체 사용자는 ServiceWorkerRegistration입니다.

사용자에게 푸시를 전송할 수 있는 권한을 원본에 부여하도록 요청합니다. 있습니다. 이 권한이 없으면 성공적으로 수행할 수 없습니다. 구독하세요.

프로미스가 반환되면 subscribe() 메서드가 해결되면 PushSubscription 엔드포인트를 포함할 객체입니다.

각각에 대해 엔드포인트가 서버에 저장되어야 합니다. 나중에 푸시 메시지를 보내야 하므로

다음 코드는 사용자의 푸시 메시지를 구독합니다.

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

이 시점에서 웹 앱은 푸시 메시지를 수신할 준비가 된 것이지만 푸시 이벤트 리스너를 서비스 워커 파일에 추가할 때까지 발생할 수 있습니다.

서비스 워커 푸시 이벤트 리스너

푸시 메시지가 수신될 때 (푸시를 실제로 전송하는 방법에 대해 설명하겠습니다.) 메시지), 푸시 이벤트 서비스 워커에서 전달되며 이때 필요한 알림을 표시합니다.

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

이 코드는 푸시 이벤트 리스너를 등록하고 사전 정의된 제목, 본문 텍스트, 아이콘, 알림 태그가 포함되어 있습니다. 이 예에서 강조해야 할 미묘한 한 가지는 event.waitUntil()입니다. 메서드를 사용하여 축소하도록 요청합니다. 이 메서드는 promise를 포함하고 이벤트 핸들러의 수명 (또는 서비스를 프라미스가 해제될 때까지 확정됨, 이 경우 event.waitUntil에 전달된 프로미스는 반환된 프로미스입니다. showNotification()부터

알림 태그는 고유 알림의 식별자입니다. 두 개의 푸시 메시지를 짧은 지연 시간을 두고 알림을 표시하며 을 호출하면 브라우저에서 첫 번째 알림을 표시하고 두 번째 알림을 받게 됩니다.

한 번에 여러 알림을 표시하려면 다른 태그를 사용합니다. 태그가 전혀 없습니다. 알림을 표시하는 더 완전한 예는 이 모듈의 뒷부분에서 살펴보겠습니다. 게시물 지금은 간단하게 푸시 메시지를 보낼 때 확인할 수 있습니다

푸시 메시지 보내기

푸시 메시지를 구독했고 서비스 워커는 알림을 받으면 FCM을 통해 푸시 메시지를 보낼 차례입니다.

이는 FCM을 사용하는 브라우저에만 적용됩니다.

PushSubscription.endpoint 변수를 서버에 전송하면 엔드포인트는 특별합니다 URL 끝에는 registration_id입니다.

엔드포인트의 예는 다음과 같습니다.

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

FCM URL은 다음과 같습니다.

https://fcm.googleapis.com/fcm/send

registration_id는 다음과 같습니다.

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

이는 FCM을 사용하는 브라우저에만 적용됩니다. 일반 브라우저에서는 엔드포인트를 얻기만 하면 그 엔드포인트를 표준 방식으로 호출하고 URL에 관계없이 작동합니다.

즉, 서버에서 엔드포인트가 유효한지 FCM용이고, 해당하는 경우 register_id를 추출합니다. Python에서 이 작업을 수행하려면 다음과 같은 작업을 할 수 있습니다.

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

등록 ID를 받으면 FCM API를 호출할 수 있습니다. 나 여기에서 FCM API에 관한 참조 문서를 확인할 수 있습니다.

FCM을 호출할 때 기억해야 할 주요 사항은 다음과 같습니다.

값이 key=<YOUR_API_KEY>인 Authorization 헤더 API를 호출할 때 설정해야 합니다. 여기서 <YOUR_API_KEY>는 Firebase 프로젝트의 API 키입니다.
- FCM에서 API 키를 사용하여 적절한 발신자 ID를 찾습니다. 사용자가 프로젝트에 대한 권한을 부여했으며 서버의 IP 주소가 해당 프로젝트의 허용 목록에 있는지 확인
application/json의 적절한 Content-Type 헤더 또는 application/x-www-form-urlencoded;charset=UTF-8에 따라 JSON 또는 양식 데이터로 데이터를 전송합니다
registration_ids의 배열 - 발생하는 등록 ID입니다. 사용자의 엔드포인트에서 추출해야 합니다

문서를 확인하세요. 서버에서 푸시 메시지를 보내는 방법, 서비스 워커를 빠르게 확인하려면 cURL 브라우저에 푸시 메시지를 보냅니다.

<YOUR_API_KEY> 및 <YOUR_REGISTRATION_ID> 바꾸기 이 cURL 명령어에 추가하고 터미널에서 실행합니다.

멋진 알림이 표시됩니다.

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"

백엔드 로직을 개발할 때는 승인 헤더와 형식은 FCM 엔드포인트에 따라 다르므로 엔드포인트가 FCM용이고, 조건부로 헤더를 추가하고 POST 본문의 형식을 지정합니다. 다른 브라우저 (향후 Chrome에서도 가능)의 경우 웹 푸시 프로토콜

현재 Chrome에서 구현되는 Push API의 단점은 푸시 메시지로 데이터를 보낼 수 없습니다. 아닙니다. 이렇게 하는 이유는 페이로드 데이터는 푸시 메시징 엔드포인트로 전송되기 전에 이렇게 하면 어떤 푸시 제공자를 사용하든지 간에 푸시 메시지를 보냅니다 이는 또한 네트워크 보안을 강화하기 위해 중간자 공격에 대한 확인을 서버 및 푸시 제공자입니다 하지만 이 암호화는 아직 지원되지 않으므로 그 동안은 데이터 가져오기에 필요한 정보를 알림을 채울 수 있습니다.

더 완전한 푸시 이벤트 예시

지금까지 본 알림은 매우 기본적이며 샘플에 관한 한 실제 사용 사례를 다루는 데에는 별로 좋지 않습니다.

현실적으로 대부분의 사용자는 서버에서 몇 가지 정보를 얻고자 합니다. 체크합니다. 이는 알림 제목 및 메시지를 특정 내용으로 표시하거나 한 단계 더 나아가기 일부 페이지나 데이터를 캐싱하여 사용자가 알림을 클릭할 때 브라우저가 열릴 때 모든 것을 즉시 사용할 수 있습니다. 네트워크를 사용할 수 없습니다.

다음 코드에서는 API에서 데이터를 가져와 응답을 객체를 사용하여 알림을 채웁니다.

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

다시 한 번 event.waitUntil()가 프라미스를 사용한다는 점을 강조할 가치가 있습니다. 이는 showNotification()에서 반환하는 프로미스를 반환합니다. 비동기 fetch() 호출이 완료될 때까지 이벤트 리스너가 종료되지 않음 알림이 표시됩니다.

오류가 있어도 알림이 표시됩니다. 이것은 표시하지 않으면 Chrome이 자체적인 일반 알림을 표시하기 때문입니다.

사용자가 알림을 클릭할 때 URL 열기

사용자가 알림을 클릭하면 notificationclick 이벤트가 전달됩니다. 서비스 워커에서 시작됩니다 핸들러 내에서 적절한 작업을 수행할 수 있습니다. 예를 들어 탭에 포커스를 두거나 특정 URL로 창을 여는 등의 작업을 할 수 있습니다.

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

이 예에서는 기존 same-origin 탭이 있는 경우 해당 탭을 열고 그렇지 않으면 새 탭을 엽니다.

여기에 Notification API로 할 수 있는 작업과 관련된 게시글이 있습니다.

사용자 기기 구독 취소

사용자의 기기를 구독하고 사용자가 푸시 메시지를 받고 있습니다. 그런데 어떻게 해야 할까요? 구독을 취소하시겠습니까?

사용자 기기의 구독을 취소하는 데 필요한 주요 작업은 unsubscribe() 메서드를 PushSubscription 서버에서 엔드포인트를 수신되지 않을 것이라는 푸시 메시지 전송). 아래 코드는 정확히 다음과 같습니다.

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

구독을 최신 상태로 유지

FCM과 서버 간에 구독이 동기화되지 않을 수 있습니다. 서버가 FCM API의 전송 POST의 응답 본문을 파싱하여 FCM 문서에 설명된 대로 error:NotRegistered 및 canonical_id 결과

서비스 워커와 사용자 서비스 간의 구독이 동기화되지 않을 수도 있습니다. 예를 들어 구독/구독 취소에 성공하면 비정상적으로 네트워크 연결로 인해 서버를 업데이트하지 못할 수 있습니다. 또는 사용자가 알림 권한을 취소할 수 있습니다. 핸들 검사 결과를 확인하여 주기적으로 serviceWorkerRegistration.pushManager.getSubscription() (예: 서버와 동기화합니다. 또한 더 이상 구독하지 않는 경우 자동으로 다시 구독합니다. Notification.permission == 'granted'입니다.

sendSubscriptionToServer()에서는 endpoint 업데이트 중 네트워크 요청이 실패했습니다. 한 가지 솔루션은 쿠키에서 endpoint의 상태 추적 를 사용하여 서버에 최신 세부정보가 필요한지 여부를 판단합니다.

위의 모든 단계를 수행하면 웹 버전입니다 작업을 더 쉽게 하도록 지정된 기능은 계속 있습니다. (푸시 메시지를 트리거하기 위한 표준 API와 같은)이지만, 이 릴리스를 사용하면 지금 바로 웹 앱에 푸시 메시지를 빌드해 보세요.

웹 앱을 디버그하는 방법

푸시 메시지를 구현하는 동안 버그는 페이지 또는 서비스 워커가 있습니다

페이지의 버그는 DevTools. 서비스 워커를 디버그하는 방법 다음과 같은 두 가지 옵션이 있습니다.

chrome://inspect >로 이동합니다. 서비스 워커. 이 뷰에서는 현재 실행 중인 서비스 워커 이외의 많은 정보를 수집합니다.
chrome://serviceworker-internals로 이동하면 여기에서 서비스 워커의 상태를 확인하고 오류가 있는 경우 오류를 확인할 수 있습니다. 이 페이지는 DevTools에 유사한 기능 세트가 있을 때까지 임시로 처리됩니다.

서비스 워커를 처음 접하는 모든 사람에게 줄 수 있는 최고의 팁 중 하나는 "DevTools 창을 열고 JavaScript 실행을 일시 중지"라는 체크박스 사용 '서비스 워커 시작 시'라는 메시지가 나타납니다. 이 체크박스를 선택하면 실행을 일시중지하면 서비스 워커 스크립트를 다시 시작하거나 진행하여 문제를 해결하는 데 도움이 됩니다

serviceworker-internals에서 실행 일시중지 체크박스가 있는 위치를 보여주는 스크린샷

FCM과 서비스 워커의 푸시 이벤트 사이에 문제가 있는 것 같은 경우에는 문제를 디버깅할 수 있는 방법이 많지 않습니다. 왜냐하면 Chrome에서 무언가를 수신했는지 확인할 수 있습니다. 핵심은 성공 응답이 수신됩니다. 이제 다음과 같습니다.

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

"success": 1 응답을 확인합니다. 대신 실패가 표시되면 FCM 등록 ID 및 푸시에 문제가 있음을 메시지가 Chrome으로 전송되지 않습니다.

Android용 Chrome에서 서비스 워커 디버깅

현재로서는 Android용 Chrome에서 서비스 워커를 디버깅하는 작업이 명확하지 않습니다. chrome://inspect로 이동하여 기기를 찾고 이름이 'Worker pid:....'인 목록 항목 서비스 URL이 포함된 있습니다

Chrome Inspector에서 서비스 워커의 위치를 보여주는 스크린샷

푸시 알림 UX

Chrome팀은 모범 사례 문서를 작성했습니다 자세한 내용은 푸시 알림 UX 및 극단적인 사례를 몇 가지 소개합니다.

Chrome 및 오픈 웹에서의 푸시 메시징의 미래

이 섹션에서는 Chrome의 일부 기능을 자세히 살펴봅니다. 이 구현에서 알아야 할 특정 부분과 다른 브라우저 구현과 다릅니다.

웹 푸시 프로토콜 및 엔드포인트

Push API 표준의 장점은 endpoint에서 로드한 후 서버에 전달하고 푸시를 보냅니다. 메시지를 보낼 수 있습니다. 웹 푸시 프로토콜을 구현하면 됩니다.

웹 푸시 프로토콜은 푸시 제공자가 구현할 수 있는 새로운 표준으로, 개발자가 푸시 제공자가 누구인지 걱정할 필요가 없습니다. 이 이렇게 하면 API 키를 신청하고 특별히 형식이 지정된 데이터를 지원합니다.

Chrome은 Push API를 처음으로 구현한 브라우저였으며 FCM은 이를 구현하지 않았습니다. 웹 푸시 프로토콜을 지원하기 때문에 gcm_sender_id를 구현하고 FCM용 RESTful API를 사용해야 합니다.

Chrome의 최종 목표는 Chrome 및 FCM에서 웹 푸시 프로토콜을 사용하는 것으로 나아가는 것입니다.

그때까지는 엔드포인트에 대한 "https://fcm.googleapis.com/fcm/send" 다른 엔드포인트와 별도로 처리합니다. 즉, 페이로드 데이터의 형식을 인증 키를 추가할 수 있습니다.

웹 푸시 프로토콜을 구현하는 방법

Firefox Nightly는 현재 푸시 작업 중이며 첫 번째 브라우저가 될 가능성이 높습니다. 웹 푸시 프로토콜을 구현할 수 있습니다

FAQ

사양은 어디에 있나요?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

웹 인지도의 출처가 여러 개이거나 웹 및 기본 인지도가 모두 있는 경우 중복 알림을 방지할 수 있나요?

현재 이 문제를 해결할 방법은 없지만 Chromium에서 진행 상황을 확인할 수 있습니다.

이상적인 시나리오는 사용자 기기에 일종의 ID를 설정한 다음 서버 측에서 네이티브 앱 및 웹 앱 구독 ID와 어느 쪽으로 푸시 메시지를 보낼지 결정합니다. 이 작업은 화면 크기 웹 앱과 네이티브 앱 간에 생성된 키를 공유하지만, 각 접근 방식에는 장단점이 있습니다

gcm_sender_id는 왜 필요한가요?

이는 Chrome, Android용 Opera, 삼성 브라우저에서 Firebase 클라우드 메시징 (FCM) API를 사용합니다. 목표는 표준이 확정되고 FCM에서 지원할 수 있는 웹 푸시 프로토콜

Web Sockets 또는 Server-Sent Events (EventSource)를 사용하지 않는 이유는 무엇인가요?

푸시 메시지를 사용하는 것의 장점은 페이지가 닫혀 있더라도 서비스 워커의 절전 모드가 해제되어 알림을 표시할 수 있게 됩니다. 웹 소켓 및 EventSource는 페이지 또는 브라우저가 닫힐 때 연결이 종료됩니다.

백그라운드 이벤트 전송이 필요하지 않은 경우에는 어떻게 해야 하나요?

백그라운드 전송이 필요하지 않은 경우 웹 소켓을 사용하는 것이 좋습니다.

알림을 표시하지 않고 푸시를 사용할 수 있는 경우는 언제인가요 (예: 무음 백그라운드 푸시)?

이 기능이 언제 제공될지는 아직 정해진 일정은 없지만 백그라운드 동기화를 구현하고 결정되거나 사양으로 지정되지는 않지만 백그라운드 동기화를 통한 자동 푸시가 가능합니다.

HTTPS가 필요한 이유는 무엇인가요? 개발 중에 이 문제를 해결하려면 어떻게 해야 하나요?

서비스 워커 스크립트가 서비스 워커 스크립트를 사용하도록 하려면 보안 출처가 필요합니다. 의도된 것이고 중간자가 아닌 있습니다. 현재 이것은 라이브 사이트에서 HTTPS를 사용하는 것을 의미하지만, localhost는 작업을 처리할 수 있어야 합니다

브라우저 지원은 어떻게 이루어지나요?

Chrome은 안정화 버전에서 지원하며, Mozilla는 Firefox Nightly에서 푸시 작업을 진행 중입니다. 자세한 내용은 Push API 구현 버그를 참조하세요. 여기에서 알림 구현을 추적할 수 있습니다.

특정 기간이 지난 후 알림을 삭제할 수 있나요?

현재로서는 가능하지 않지만 현재 표시된 알림의 목록입니다. 첫 번째 버킷이 만료되지 않도록 하는 것이 중요합니다. Chrome 팀에 다시 전달하겠습니다. 의견을 추가해 주세요.

사용자에게 푸시 알림이 전송되는 것을 중지하기만 하면 되는 경우 알림이 얼마나 오랫동안 표시되는지는 상관하지 않습니다. FCM의 TTL (수명) 매개변수를 사용하여 자세히 알아보기

Chrome의 푸시 메시지 제한사항은 무엇인가요?

이 게시물에 설명된 몇 가지 제한사항은 다음과 같습니다.

Chrome에서 CCM을 푸시 서비스로 사용하면 요구사항을 충족해야 합니다 Google은 이러한 과제 중 일부를 실현할 수 있는 방법을 찾기 위해 생각해 보세요
푸시 메시지를 받으면 알림을 표시해야 합니다.
데스크톱의 Chrome에는 Chrome이 실행되지 않는 경우 수신되지 않습니다. 푸시 메시지를 사용하는 ChromeOS 및 Android와는 다릅니다. 항상 수신됩니다

Permissions API를 사용하면 안 되나요?

이 Permission API는 Chrome에서 구현됩니다. 모든 브라우저에서 사용할 수 있는 것은 아닙니다. 자세히 알아보기

알림을 클릭해도 Chrome에서 이전 탭이 열리지 않는 이유는 무엇인가요?

이 문제는 현재 서비스에서 관리하지 않는 페이지에만 영향을 미칩니다. 있습니다 자세히 알아보기

사용자 기기에서 푸시를 수신한 시점에 알림이 최신 상태가 아닌 경우 어떻게 하나요?

푸시 메시지를 받으면 항상 알림을 표시해야 합니다. 알림을 보내고 싶지만 특정 기간 동안에는 'time_to_live' CCM의 매개변수 그래야 만료 시간이 지나면 FCM이 푸시 메시지를 보내지 않습니다.

자세한 내용은 여기에서 확인할 수 있습니다.

푸시 메시지를 10개 보냈는데 기기가 하나만 받도록 하면 어떻게 되나요?

FCM에 '축소_키'가 있음 매개변수를 사용하여 이 새로운 메시지가 함께 표시됩니다.

자세한 내용은 여기에서 확인할 수 있습니다.