Как работает JavaScript: механизм веб-push-уведомлений

сервер JavaScript браузер Программа перевода самородков

Это глава 9 из серии, посвященной JavaScript и его строительным блокам. В процессе определения и описания основных элементов мы также поделились тем, что создаем легкое приложение JavaScript.SessionStackНекоторые эмпирические правила, которые следует использовать, когда приложение должно быть надежным, производительным и помогать пользователям видеть и воспроизводить ошибки веб-приложений в режиме реального времени.

Если вы пропустили первые несколько глав, вы можете найти их здесь:

  1. Как работает JavaScript: обзор движка, среды выполнения, стека вызовов
  2. Как работает JavaScript: 5 советов по оптимизации кода в движке V8
  3. Как работает JavaScript: управление памятью + обработка 4 распространенных утечек памяти
  4. Как работает JavaScript: подъем петли событий и асинхронного программирования + 5 советов для лучшего кодирования с Async / ждут
  5. Как работает JavaScript: глубокое погружение в WebSockets и HTTP/2 с SSE и как выбрать правильный
  6. Как работает JavaScript: конкуренция с WebAssembly + Почему WebAssembly лучше, чем JavaScript в некоторых ситуациях
  7. Как работает JavaScript: внутреннее устройство веб-работника и 5 сценариев, которые вы должны использовать
  8. Как работает JavaScript: жизненный цикл Web Worker и варианты использования

Сегодня мы сосредоточимся на веб-push-уведомлениях: рассмотрим их составные части, изучим процесс отправки/получения уведомлений и, наконец, поделимсяSessionStackКак использовать эти функции для создания новых продуктов.

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

Обзор

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

Push на основе нашегопредыдущий постСервисные работники подробно обсуждаются в .

В этом случае причиной использования Service Workers является то, что они работают в фоновом режиме. Это полезно для push-уведомлений, потому что это означает, что их код будет выполняться только тогда, когда пользователь взаимодействует с самим уведомлением.

Push и уведомление

Push и Notification — это два разных API.

  • толкать ——  Вызывается, когда серверная сторона отправляет сообщение Service Worker
  • Уведомление ——  Это действие в Service Worker или сценарии веб-приложения, которое отображает информацию для пользователя.

толкать

Есть три шага для реализации push:

  1. UI——  Добавьте необходимую логику на стороне клиента, чтобы позволить пользователям подписываться на push-уведомления.Это логика JavaScript, которая нужна вашему пользовательскому интерфейсу веб-приложения, чтобы пользователи могли регистрироваться для получения push-уведомлений.
  2. Отправить push-сообщение ——  Реализуйте вызов API на сервере, который будет запускать push-сообщение на устройство пользователя.
  3. Принимать push-сообщения——  Обработайте push-сообщение, как только оно достигнет браузера.

Теперь опишем весь процесс более подробно.

Обнаружение поддержки браузера

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

  1. экзаменnavigatorна объектеserviceWorker
  2. экзаменwindowна объектеPushManager

Обе проверки выглядят так:

if (!('serviceWorker' in navigator)) { 
  // Service Worker isn't supported on this browser, disable or hide UI. 
  return; 
}

if (!('PushManager' in window)) { 
  // Push isn't supported on this browser, disable or hide UI. 
  return; 
}

Зарегистрировать сервисного работника

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

Как зарегистрировать сервис-воркера, вы должны узнать из одной из наших предыдущих статейуже знакомый.

спросить разрешение

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

Получить лицензированный API относительно просто, но недостатком является то, что API ужеОт принятия обратных вызовов к возврату Promise, что создает проблему: мы не можем сказать, какую версию API реализует текущий браузер, поэтому вам нужно реализовать и обрабатывать обе версии.

Это выглядит так:

