Перевод серии веб-пуш-уведомлений | Введение и обзор

внешний интерфейс сервер Google PWA
Перевод серии веб-пуш-уведомлений | Введение и обзор

введение

Участники (в произвольном порядке):Рен Цзяле,Ян Синьсинь,Лю Вэньтао,Чжан Чжо,Лю Пэн.

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

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

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

Каталог статей

  1. Обзор — веб-push-уведомления: своевременные, актуальные и точные
  2. Как работает пуш
  3. Как подписаться на пользователя
  4. Взаимодействие с запросом разрешения
  5. Отправляйте сообщения через веб-библиотеку push-уведомлений
  6. Протокол веб-передачи
  7. Обработка push-событий
  8. показать уведомление
  9. поведение уведомления
  10. Общие шаблоны уведомлений
  11. FAQ
  12. Часто задаваемые вопросы и отзывы об ошибках

Часть 1. Обзор — веб-push-уведомления: своевременные, релевантные и точные

Оригинальный адрес:web-push-notifications

Адрес перевода:Обзор — веб-push-уведомления

Переводчик:Лю Пэн

Корректор:Рен Цзяле,Чжан Чжо

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

Example Notification

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

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

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

Связано ли это с работниками сферы обслуживания?

Да, push основан на сервис-воркере, потому что сервис-воркер отвечает за операцию в фоновом режиме. Это означает, что соответствующий код будет выполняться только тогда, когда пользователь нажимает или закрывает уведомление (другими словами, батарея разряжена). Если вы все еще не знакомы с этим, пожалуйста, проверьтеservice worker introductionглава. В последующих главах мы будем использовать код сервис-воркера, чтобы показать вам, как реализовать push-уведомления.

две технологии

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

Небольшой разбор уведомлений

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

serviceWorkerRegistration.showNotification(title, options);

titleПараметр представляет заголовок уведомления.optionsПараметр представляет собой литерал объекта, который используется для установки других свойств уведомления. Объект параметров обычно представляется следующим образом:

{
  "body": "Did you make a $1,000,000 purchase at Dr. Evil...",
  "icon": "images/ccard.png",
  "vibrate": [200, 100, 200, 100, 200, 100, 400],
  "tag": "request",
  "actions": [
    { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
    { "action": "no", "title": "No", "icon": "images/no.png" }
  ]
}
Example NotificationЭти коды будут генерировать уведомление, как показано. Обычно он предоставляет те же возможности, что и нативные приложения. Прежде чем углубляться в детали реализации этих возможностей, я покажу вам, как их эффективно использовать. Мы продолжим описывать механику реализации push-уведомлений, включая то, как обрабатывать разрешения, подписываться, отправлять сообщения и как отвечать на сообщения.

Как я могу попробовать это?

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

  1. Первый, посмотрите наНаш собственный пример;
  2. Второй — Питер Беверлоо.генератор уведомлений;
  3. В-третьих, MozillaПример отправки полезной нагрузки.

Совет. Если ваша страница не находится на локальном хосте, push-API должен требовать, чтобы страница была HTTPS.

Чтобы узнать больше, подпишитесь на YFE:

Далее: Перевод серии "Web Push Notification" | Часть 2: Как работает push?

Категории