Как отправить 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.

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

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

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

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

API Push требует два бекенда! Один из них предлагается производителем браузера и отвечает за доставку уведомления на устройство. Другой должен быть вашим (или вы можете использовать сторонний сервис, например 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 есть свои собственная старая архитектура. Поэтому мы должны поддерживать Safari отдельно.

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

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

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

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

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

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

});