Как отправить push-уведомление в веб-браузер?

Я читал последние несколько часов о Push Notification API и API веб-уведомлений. Я также обнаружил, что Google и Apple бесплатно предоставляют услугу push-уведомления через GCM и APNS соответственно.

Я пытаюсь понять, можем ли мы реализовать push-уведомление для браузеров с помощью Desktop Notification, и я считаю, что это API веб-уведомлений. Я видел документацию Google о том, как это можно сделать для Chrome здесь и здесь.

Теперь то, что я еще не могу понять:

Можем ли мы использовать GCM/APNS для отправки push-уведомления всем веб-браузерам, включая Firefox и Safari?
Если не через GCM, мы можем сделать свой собственный back-end, чтобы сделать то же самое?

Я считаю, что все эти ответы в одном ответе могут помочь многим людям, которые имеют схожие путаницы.

Ответы

Ответ 1

Итак, я отвечаю на свой вопрос. Я получил ответы на все мои запросы от людей, которые в прошлом создавали службы push-уведомлений.

Обновление (май 2018 г.): вот исчерпывающий и очень хорошо написанный документ о push-уведомлениях в Интернете от Google.

Ответьте на оригинальные вопросы, заданные 3 года назад:

Можем ли мы использовать GCM/APNS для отправки push-уведомлений всем веб-браузерам, включая Firefox и Safari?

Ответ: Google устарел GCM с апреля 2018 года. Теперь вы можете использовать Firebase Cloud Messaging (FCM). Это поддерживает все платформы, включая веб-браузеры.

Если не через GCM, можем ли мы иметь свой собственный сервер, чтобы делать то же самое?

Ответ: Да, push-уведомление может быть отправлено с нашего собственного сервера. Поддержка того же пришла во все основные браузеры.

Проверьте эту кодовую метку от Google, чтобы лучше понять реализацию.

Реализация собственного бэкэнда на разных языках программирования.:

Дальнейшие чтения:

Документацию с сайта Firefox можно прочитать здесь.
Очень хороший обзор Web Push от Google можно найти здесь.
FAQ, отвечающий на наиболее распространенные заблуждения и вопросы.

Есть ли бесплатные услуги, чтобы сделать то же самое? Есть некоторые компании, которые предлагают аналогичное решение в бесплатных, платных и бесплатных моделях. Я перечисляю несколько ниже:

https://onesignal.com/ (бесплатно | Поддержка всех платформ)
https://firebase.google.com/products/cloud-messaging/ (бесплатно)
https://clevertap.com/ (Есть бесплатный план)
https://goroost.com/

Примечание: при выборе бесплатной услуги не забудьте прочитать TOS. Бесплатные сервисы часто работают, собирая пользовательские данные для различных целей, включая аналитику.

Кроме того, вам нужно иметь HTTPS для отправки push-уведомлений. Однако вы можете получить https бесплатно через letsencrypt.org

Ответ 2

Javier охватывает уведомления и текущие ограничения.

Мое предложение: window.postMessage, пока мы ждем, когда браузер с ограниченными возможностями догонит, а еще Worker.postMessage() будет работать с веб-рабочими.

Это может быть опция резервного копирования с обработчиком отображения сообщений диалогового окна, если тест функции уведомления отсутствует или разрешено разрешение.

Уведомление имеет функцию и запрет на разрешение:

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

Ответ 3

GCM/APNS предназначены только для Chrome и Safari соответственно.

Я думаю, что вы можете искать Notification:

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

Он работает в Chrome, Firefox, Opera и Safari.

Ответ 4

Вы можете перенаправить данные с сервера на браузер через События на стороне сервера. Это, по сути, однонаправленный поток, который клиент может "подписаться" из браузера. Отсюда вы можете просто создать новые объекты Notification как поток SSE в браузере:

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

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

Немного устаревший, но в этой статье Эрика Бидельмана объясняет основы SSE и также предоставляет примеры кода сервера.

Ответ 5

Я предполагаю, что вы говорите о реальных push-уведомлениях, которые могут быть доставлены, даже если пользователь не просматривает ваш сайт (в противном случае проверьте WebSockets или устаревшие методы, такие как длинный опрос).

Можем ли мы использовать GCM/APNS для отправки push-уведомлений всем веб-браузерам, включая Firefox и Safari?

GCM предназначен только для Chrome, а APN - только для Safari. Каждый производитель браузеров предлагает свой сервис.

Если не через GCM, можем ли мы иметь свой собственный сервер, чтобы делать то же самое?

Push API требует двух бэкэндов ! Один предлагается производителем браузера и отвечает за доставку уведомления на устройство. Другой должен быть вашим (или вы можете использовать стороннюю службу, такую как Pushpad) и отвечает за запуск уведомления и обращение в службу поддержки производителя браузера (например, GCM, APN, push-серверы Mozilla).

Раскрытие информации: я основатель Pushpad

Ответ 6

Могу ли я переопределить ваш вопрос ниже:

Можем ли мы иметь собственный сервер для отправки push-уведомлений в Chrome, Firefox, Opera и Safari?

Да. К сегодняшнему дню (2017/05) вы можете использовать ту же самую клиентскую и серверную реализацию для обработки Chrome, Firefox и Opera (без Safari). Потому что они внедрили сетевые push-уведомления таким же образом. Это Протокол Push API от W3C. Но у Safari есть своя старая архитектура. Поэтому мы должны поддерживать Safari отдельно.

Обратитесь browser-push repo для направляющих линий, чтобы реализовать веб-push-уведомление для вашего веб-приложения с помощью собственного back-end. В нем объясняются примеры того, как вы можете добавить поддержку веб-push-уведомлений для своего веб-приложения без каких-либо сторонних сервисов.

Ответ 7

В настоящее время GCM работает только для хромированных и андроидов. аналогично firefox и другие браузеры имеют свои собственные api.

Теперь перейдем к вопросу о том, как реализовать push-уведомление, чтобы оно работало для всех распространенных браузеров с собственным задним концом.

Вам нужна клиентская сторона script код i.e service worker, обратитесь (Google push-уведомление). Хотя это остается таким же для других браузеров.

2.После получения конечной точки с помощью Ajax сохраните ее вместе с именем браузера.

3. Вам нужно создать задний конец, который имеет поля для заголовка, сообщения, значка, URL-адрес клика в соответствии с вашими требованиями. теперь после нажатия на отправку уведомления вызовите функцию say 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. для 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);

для других браузеров, пожалуйста, google...

Ответ 8

это простой способ сделать push-уведомление для всех браузеров https://pushjs.org

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

Ответ 9

Я предлагаю использовать pubnub. Однако я попытался использовать ServiceWorkers и PushNotification в браузере, однако, когда я попробовал, веб-просмотры не поддерживали это.

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