From 382abab7f1c10ba64cf69fa4a2c30cf1df964523 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn Код взят примера из примера пользовательская оффлайн страница (живой пример). Код взят примера из примера пользовательская офлайн-страница (живой пример). Следующий пример использует кеш для предоставления данных, когда запрос не удался. Выражение {{ServiceWorkerSidebar}} В данной статье содержится информация о начале работы с сервис-воркерами, включая базовую архитектуру, процесс регистрации, а также установку и активацию новых сервис-воркеров, обновление существующих сервис-воркеров, управление кешем и настраиваемые ответы и все это в контексте простого приложения с offline-функциональностью. В данной статье содержится информация о начале работы с сервис-воркерами, включая базовую архитектуру, процесс регистрации, а также установку и активацию новых сервис-воркеров, обновление существующих сервис-воркеров, управление кешем и настраиваемые ответы и все это в контексте простого приложения с офлайн-функциональностью.Примеры
-catch()
выполняется когда вызов fetch()
возбуждает исключение. Внутри выражения catch()
, match()
используется для возврата корректного ответа.
diff --git a/files/ru/web/api/networkinformation/index.html b/files/ru/web/api/networkinformation/index.html
index 4efcc90c13..e763d7131c 100644
--- a/files/ru/web/api/networkinformation/index.html
+++ b/files/ru/web/api/networkinformation/index.html
@@ -102,6 +102,6 @@ translation_of: Web/API/NetworkInformation
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 363d4331eb..b74b6c7c9a 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
@@ -8,7 +8,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
Предпосылки появления Service Workers
@@ -18,7 +18,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
Предыдущей попыткой была технология AppCache, казавшаяся хорошей идеей, потому как позволяла действительно просто указывать ресурсы для кеширования. Однако, эта технология допускает много предположений о том, что вы пытаетесь сделать, и затем с грохотом ломается, когда ваше приложение работает не в точности с этими допущениями. Чтобы получить больше информации по этой теме, прочитайте (неудачно названную, но хорошо написанную) статью Джейка Арчибальда Application Cache is a Douchebag.
На заметку: Начиная с Firefox 44, когда используется AppCache для предоставления странице поддержки offline-режима, в консоли разработчика отображается предупреждение о том, что нужно использовать технологию Service Workers ({{bug("1204581")}}.)
+На заметку: Начиная с Firefox 44, когда используется AppCache для предоставления странице поддержки офлайн-режима, в консоли разработчика отображается предупреждение о том, что нужно использовать технологию Service Workers ({{bug("1204581")}}.)
Технология Service Workers должна в итоге решить озвученные выше вопросы. Синтаксис Service Worker более сложен, чем тот же AppCache, но взамен вы можете посредством JavaScript контролировать AppCache-подразумеваемое поведение с высокой степенью детализации, что позволяет вам решить описанную проблему и многие другие. Используя Service Worker, вы можете без труда получить приложение, использующее в первую очередь кешированные ресурсы, предоставляя тем самым поведение по умолчанию в автономном режиме, до того как будет получено по сети больше данных (такой подход называется Offline First). Так обычно работают нативные приложения, что часто является причиной выбора пользователя в их пользу.
@@ -44,7 +44,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workersinstall
всегда посылается первым воркеру (оно может быть использовано для запуска начальной загрузки данных в IndexedDB, для кеширования ресурсов). Данный этап сродни процедуре установки нативного или FirefoxOS-приложения — все делается доступным для использования в оффлайн-режиме.install
всегда посылается первым воркеру (оно может быть использовано для запуска начальной загрузки данных в IndexedDB, для кеширования ресурсов). Данный этап сродни процедуре установки нативного или FirefoxOS-приложения — все делается доступным для использования в офлайн-режиме.oninstall
завершит свою работу, сервис-воркер считается установленным.onactivate
, которое обычно используется для очистки ресурсов, задействованных в предыдущей версии скрипта сервис-воркера.register()
. То есть документ может начать жизнь с сервис-воркером или даже без него и продолжать нормально работать. Поэтому документы должны быть перезагружены, чтобы действительно быть подконтрольными сервис-воркеру.Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое sw-test. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также ещё регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!
+Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое sw-test. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также ещё регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в офлайн-режиме!
@@ -216,7 +216,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
После того как ваш сервис-воркер будет зарегистрирован, браузер может попробовать установить его и активировать на странице/сайте.
-Событие install возникает после того как установка успешно завершится. Это событие используется главным образом для того, чтобы заполнить кеш браузера ресурсами, необходимыми для успешного запуска в offline-режиме. Для этого используется новый API хранилища Service Worker — {{domxref("cache")}} — глобальный для всех сервис-воркеров, который позволяет нам хранить результаты запросов, используя в качестве ключа для их получения сами запросы. Этот API работает аналогично стандартному кешу браузера, но только для вашего домена. Данные в кеше сохраняются до тех пор, пока вы сами не решите их удалить — вы имеете полный контроль.
+Событие install возникает после того как установка успешно завершится. Это событие используется главным образом для того, чтобы заполнить кеш браузера ресурсами, необходимыми для успешного запуска в офлайн-режиме. Для этого используется новый API хранилища Service Worker — {{domxref("cache")}} — глобальный для всех сервис-воркеров, который позволяет нам хранить результаты запросов, используя в качестве ключа для их получения сами запросы. Этот API работает аналогично стандартному кешу браузера, но только для вашего домена. Данные в кеше сохраняются до тех пор, пока вы сами не решите их удалить — вы имеете полный контроль.
На заметку: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в Google's Topeka demo, или можете хранить ресурсы в IndexedDB.
@@ -336,7 +336,7 @@ event.request.bodyЕсли промис будет отклонён, функция catch()
вернёт обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.
Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:
+Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в офлайн-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:
self.addEventListener('fetch', (event) => { event.respondWith( diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html index c20696432a..e5d5ab4ee5 100644 --- a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_APIПосле того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу.
-Внимание: В Chrome распознавание речи на веб-странице завязано на взаимодействие с сервером. Ваш звук отправляется на веб-службу для обработки распознавания, поэтому приложение не будет работать в оффлайн-режиме.
+Внимание: В Chrome распознавание речи на веб-странице завязано на взаимодействие с сервером. Ваш звук отправляется на веб-службу для обработки распознавания, поэтому приложение не будет работать в офлайн-режиме.
Демо
diff --git a/files/ru/web/api/windoworworkerglobalscope/caches/index.html b/files/ru/web/api/windoworworkerglobalscope/caches/index.html index 3817e40475..107d43f6a4 100644 --- a/files/ru/web/api/windoworworkerglobalscope/caches/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/caches/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/caches-
caches
{{domxref("WindowOrWorkerGlobalScope")}} свойство только для чтения интерфейса возвращающее объект ассоциированный с текущим контекстом {{domxref("CacheStorage")}}.Этот объект реализует такую функциональность как строгое соответствие для оффлайн использования и генерирование пользовательских ответов на запросы.
+Этот объект реализует такую функциональность как строгое соответствие для офлайн-использования и генерирование пользовательских ответов на запросы.
Синтаксис
diff --git a/files/ru/web/guide/html/html5/index.html b/files/ru/web/guide/html/html5/index.html index 70cb73fa9c..3656e1b81b 100644 --- a/files/ru/web/guide/html/html5/index.html +++ b/files/ru/web/guide/html/html5/index.html @@ -18,7 +18,7 @@ original_slug: HTML/HTML5
HTML5 предоставляет механизм кеширования приложения, позволяющий веб-приложениям работать в автономном режиме. Разработчики теперь могут использовать интерфейс Кеша приложения (AppCache), сообщая браузеру, какие из ресурсов браузеру следует закешировать и сделать доступными в режиме оффлайн. Закодированные приложения загружаются и работают корректно, даже если пользователь обновляет страницу в тот момент, когда он отключён от сети.
+HTML5 предоставляет механизм кеширования приложения, позволяющий веб-приложениям работать в автономном режиме. Разработчики теперь могут использовать интерфейс Кеша приложения (AppCache), сообщая браузеру, какие из ресурсов браузеру следует закешировать и сделать доступными в режиме офлайн. Закодированные приложения загружаются и работают корректно, даже если пользователь обновляет страницу в тот момент, когда он отключён от сети.
Использование механизма кеширования даёт следующие преимущества:
Вам следует включить атрибут manifest
в каждую страницу вашего приложения, внутри которой вы хотели бы осуществлять кеширование. Браузер не закеширует страницы, не содержащие атрибута manifest
, пока такие страницы не будут явно указаны в файле манифеста. Вам не обязательно перечислять все страницы, которые вы хотите закешировать, в файле манифеста, т.к. браузер неявно добавляет в кеш приложения каждую посещаемую пользователем страницу, где есть атрибут manifest
.
Некоторые браузеры (например, Firefox) показывают панель уведомлений , когда пользователь загружает использующее кеш приложение в первый раз. Панель уведомлений может показывать примерно такое сообщение::
Этот веб-сайт (www.example.com
) запрашивает у вас разрешение на хранение данных для автономной работы на вашем компьютере. [Разрешить] [Никогда для этого сайта] [Не сейчас]
Термин "оффлайн(-доступные) приложения" иногда относится конкретно к приложениям, которым пользователь разрешил использовать возможности работы оффлайн.
+Термин "офлайн(-доступные) приложения" иногда относится конкретно к приложениям, которым пользователь разрешил использовать возможности работы офлайн.
Использование кеша приложений изменяет обычный процесс загрузки документа:
checking
объекту window.applicationCache
и получает файл манифеста в соответствии с правилами кеширования HTTP.noupdate
объекту applicationCache
, завершая процесс обновления. Обратите внимание, если вы изменили закешированные ресурсы на стороне сервера, вам также необходимо изменить и файл манифеста, тем самым давая браузеру знать, какие из ресурсов нужно получить повторно.applicationCache.add()
, попадают во временный кеш с учётом правил кеширования HTTP. Во время обновления каждого файла в этом временном кеше браузер посылает событие progress
объекту applicationCache
. Если происходит ошибка, браузер посылает событие error
, а обновление прекращается.applicationCache
посылается событие cached
. Поскольку документ уже был загружен в браузер из кеша, обновлённый документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).applicationCache
посылается событие cached
. Поскольку документ уже был загружен в браузер из кеша, обновлённый документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).В Chrome оффлайн-кеш можно очистить, выбрав «Очистить историю...» в настройках или перейдя на адрес chrome://appcache-internals/. У Safari также есть похожий пункт «Очистить кеш» в настройках, но для этого также может понадобиться перезапуск браузера.
-Firefox хранит данные оффлайн-кеша отдельно от профиля — по соседству с обычным дисковым кешем:
+В Chrome офлайн-кеш можно очистить, выбрав «Очистить историю...» в настройках или перейдя на адрес chrome://appcache-internals/. У Safari также есть похожий пункт «Очистить кеш» в настройках, но для этого также может понадобиться перезапуск браузера.
+Firefox хранит данные офлайн-кеша отдельно от профиля — по соседству с обычным дисковым кешем:
C:\Users\<пользователь>\AppData\Local\Mozilla\Firefox\Profiles\<соль>.<имя профиля>\OfflineCache
/Users/<пользователь
>/Library/Caches/Firefox/Profiles/<соль
>.<имя профиля
>/OfflineCache
Текущее состояние оффлайн-кеша в Firefox можно посмотреть на странице about:cache
(в разделе «Offline cache device»). Оффлайн-кеш можно очистить по отдельности для каждого сайта, используя кнопку «Удалить...» в разделе Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое.
Текущее состояние офлайн-кеша в Firefox можно посмотреть на странице about:cache
(в разделе «Offline cache device»). Офлайн-кеш можно очистить по отдельности для каждого сайта, используя кнопку «Удалить...» в разделе Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое.
До Firefox 11 кеш нельзя было очистить ни кнопкой Инструменты -> Удалить недавнюю историю, ни Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое -> Очистить сейчас. Сейчас эта проблема устранена.
-В Linux настройки оффлайн-кеша можно найти в разделе Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое и данные пользователя
+В Linux настройки офлайн-кеша можно найти в разделе Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое и данные пользователя
Смотрите также очистка данных хранилища DOM.
Также кеши приложения могут устареть. Если с сервера удалить файл манифеста, браузер удалит все кеши, которые были в нём указаны, и пошлёт событие obsoleted
объекту applicationCache
, что установит состояние кеша в OBSOLETE
.
Заметка: Для дополнительной информации об ускорении запуска ознакомьтесь с Optimizing startup performance.
Следует также отметить, что ресурсы, закешированные локально, могут быть загружены гораздо быстрее, чем динамические данные, загруженные через мобильную сеть с её задержками или узким каналом. Локальное кеширование и работа в оффлайне могут быть достигнуты с помощью Service Workers. См. Making PWAs work offline with Service workers для подробностей.
+Следует также отметить, что ресурсы, закешированные локально, могут быть загружены гораздо быстрее, чем динамические данные, загруженные через мобильную сеть с её задержками или узким каналом. Локальное кеширование и работа в офлайне могут быть достигнуты с помощью Service Workers. См. Making PWAs work offline with Service workers для подробностей.