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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

немного старый, но в этой статье от Eric Bidelman объясняет основы SSE и предоставляет некоторые примеры кода сервера, а также.

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

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

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

см. браузер-push РЕПО для направляющих линий для реализации веб-уведомления толчка для вашего веб-приложения с вашим собственным фоном. Это объясняет с примерами, как вы можете добавить поддержку веб-уведомления толчка для вашего веб-приложения без каких-либо сторонних услуг.

На данный момент GCM работает только для chrome и android. аналогично firefox и другие браузеры имеют свой собственный api.

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

1. вам нужен код сценария на стороне клиента, т. е. работник службы, см. ( Google push notification). Хотя это остается таким же для других браузеров.

2.после получения конечной точки с помощью Ajax save вместе с именем browser.

3.Вам нужно создать серверную часть, которая имеет поля для заголовка, сообщения, значка, нажмите URL в соответствии с вашими требованиями. теперь после нажатия на кнопку отправить уведомление, вызовите функцию say send_push (). В этом коде пишем для разных браузеров например

3.1. для chrome

 $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...

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

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

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

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

});