diff options
Diffstat (limited to 'files/ru/conflicting/web/api/push_api/index.html')
| -rw-r--r-- | files/ru/conflicting/web/api/push_api/index.html | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/files/ru/conflicting/web/api/push_api/index.html b/files/ru/conflicting/web/api/push_api/index.html index d4c8ee1d29..7b84af7c0a 100644 --- a/files/ru/conflicting/web/api/push_api/index.html +++ b/files/ru/conflicting/web/api/push_api/index.html @@ -15,17 +15,17 @@ original_slug: Web/API/Push_API/Using_the_Push_API <h2 id="Демо_основы_простого_сервера_чат-приложения">Демо: основы простого сервера чат-приложения</h2> -<p>Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p> +<p>Демо, которые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p> <p>На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> -<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> +<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметьте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запускается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> <h2 id="Обзор_технологии">Обзор технологии</h2> -<p>Эта секция предоставляет описание того, какие технологии учавствуют в примере.</p> +<p>Эта секция предоставляет описание того, какие технологии участвуют в примере.</p> <p>Web Push-сообщения это часть семейства технологий <a href="/en-US/docs/Web/API/Service_Worker_API">сервис воркеров</a>; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:</p> @@ -37,10 +37,10 @@ original_slug: Web/API/Push_API/Using_the_Push_API <p>Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.</p> <div class="note"> -<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p> +<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифрованием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p> </div> -<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для управления отправкой push-сообщений.</p> +<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собственный сервер push-сообщений для управления отправкой push-сообщений.</p> <h3 id="Шифрование">Шифрование</h3> @@ -48,10 +48,10 @@ original_slug: Web/API/Push_API/Using_the_Push_API <p><strong>Примечание</strong>: Для интерактивного краткого обзора, попробуйте JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> </div> -<p>Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> +<p>Для отправки данных с помощью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифрованием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> <div class="note"> -<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> +<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помощью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> </div> <h3 id="Обобщение_рабочего_процесса_Push">Обобщение рабочего процесса Push</h3> @@ -60,17 +60,17 @@ original_slug: Web/API/Push_API/Using_the_Push_API <ol> <li>Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.</li> - <li>Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li> - <li>Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.</li> - <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что <code>getKey()</code> на данный момент эксперементальная технологий и доступна только в Firefox.)</li> + <li>Регистрация сервис воркера для контроля над страницей с помощью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li> + <li>Подписка на сервис push-уведомлений с помощью {{domxref("PushManager.subscribe()")}}.</li> + <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметьте, что <code>getKey()</code> на данный момент экспериментальная технологий и доступна только в Firefox.)</li> <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> - <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте <code>port2</code> сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li> + <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправьте <code>port2</code> сервис воркеру с помощью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li> <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li> - <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li> + <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичный ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li> <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения. <ol> <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li> - <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" class="hidden"> </span></li> + <li>Если вы хотите ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметьте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" class="hidden"> </span></li> </ol> </li> </ol> @@ -81,7 +81,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API <h3 id="HTML_и_CSS">HTML и CSS</h3> -<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p> +<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для входа в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p> <p>CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.</p> |