function requestPermission() {
  return new Promise(function(resolve, reject) {
    const permissionResult = Notification.requestPermission(function(result) {
      // Handling deprecated version with callback.
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  })
  .then(function(permissionResult) {
    if (permissionResult !== 'granted') {
      throw new Error('Permission not granted.');
    }
  });
}

Notification.requestPermission()Вызов отобразит следующее приглашение для пользователя:

После авторизации, закрытия или блокировки мы получим результат в строковом формате:‘granted’,‘default’или‘denied’.

Помните, что если пользователь нажимаетBlockКнопка, ваше веб-приложение не сможет снова запросить разрешение пользователя, пока они вручную не "разблокируют" ограничения вашего приложения, изменив состояние разрешения. Эта опция скрыта в интерфейсе настроек.

Пользователь подписывается с помощью PushManager

После того, как мы зарегистрировали работника службы и получили разрешение, когда вы регистрируете своего работника службы, мы можем сделать это, позвонивregistration.pushManager.subscribe()для подписки пользователей.

Весь фрагмент может выглядеть так (включая регистрацию сервис-воркера):

function subscribeUserToPush() {
  return navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
    var subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: btoa(
        'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'
      )
    };

    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) {
    console.log('PushSubscription: ', JSON.stringify(pushSubscription));
    return pushSubscription;
  });
}

registration.pushManager.subscribe(options)принять одинoptionsобъект, который содержит обязательные и необязательные параметры:

  • userVisibleOnly: логическое значение, указывающее, что возвращенная push-подписка будет использоваться только для сообщений, видимых пользователю. он должен быть установлен наtrue, иначе вы получите ошибку (для этого есть исторические причины).
  • applicationServerKey: в кодировке Base64DOMStringилиArrayBufferСодержит открытый ключ, используемый push-сервером для аутентификации сервера приложений.

Ваш сервер должен сгенерировать паруключ сервера приложений- Также известные как ключи VAPID, они уникальны для вашего сервера. Они представляют собой пару открытого и закрытого ключей. Закрытый ключ тайно хранится на вашем терминале, а открытый ключ передается клиенту. Эти ключи позволяют службе push-уведомлений узнать, какой сервер приложений подписывается на пользователя, и убедиться, что это тот же самый сервер, который инициировал push-сообщение для этого конкретного пользователя.

Вам нужно создать пару закрытый/открытый ключ только один раз для вашего приложения. Способ сделать это сделать это -web-push-codelab.glitch.me/.

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

Ситуация такова:

  • Когда ваше веб-приложение загружено, вы можете вызватьsubscribe()чтобы передать ключ вашего сервера.
  • Браузер делает запрос к службе push, которая генерирует конечную точку, связывает эту конечную точку с ключом и возвращает конечную точку браузеру.
  • Браузеры добавляют эту конечную точку вPushSubscriptionобъект, который проходит черезsubscribe()обещания вернулся.

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

толкать объект

PushSubscriptionСодержит всю информацию, необходимую пользовательскому устройству для отправки push-сообщений. нравится:

{
  "endpoint": "https://domain.pushservice.com/some-id",
  "keys": {
    "p256dh":
"BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=",
    "auth":"FPssMOQPmLmXWmdSTdbKVw=="
  }
}

endpointURL-адрес push-сервиса. Чтобы вызвать push-сообщение, отправьте запрос POST на этот URL-адрес.

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

После того, как пользователь подписался, и у вас естьPushSubscription, вам нужно отправить его на ваш сервер. Там (на сервере) вы сохраняете эту подписку в базе данных и используете ее с этого момента, если хотите отправлять сообщения этому пользователю.

Отправить push-сообщение

Если вы хотите отправлять push-сообщения пользователям, вам сначала понадобится служба push-уведомлений. Вы сообщаете службе push-уведомлений (через вызовы API), какие данные отправлять, кто будет получать данные и другие критерии того, как отправлять данные. Обычно этот вызов API выполняется на вашем сервере.

push-сервис

Служба push-уведомлений должна получить запрос, подтвердить запрос и доставить push-сообщение в соответствующий браузер.

