Як надіслати push-повідомлення у веб-браузер?

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

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

Тепер те, що я досі не в змозі зрозуміти, це:

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

Я вважаю, що всі ці відповіді в одній відповіді можуть допомогти багатьом людям, які мають подібні плутанини.

Тож тут я відповідаю на власне запитання. Я отримав відповіді на всі свої запити від людей, які в минулому створювали послуги push-сповіщень.

Оновлення (травень 2018 р.): Ось вичерпний та дуже добре написаний документ про веб-натискання з Google.

Відповідь на оригінальні запитання, задані 3 роки тому:

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

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

2. Якщо не через GCM, чи можемо ми створити власний бек-енд?

Відповідь: Так, push-повідомлення можна надіслати з нашого власного бек-енду. Підтримка того ж була в усіх основних браузерах.

Перевірте цей кодовий лабораторій від Google, щоб краще зрозуміти реалізацію.

Деякі навчальні посібники:

• Реалізація push-повідомлення в Django Here .
• Використання колби для надсилання push-повідомлення тут і тут .
• Надсилання push notifcaiton від Nodejs Here
• Надсилання push-повідомлення за допомогою php Here & Here
• Надсилання push-повідомлення від Wordpress. Тут і тут
• Надсилання push-повідомлення від Drupal. Ось

Реалізація власного бекенда на різних мовах програмування:

• NodeJs.
• PHP
• Рейки
• Пітон
• Іти Ланг - це і це

Подальші читання: - - Документацію з веб-сайту Firefox можна прочитати тут . - Дуже хороший огляд Google Push від Google можна знайти тут. - FAQ, що відповідає на найпоширеніші плутанини та запитання.

Чи є якісь безкоштовні послуги, щоб зробити те саме? Є деякі компанії, які пропонують подібне рішення у безкоштовних, безкоштовних та платних моделях. Перелічу декілька нижче:

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()все ще працюватиме з Web Workers.

Це можуть бути резервні опції з обробкою дисплея повідомлення діалогового вікна, коли тест функції сповіщення не вдається або дозвіл відмовлено.

У функції сповіщення є перевірка та відмова у дозволі:

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, чи можемо ми створити власний бек-енд?

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

Розкриття інформації: Я засновник 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 окремо.

Зверніться до репортажів браузера-push для керівних ліній, щоб реалізувати сповіщення веб-додатків для веб-додатків із власним резервним пристроєм. З прикладами пояснюється, як можна додати підтримку веб-повідомлень про push push для будь-яких сторонніх служб.

На сьогоднішній день GCM працює лише для хрому та андроїда. аналогічно 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