From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../using_service_workers/index.html | 36 +++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'files/ru/web/api/service_worker_api') diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html index d25a516e56..5042cccf4b 100644 --- a/files/ru/web/api/service_worker_api/using_service_workers/index.html +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers

sync

-
try {
+
try {
   const value = myFunction();
   console.log(value);
 } catch(err) {
@@ -75,7 +75,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
async

 
-
myFunction().then((value) => {
+
myFunction().then((value) => {
   console.log(value);
 }).catch((err) => {
   console.log(err);
@@ -89,7 +89,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
{{note("Реальные реализации сервис-воркеров скорее всего будут использовать onfetch, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}

 
-
const imgLoad = (url) => {
+
const imgLoad = (url) => {
   return new Promise((resolve, reject) => {
     var request = new XMLHttpRequest();
     request.open('GET', url);
@@ -115,7 +115,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
Вызывая функцию imgLoad(), мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:

 
-
let body = document.querySelector('body');
+
let body = document.querySelector('body');
 let myImage = new Image();
 
 imgLoad('myLittleVader.jpg').then((response) => {
@@ -161,7 +161,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.

 
-
if ('serviceWorker' in navigator) {
+
if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'})
   .then((reg) => {
     // регистрация сработала
@@ -224,7 +224,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это первый блок кода, который вы увидите в нашем сервис-воркере:

 
-
self.addEventListener('install', (event) => {
+
self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open('v1').then((cache) => {
       return cache.addAll([
@@ -268,7 +268,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
Вы можете подключить к сервис-воркеру обработчик события fetch и внутри него на объекте события вызвать метод respondWith(), чтобы заменить ответы и показать собственную "магию".

 
-
self.addEventListener('fetch', (event) => {
+
self.addEventListener('fetch', (event) => {
   event.respondWith(
     // магия происходит здесь
   );
@@ -277,7 +277,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:

 
-
self.addEventListener('fetch', (event) => {
+
self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request)
   );
@@ -291,29 +291,29 @@ imgLoad('myLittleVader.jpg').then((response) => {
  
  • 
   
    Конструктор {{domxref("Response.Response","Response()")}} позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:
    
 
-  
    new Response('Hello from your friendly neighbourhood service worker!');
+  
    new Response('Hello from your friendly neighbourhood service worker!');
 
    
 
   
    В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:
    
 
-  
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+  
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
   headers: { 'Content-Type': 'text/html' }
 });
    
  
    • 
  
  • 
   
    Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:
    
 
-  
    fetch(event.request);
    
+  
    fetch(event.request);
    
  
    • 
  
  • 
   
    Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:
    
 
-  
    caches.match('./fallback.html');
    
+  
    caches.match('./fallback.html');
    
  
    • 
  
  • 
   
    Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:
    
 
-  
    event.request.url
+  
    event.request.url
 event.request.method
 event.request.headers
 event.request.body
    
@@ -326,7 +326,7 @@ event.request.body
    
 
 
    К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request).then((response) => {
       return response || fetch(event.request);
@@ -338,7 +338,7 @@ event.request.body
    
 
 
    Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в офлайн-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request).then((resp) => {
       return resp || fetch(event.request).then((response) => {
@@ -357,7 +357,7 @@ event.request.body
    
 
 
    У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request).then((resp) => {
       return resp || fetch(event.request).then((response) => {
@@ -382,7 +382,7 @@ event.request.body
    
 
 
    Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):
    
 
-
    self.addEventListener('install', (event) => {
+
    self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open('v2').then((cache) => {
       return cache.addAll([
@@ -410,7 +410,7 @@ event.request.body
    
 
 
    Promise, переданный в waitUntil(), заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие fetch на основе нового кеша.
    
 
-
    self.addEventListener('activate', (event) => {
+
    self.addEventListener('activate', (event) => {
   var cacheKeeplist = ['v2'];
 
   event.waitUntil(
-- 
cgit v1.2.3-54-g00ecf