웹 브라우저에 푸시 알림을 보내는 방법은 무엇입니까?

Push Notification API 및 Web Notification API에 대해 지난 몇 시간 동안 읽었습니다 . 또한 Google & Apple은 각각 GCM 및 APNS를 통해 무료로 푸시 알림 서비스를 제공한다는 사실을 발견했습니다.

웹 알림 API를 사용한다고 생각되는 데스크톱 알림을 사용하여 브라우저에 푸시 알림을 구현할 수 있는지 이해하려고합니다. 여기 및 여기 Chrome에서이 작업을 수행하는 방법에 대한 Google 문서를 보았습니다 .

이제 여전히 이해할 수없는 것은 다음과 같습니다.

1. GCM / APNS를 사용하여 Firefox 및 Safari를 포함한 모든 웹 브라우저에 푸시 알림을 보낼 수 있습니까?
2. GCM을 통하지 않는 경우 동일한 방식으로 백엔드를 가질 수 있습니까?

하나의 답변 으로이 모든 답변이 비슷한 혼란을 겪고있는 많은 사람들을 도울 수 있다고 생각합니다.

그래서 나는 내 자신의 질문에 대답하고 있습니다. 과거에 푸시 알림 서비스를 구축 한 사람들의 모든 쿼리에 대한 답변을 받았습니다.

업데이트 (2018 년 5 월) : 다음은 Google의 웹 푸시 알림에 관한 포괄적이고 잘 작성된 문서입니다.

3 년 전의 원래 질문에 대한 답변 :

1. GCM / APNS를 사용하여 Firefox 및 Safari를 포함한 모든 웹 브라우저에 푸시 알림을 보낼 수 있습니까?

답변 : Google은 2018 년 4 월부터 GCM을 더 이상 사용하지 않습니다. 이제 FCM ( Firebase Cloud Messaging)을 사용할 수 있습니다 . 이것은 웹 브라우저를 포함한 모든 플랫폼을 지원합니다.

2. GCM을 통하지 않는 경우 동일한 방식으로 백엔드를 가질 수 있습니까?

답변 : 예. 푸시 알림은 자체 백엔드에서 보낼 수 있습니다. 모든 주요 브라우저에서 동일하게 지원됩니다.

구현을 더 잘 이해하려면 Google 의이 코드 랩 을 확인하십시오 .

일부 튜토리얼 :

• 장고에 푸시 알림을 구현 여기에 .
• 플라스크를 사용하여 여기 및 여기에 푸시 알림을 보냅니다 .
• Nodejs에서 푸시 알림을 여기로 보내기
• PHP Here & Here를 사용하여 푸시 알림 보내기
• Wordpress에서 푸시 알림을 보냅니다. 여기 및 여기
• Drupal에서 푸시 알림을 보냅니다. 여기

다양한 프로그래밍 언어로 자체 백엔드 구현 :

• NodeJ.
• PHP
• 울타리
• 파이썬
• 고랑- 이것 과 이것

추가 자료 : --Firefox 웹 사이트의 문서는 여기를 참조하십시오 . -Google의 웹 푸시에 대한 매우 유용한 개요는 여기에서 찾을 수 있습니다. - 가장 일반적인 혼란과 질문에 답변하는 FAQ .

동일한 무료 서비스가 있습니까? 무료, 프리미엄 및 유료 모델에서 유사한 솔루션을 제공하는 회사가 있습니다. 아래에 몇 가지 목록이 있습니다.

1. https://onesignal.com/ (무료 | 모든 플랫폼 지원)
2. https://firebase.google.com/products/cloud-messaging/ (무료)
3. https://clevertap.com/ (무료 플랜이 있습니다)
4. https://goroost.com/

참고 : 무료 서비스를 선택할 때는 TOS를 읽으십시오. 무료 서비스는 종종 분석을 포함한 다양한 목적으로 사용자 데이터를 수집하여 작동합니다.

그 외에도 푸시 알림을 보내려면 HTTPS가 있어야합니다. 그러나 letsencrypt.org 를 통해 자유롭게 https를 얻을 수 있습니다.

Javier는 알림 및 현재 제한 사항을 다룹니다.

내 제안 : window.postMessage장애인 브라우저가 따라 올 때까지 기다리는 동안 Worker.postMessage()웹 작업자와 계속 작동합니다.

이는 알림 기능 테스트가 실패하거나 권한이 거부 된 경우 대화 상자 메시지 표시 처리기가 포함 된 대체 옵션 일 수 있습니다.

알림 기능 및 권한 거부 확인 :

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}

서버 측 이벤트 를 통해 서버 에서 브라우저로 데이터를 푸시 할 수 있습니다 . 이것은 본질적으로 클라이언트가 브라우저에서 "구독"할 수있는 단방향 스트림입니다. 여기에서 NotificationSSE가 브라우저로 스트리밍 될 때 새 객체를 만들 수 있습니다 .

