[Перевод] Отправка веб-push-уведомлений с помощью Node.js

Node.js задняя часть Программа перевода самородков Chrome

использоватьservice workers APIПозволяет отправлять push-уведомления непосредственно из приложения Node.js в браузер Chrome.web-pushnpm-модулиосвобождает вас отPubNubТакие посредники отправляют сообщения напрямую. В этой статье будет использоваться нативный JavaScript на интерфейсе и на сервере.ExpressПлатформа, которая проведет вас через пример уровня «Hello, World» того, как делать веб-push-уведомления. Окончательный эффект показан на рисунке ниже. Весь исходный код этого проекта можно найти по адресуGitHubПроверьте это.

Сервер аутентификации и конфигурации

Чтобы настроить веб-пуш, необходимо сначала создатьVAPID keys. Ключи VAPID используются для идентификации отправителя push-сообщения. нпмweb-pushМоды могутПомогает вам генерировать ключи VAPID, ниже мы установимweb-pushи его зависимости, и использоватьweb-push generate-vapid-keysдля создания ключей VAPID.

$ npm install express@4.16.3 web-push@3.3.0 body-parser@1.18.2 express-static@1.2.5
+ express@4.16.3
+ web-push@3.3.0
+ body-parser@1.18.2
+ express-static@1.2.5
added 62 packages in 1.42s
$
$ ./node_modules/.bin/web-push generate-vapid-keys
=======================================
Public Key:
BOynOrGhgkj8Bfk4hsFENAQYbnqqLSigUUkCNaBsAmNuH6U9EWywR1JIdxBVQOPDbIuTaj0tVAQbczNLkC5zftw
Private Key:
<OMITTED>
=======================================
$

Если вам нужна поддержка браузеров более ранних версий, также получитеGCM API key, но это не требуется в настольном Chrome 63 или более поздней версии.

Создать нижеindex.jsфайл, содержащий ваш сервис. вам нужно использоватьrequire()Импортируйте модуль web-push и настройте ключи VAPID прямо сейчас. Конфигурация довольно проста, сохраните ключи VAPID вPUBLIC_VAPID_KEYиPRIVATE_VAPID_KEYв переменной окружения.

const webpush = require('web-push');
const publicVapidKey = process.env.PUBLIC_VAPID_KEY;
const privateVapidKey = process.env.PRIVATE_VAPID_KEY;
// 此处换成你自己的邮箱
webpush.setVapidDetails('mailto:val@karpov.io', publicVapidKey, privateVapidKey);

Затем добавьте файл с именем/subscribeконечная точка. JavaScript в браузере отправит тело, содержащееPushSubscriptionобъектHTTP-запрос. чтобы использоватьwebpush.sendNotification()Для отправки push-уведомлений вам необходимо получитьPushSubscriptionобъект.

const app = express();
app.use(require('body-parser').json());
app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  res.status(201).json({});
  const payload = JSON.stringify({ title: 'test' });
  console.log(subscription);
  webpush.sendNotification(subscription, payload).catch(error => {
    console.error(error.stack);
  });
});

Выше приведены все настройки, которые необходимо выполнить на стороне сервера. ты сможешьGitHubОзнакомьтесь с полным кодом. Теперь мы собираемся создать клиентclient.jsс работником службы --worker.js.

Клиенты и сервисные работники

Во-первых, используйтеexpress-staticnpm-модули,Настройте экспресс-приложение, разверните статические ресурсы для клиента и разверните статические ресурсы в каталоге верхнего уровня службы. Следует отметить, что при работе с/subscribeвызовите это после маршрутизацииapp.use(), иначе Express не будет обрабатывать маршрут согласно вашей конфигурации, а будет искатьsubscribe.htmlдокумент.

app.use(require('express-static')('./'));

Далее, создатьindex.htmlДокумент, этот файл будет развернут как запись вашего приложения. Только ключ к файлу<script>тег, который загрузит клиентский код JavaScript, остальное не имеет значения.

<html>
  <head>
    <title>Push Demo</title>
    <script type="application/javascript" src="/client.js"></script>
  </head>

  <body>
    Service Worker Demo
  </body>
</html>

Теперь ваш портал готов. Создатьclient.jsдокумент.этот файлскажет браузеру инициализировать вашего работника службы и отправить/subscribeОтправьте HTTP-запрос. Поскольку браузеры, поддерживающие сервис-воркеры, также должны поддерживать асинхронность и ожидание, в приведенном выше примере используетсяasync/await.

// 这里写死的 public key 要换成你自己的。
const publicVapidKey = 'BOynOrGhgkj8Bfk4hsFENAQYbnqqLSigUUkCNaBsAmNuH6U9EWywR1JIdxBVQOPDbIuTaj0tVAQbczNLkC5zftw';
if ('serviceWorker' in navigator) {
  console.log('Registering service worker');
  run().catch(error => console.error(error));
}
async function run() {
  console.log('Registering service worker');
  const registration = await navigator.serviceWorker.
    register('/worker.js', {scope: '/'});
  console.log('Registered service worker');
  console.log('Registering push');
  const subscription = await registration.pushManager.
    subscribe({
      userVisibleOnly: true,
      // `urlBase64ToUint8Array()` 函数与以下网址中的描述一致
      // https://www.npmjs.com/package/web-push#using-vapid-key-for-applicationserverkey
      applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
    });
  console.log('Registered push');
  console.log('Sending push');
  await fetch('/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: {
      'content-type': 'application/json'
    }
  });
  console.log('Sent push');
}

Наконец, вам нужно реализоватьclient.jsзагруженworker.jsдокумент. В этом файле находится логика сервисного работника. Когда подписчик получает push-сообщение, сервис-воркер получаетсобытие "толчок".

console.log('Loaded service worker!');
self.addEventListener('push', ev => {
  const data = ev.data.json();
  console.log('Got push', data);
  self.registration.showNotification(data.title, {
    body: 'Hello, World!',
    icon: 'http://mongoosejs.com/docs/images/mongoose5_62x30_transparent.png'
  });
});

Хорошо! Настройте правильные переменные среды и запустите службу:

$ env PUBLIC_VAPID_KEY='OMITTED' env PRIVATE_VAPID_KEY='OMITTED' node .

Доступ в Chromehttp://localhost:3000, вы должны увидеть push-уведомление ниже!

Это уведомление доступно не только в Chrome, но и вFirefoxЕго также можно реализовать с помощью того же кода.

Наконец

Веб-пуш — это простоservice workersодно из многих преимуществ. черезnpm-модули, вы можете отправлять уведомления в большинство современных браузеров. В следующий раз, когда вы захотите добавить push-уведомления в свое веб-приложение, не забудьте использовать сервис-воркеры!

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории