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

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

업데이트 (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를 얻을 수 있습니다.

답변

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

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

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

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