var source = new EventSource('/events');

source.on('message', message => {
  var notification = new Notification(message.title, {
    body: message.body
  });
}); 

약간 오래되었지만 Eric Bidelman의이 기사 는 SSE의 기본 사항을 설명하고 일부 서버 코드 예제도 제공합니다.

GCM / APNS는 각각 Chrome과 Safari에만 해당됩니다.

나는 당신이 찾고있을 것이라고 생각합니다 Notification:

https://developer.mozilla.org/en-US/docs/Web/API/notification

Chrome, Firefox, Opera 및 Safari에서 작동합니다 .

사용자가 웹 사이트를 서핑하지 않을 때에도 전달 될 수있는 실제 푸시 알림 에 대해 이야기한다고 가정합니다 (그렇지 않으면 WebSocket 또는 긴 폴링과 같은 레거시 방법을 확인하십시오).

GCM / APNS를 사용하여 Firefox 및 Safari를 포함한 모든 웹 브라우저에 푸시 알림을 보낼 수 있습니까?

GCM은 Chrome 전용이며 APN은 Safari 전용입니다. 각 브라우저 제조업체는 자체 서비스를 제공합니다.

GCM을 통하지 않는 경우 동일한 방식으로 백엔드를 가질 수 있습니까?

Push API에는 두 개의 백엔드 가 필요합니다 ! 하나는 브라우저 제조업체에서 제공하며 장치에 알림을 전달할 책임이 있습니다. 다른 하나는 귀하의 것이되어야하며 (또는 Pushpad 와 같은 타사 서비스를 사용할 수 있음 ) 알림을 트리거하고 브라우저 제조업체의 서비스 (예 : GCM, APN, Mozilla 푸시 서버 )에 문의해야합니다 .

공개 : 저는 Pushpad 설립자입니다

이것은 모든 브라우저에 대한 푸시 알림을 수행하는 간단한 방법입니다 https://pushjs.org

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
 }
});

다음과 같이 질문을 재정의해도 되겠습니까?

Chrome, Firefox, Opera 및 Safari에 푸시 알림을 보내도록 자체 백엔드를 가질 수 있습니까?

예. 오늘 (2017/05) 까지 동일한 클라이언트 및 서버 측 구현을 사용하여 Chrome, Firefox 및 Opera (Safari 없음)를 처리 할 수 ​​있습니다. 동일한 방식으로 웹 푸시 알림을 구현했기 때문입니다. 이것이 W3C의 Push API 프로토콜입니다. 그러나 Safari에는 고유 한 오래된 아키텍처가 있습니다. 따라서 Safari를 별도로 유지 관리해야합니다.

자체 백엔드로 웹 앱에 대한 웹 푸시 알림을 구현하려면 가이드 라인은 브라우저 푸시 저장소를 참조하십시오 . 타사 서비스없이 웹 애플리케이션에 웹 푸시 알림 지원을 추가하는 방법을 예제와 함께 설명합니다.

현재 GCM은 Chrome 및 Android에서만 작동합니다. 마찬가지로 파이어 폭스와 다른 브라우저에는 자체 API가 있습니다.

이제 푸시 알림을 구현하여 자체 백엔드가있는 모든 일반 브라우저에서 작동하도록 푸시 알림을 구현하는 방법에 대해 질문합니다.

1. 클라이언트 측 스크립트 코드, 즉 서비스 작업자, 참조 ( Google 푸시 알림 )가 필요합니다. 다른 브라우저에서도 동일하게 유지됩니다.

2. Ajax를 사용하여 엔드 포인트를 얻은 후 브라우저 이름과 함께 저장하십시오.

3. 제목, 메시지, 아이콘, 요구 사항에 따라 URL을 클릭하는 필드가있는 백엔드를 만들어야합니다. 이제 알림 보내기를 클릭 한 후 send_push () 함수를 호출하십시오. 예를 들어 다른 브라우저에 대한 쓰기 코드에서

3.1. 크롬 용

 $headers = array(
          'Authorization: key='.$api_key(your gcm key),
          'Content-Type: application/json',
     );
   $msg = array('to'=>'register id saved to your server');
   $url = 'https://android.googleapis.com/gcm/send';
   $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($msg));

      $result = curl_exec($ch);

3.2. 모질라

$headers = array(            
              'Content-Type: application/json',
              'TTL':6000
            );

       $url = 'https://updates.push.services.mozilla.com/wpush/v1/REGISTER_ID_TO SEND NOTIFICATION_ON';

      $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);


      $result = curl_exec($ch);

다른 브라우저의 경우 Google에 문의하십시오 ...

pubnub를 사용하는 것이 좋습니다. 그러나 브라우저에서 ServiceWorkers 및 PushNotification을 사용해 보았지만 시도했을 때 webviews가 이것을 지원하지 않았습니다.

https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk