Данный пример взят со ссылкой на https://googlechrome.github.io/samples/service-worker/basic/. Это простое руководство по началу работы с сервис-воркером для страницы вашего профиля на GitHub.
Что делает сервис-воркер?
- Предварительно кэширует файлы HTML, JavaScript и CSS, необходимые для отображения этой страницы в автономном режиме. (Попробуйте, перезагрузив страницу без подключения к сети!)
- Очищает ранее предварительно кэшированные записи при обновлении имени кэша.
- Перехватывает сетевые запросы, возвращая кешированный ответ, когда он доступен.
- Если кешированного ответа нет, извлекает ответ из сети и добавляет его в кеш для будущего использования.
Давайте начнем
- Создайте учетную запись 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.