웹 브라우저에 푸시 알림을 보내는 방법
Push Notification API와 Web Notification API에 대해 지난 몇 시간 동안 읽고 있습니다.구글과 애플이 각각 GCM과 APNS를 통해 푸시 알림 서비스를 무료로 제공한다는 사실도 알게 됐다.
Web Notification API의 기능이라고 생각되는 Desktop Notification을 사용하여 브라우저에 Push Notification을 구현할 수 있는지 이해하려고 합니다.Chrome에 관한 Google 문서를 이쪽과 이쪽에서 보았습니다.
아직 이해할 수 없는 것은 다음과 같습니다.
- GCM/APNS를 사용하여 Firefox 및 Safari를 포함한 모든 웹 브라우저에 푸시 알림을 보낼 수 있습니까?
- 만약 GCM을 통하지 않는다면 우리도 같은 일을 할 수 있는 백엔드를 가질 수 있을까요?
나는 이 모든 대답들이 비슷한 혼란을 겪고 있는 많은 사람들에게 도움이 될 수 있다고 믿는다.
그래서 나는 내 질문에 대답하고 있다.과거에 푸시 알림 서비스를 구축한 적이 있는 사람으로부터 모든 문의에 대한 답변을 받았습니다.
업데이트(2022년 5월):여기 구글에서 웹 푸시 알림에 대한 문서가 있습니다.
Mozilla의 알림 API에 대한 자세한 내용은 여기를 참조하십시오.
6년 전 질문의 답변:
- GCM/APNS를 사용하여 Firefox 및 Safari를 포함한 모든 웹 브라우저에 푸시 알림을 보낼 수 있습니까?
답변: 구글은 2018년 4월 현재 GCM을 폐지했습니다.이제 Firebase Cloud Messaging(FCM)을 사용할 수 있습니다.웹 브라우저를 포함한 모든 플랫폼을 지원합니다.
- 만약 GCM을 통하지 않는다면 우리도 같은 일을 할 수 있는 백엔드를 가질 수 있을까요?
답변: 예. 푸시 알림은 당사 자체 백엔드에서 보낼 수 있습니다.모든 주요 브라우저에서 동일한 기능이 지원되고 있습니다.
구현을 더 잘 이해하려면 Google의 이 코델랩을 확인하십시오.
일부 튜토리얼:
- Django Here에서 푸시 알림을 구현하고 있습니다.
- 플라스크를 사용하여 푸시 알림 전송 Here & Here.
- Nodejs에서 푸시 알림을 보내는 중입니다.
- php Here & Here를 사용한 푸시 알림 전송
- Wordpress에서 푸시 알림을 보내는 중입니다.여기와 여기
- Drupal에서 푸시 알림을 보냅니다.여기 있습니다
다양한 프로그래밍 언어로 자체 백엔드 구현:
추가 판독치:
- Firefox Web 사이트의 메뉴얼은, 이쪽에서 참조할 수 있습니다.
- Google의 Web Push에 대한 매우 좋은 개요는 여기에서 찾을 수 있습니다.
- 가장 일반적인 혼란과 질문에 대한 FAQ입니다.
같은 일을 할 수 있는 무료 서비스가 있나요?이와 유사한 솔루션을 무료, 무료 및 유료 모델로 제공하는 회사도 있습니다.이하에 몇 가지 예를 제시하겠습니다.
- https://onesignal.com/ (무료 | 모든 플랫폼 지원)
- https://firebase.google.com/products/cloud-messaging/ (무료)
- https://clevertap.com/ (무료 플랜 있음)
- https://goroost.com/
참고: 무료 서비스를 선택할 때는 TOS를 반드시 읽어보십시오.무료 서비스는 분석을 포함한 다양한 목적을 위해 사용자 데이터를 수집함으로써 작동하는 경우가 많습니다.
이와 별도로 푸시 알림을 보내려면 HTTPS가 필요합니다.단, https는 letsencrypt.org에서 무료로 입수할 수 있습니다.
하비에르는 알림 및 현재 제한 사항을 다뤘습니다.
★★★★★★★★★★★★★★★」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의 기본과 서버 코드의 예를 설명하고 있습니다.
이것은 모든 브라우저에 대해 푸시 알림을 하는 간단한 방법입니다.https://pushjs.org
Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
window.focus();
this.close();
}
});
GCM/APNS는 각각 Chrome과 Safari 전용입니다.
Notification:
https://developer.mozilla.org/en-US/docs/Web/API/notification
Chrome, Firefox, Opera 및 Safari에서 작동합니다.
사용자가 웹 사이트를 검색하지 않을 때에도 전달될 수 있는 실제 푸시 알림(그렇지 않을 경우 WebSockets 또는 긴 폴링과 같은 기존 방법을 확인하십시오).
GCM/APNS를 사용하여 Firefox 및 Safari를 포함한 모든 웹 브라우저에 푸시 알림을 보낼 수 있습니까?
GCM은 Chrome 전용이며 APN은 Safari 전용입니다.각 브라우저 제조업체는 자체 서비스를 제공합니다.
만약 GCM을 통하지 않는다면 우리도 같은 일을 할 수 있는 백엔드를 가질 수 있을까요?
Push API에는 2개의 백엔드가 필요합니다!하나는 브라우저 제조업체에서 제공하며 장치에 알림을 전달하는 역할을 합니다.다른 하나는 사용자의 것입니다(또는 Pushpad와 같은 서드파티 서비스를 사용할 수 있습니다).또한 알림을 트리거하고 브라우저 제조원의 서비스(GCM, APN, Mozilla 푸시 서버 등)에 문의합니다.
공개:저는 Pushpad 설립자입니다.
질문을 다음과 같이 다시 정의해도 될까요?
Chrome, Firefox, Opera 및 Safari에 푸시 알림을 보낼 수 있는 자체 백엔드가 있습니까?
네. 오늘(2017/05)까지 동일한 클라이언트 및 서버 측 구현을 사용하여 Chrome, Firefox 및 Opera(Safari 없음)를 처리할 수 있습니다.웹 푸시 알림을 동일한 방식으로 구현했기 때문입니다.W3C의 Push API 프로토콜입니다.하지만 Safari는 그들만의 오래된 건축물을 가지고 있다.그래서 사파리는 따로 관리해야 합니다.
자체 백엔드와 함께 웹 앱에 대한 웹 푸시 알림을 구현하기 위한 가이드 라인에 대해서는 브라우저 푸시 레포(browser-push repo)를 참조하십시오.서드파티 서비스 없이 웹 응용 프로그램에 웹 푸시 알림 지원을 추가하는 방법에 대해 예를 들어 설명합니다.
현재 GCM은 Chrome과 Android에서만 작동합니다.마찬가지로 다른 브라우저에도 자체 api가 있습니다.
이제 푸시 알림을 구현하여 백엔드가 있는 모든 일반 브라우저에서 작동하도록 하는 방법에 대해 알아보겠습니다.
- 클라이언트측 스크립트 코드, 즉 서비스 워커가 필요합니다(Google Push Notification을 참조하십시오.이것은 다른 브라우저에서도 동일하게 유지됩니다.
2. Ajax를 사용하여 엔드포인트를 가져온 후 브라우저 이름과 함께 저장합니다.
3. 필요에 따라 제목, 메시지, 아이콘, 클릭 URL 필드가 있는 백엔드를 작성해야 합니다.Send Notification을 클릭한 후 send_paraming이라고 하는 함수를 호출합니다.이 문서에서는 예를 들어 다른 브라우저에 대한 코드를 작성합니다.
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(Mozilla의 경우)
$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);
다른 브라우저는 구글로...
퍼브너브 사용을 추천합니다.브라우저에서 Service Workers와 Push Notification을 사용해 봤는데 웹 뷰에서 지원되지 않습니다.
https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk
html을 사용하다
미지,!!텍!!!!!!!!!!
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="icon" href="favicon.ico" type="image/png">
<title>Push</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="centrado">
<div class="card text-center shadow">
<div class="card-header">
Push Notifications
</div>
<div class="card-body">
<h5 class="card-title">Test for Push Notifications</h5>
<p class="card-text">Click twice, first for the permission</p>
<button class="btn btn-danger" id="btn-show-notification">Notify</button>
</div>
<div class="card-footer text-muted">
aledc7
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(document).on('DOMContentLoaded', function () {
// Request desktop notifications permission on page load
if (!Notification) {
console.log('Notification is not compatible');
return;
}
if (Notification.permission !== 'granted') {
Notification.requestPermission();
}
});
function showNotification() {
if (Notification.permission !== 'granted') {
Notification.requestPermission();
} else {
const options = {
body: 'Your text for the Notification,
dir: 'ltr',
image: 'your_image.png' //must be 728x360px
};
const notification = new Notification('Title Notification', options);
notification.onclick = function () {
window.open('https://stackoverflow.com/users/10220740/ale-dc');
};
}
}
$('#btn-show-notification').on('click', showNotification);
});
</script>
<style>
.centrado{
/* Centrado Horizontal */
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
/* Centrado Vertical */
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.shadow{
filter: drop-shadow(2px 4px 8px #585858);
}
</style>
</html>
언급URL : https://stackoverflow.com/questions/33687298/how-to-send-push-notification-to-web-browser
'source' 카테고리의 다른 글
| 정수를 수천 개의 쉼표로 문자열로 변환 (0) | 2022.09.15 |
|---|---|
| sql 키워드 'like'를 사용하여 암호화된 데이터를 검색하는 방법 (0) | 2022.09.15 |
| 어떻게 내 타입 힌트에 기능 형식을 지정할 수 있을까요? (0) | 2022.09.15 |
| static 키워드 inside 함수 (0) | 2022.09.15 |
| 문자열을 여러 개의 단어 경계 구분 기호를 사용하여 단어로 분할 (0) | 2022.09.15 |