Обратите внимание, что служба push не управляется вами   -   это сторонняя служба. Ваш сервер взаимодействует со службой push через API. Примером push-сервиса являетсяФКМ Google.

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

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

Однако все push-сервисы имеют одинаковый API, поэтому особых сложностей в процессе внедрения не возникает.

Чтобы получить URL-адрес для отправки push-запроса сообщения, вам необходимо проверитьPushSubscriptionхранится в объектеendpointценность.

API push-уведомлений

Push Service API предоставляет способ отправки сообщений пользователям. API на основеПротокол веб-передачи, который является стандартом IETF, определяющим, как выполнять вызовы API для отправки служб.

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

Для каждого push-сообщения вы также можете предоставить следующее описание:

  • TTL ——  Определите, как долго сообщение будет находиться в очереди.По истечении этого времени сообщение будет удалено, а не отправлено. .
  • приоритет ——  Определите приоритет сообщения, поскольку служба push-уведомлений отправляет только сообщения с высоким приоритетом для защиты аккумулятора устройства пользователя.
  • Topic ——  Дайте push-сообщениям тему, и новые сообщения заменят ожидающие сообщения с той же темой, чтобы пользователи не получали устаревшие сообщения, когда устройство активно.

Push-события в браузере

Как упоминалось выше, после того, как сообщение отправлено службе push-уведомлений, оно будет оставаться на линии до тех пор, пока не произойдет одно из следующих событий:

  • Устройство находится в сети.
  • Срок действия сообщения истек в очереди из-за TTL.

Когда push-сервис доставляет сообщение, браузер получает его, расшифровывает и отправляетpushсобытие.

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

  • Push-сообщение поступает в браузер, который его расшифровывает.
  • Браузер будит Service Worker
  • pushСобытия отправляются сервис-воркерам

Код для настройки прослушивателя push-событий должен быть аналогичен коду любого другого прослушивателя событий, написанного на JavaScript:

self.addEventListener('push', function(event) {
  if (event.data) {
    console.log('This push event has data: ', event.data.text());
  } else {
    console.log('This push event has no data.');
  }
});

Одна вещь, которую нужно знать о Service Workers, заключается в том, что вы не можете контролировать, как долго выполняется ваш код Service Worker. Браузер решает, когда его разбудить, а когда прекратить.

В сфере обслуживания,event.waitUntil(promise)Уведомляет браузер о том, что работа выполняется до тех пор, пока обещание не будет разрешено. Он не должен завершать работу сервисного работника, если он хочет завершить работу.

вот обработкаpushПримеры событий:

self.addEventListener('push', function(event) {
  var promise = self.registration.showNotification('Push notification!');

  event.waitUntil(promise);
});

перечислитьself.registration.showNotification()Пользователю отправляется уведомление, и возвращается обещание, которое разрешается всякий раз, когда сообщение показывает это обещание.

showNotification(title, options)Методы могут быть визуально скорректированы в соответствии с вашими потребностями.titleпараметр являетсяstring, тогда как options — это объект, который выглядит так:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",

  "//": "Behavioural Options",
  "tag": "<String>",
  "data": "<Anything>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "silent": "<Boolean>",

  "//": "Both Visual & Behavioural Options",
  "actions": "<Array of Strings>",

  "//": "Information Option. No visual affect.",
  "timestamp": "<Long>"
}

Подробнее о содержании каждой опции можно прочитать здесь — developer.Mozilla.org/en-US/docs/….

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

Например, мы в SessionStack планируем использовать push-уведомления для оповещения пользователей о сбоях, проблемах или исключениях в их продукте. Это позволит пользователю немедленно узнать, что есть проблема. Затем они могут использовать данные, собранные нашей библиотекой (такие как модификации DOM, взаимодействия с пользователем, сетевые запросы, необработанные исключения и отладочная информация), чтобы воспроизвести проблему в виде видео и увидеть все, что в конечном итоге происходит с пользователем.

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

если ты хочешьпопробуйте SessionStack, вот бесплатный план.

ресурс

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

Категории