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

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

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

Теперь я все еще не могу понять:

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

Я полагаю, что все ответы в одном ответе могут помочь многим людям, испытывающим подобные заблуждения.

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

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

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

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

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

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

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

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

Некоторые уроки:

• Реализация push-уведомлений в Django Здесь .
• Использование колбы для отправки push-уведомлений здесь и здесь .
• Отправка push-уведомления от Nodejs Здесь
• Отправка push-уведомлений с использованием php Here & Here
• Отправка push-уведомления из Wordpress. Здесь и здесь
• Отправка push-уведомления от Drupal. Вот

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

• NodeJs.
• PHP
• Рельсы
• питон
• Go Lang - это и это

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

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

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

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

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

Хавьер освещал уведомления и текущие ограничения.

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

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

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

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

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

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

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

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

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

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

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

Работает в Chrome, Firefox, Opera и Safari .

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

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

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

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

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

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

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

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

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

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

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

Обратитесь к репозиторию browser-push за рекомендациями по реализации push-уведомлений через Интернет для вашего веб-приложения с собственным бэкэндом. На примерах объясняется, как вы можете добавить поддержку веб-push-уведомлений для вашего веб-приложения без каких-либо сторонних сервисов.

На данный момент GCM работает только для Chrome и Android. аналогично Firefox и другие браузеры имеют свои собственные API.

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

1. Вам нужен код скрипта на стороне клиента, т.е. сервисный работник, см. ( Push-уведомление 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 из браузера, однако, когда я попробовал это, веб-просмотры не поддерживали это.

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