Данный пример взят со ссылкой на https://googlechrome.github.io/samples/service-worker/basic/. Это простое руководство по началу работы с сервис-воркером для страницы вашего профиля на GitHub.

Что делает сервис-воркер?

  • Предварительно кэширует файлы HTML, JavaScript и CSS, необходимые для отображения этой страницы в автономном режиме. (Попробуйте, перезагрузив страницу без подключения к сети!)
  • Очищает ранее предварительно кэшированные записи при обновлении имени кэша.
  • Перехватывает сетевые запросы, возвращая кешированный ответ, когда он доступен.
  • Если кешированного ответа нет, извлекает ответ из сети и добавляет его в кеш для будущего использования.

Давайте начнем

  1. Создайте учетную запись GitHub, посетите https://pages.github.com/ и следуйте инструкциям по созданию сайта.

2. После того, как ваш сайт создан, убедитесь, что SSL включен на сайте, так как `navigator.serviceWorker` не будет работать без SSL.

2. Подготовьте страницу своего профиля

3. Добавьте service-worker.js в репозиторий

4. Добавьте поддержку сервисного работника в файл index.html непосредственно перед закрывающим тегом body.

5. Проверьте в браузере, работает ли автономный режим. Проверьте свой сайт в Chrome, перейдите на вкладку «Приложение» и выберите «Сервисные работники» в меню слева. Проверьте, зарегистрирован ли service-worker.js. установите флажок в автономном режиме и обновите страницу, чтобы проверить автономную версию страницы.

6. Зафиксируйте и отправьте изменения, чтобы проверить, работает ли username.github.io в автономном режиме.

Не забывайте всегда добавлять свои ресурсы в service-worker.js, чтобы активировать функциональность в автономном режиме. Эта опция открывает широкие возможности для создания прогрессивного веб-приложения (PWA). Чтобы ваш сайт работал как приложение, подготовьте файлы JavaScript для использования localStorage вместо вызовов API, чтобы обеспечить интерактивность даже в автономном режиме и позже, синхронизируйте сервер данных с localstorage.

Пожалуйста, клонируйте репозиторий GitHub, чтобы узнать больше и отладить настройку.

Конечный результат

Проверьте рабочий пример на https://grvsooryen.github.io/

Первоначально опубликовано на сайте wantsonline.blogspot.com.