Сегодня мы создаем первую автономную веб-страницу с помощью обслуживающего персонала.
Что такое обслуживающий персонал?
Сервис-воркеры могут запускать BackGround в наших браузерах без взаимодействия с пользователем. Они работают в ветке There Own и работают даже при закрытии браузера / закрытии сайта.
Сервис-воркеры работают только на защищенных сайтах, таких как (https), во время разработки они будут работать на localhost.
Сегодня мы используем Service Workers для создания нашей автономной веб-страницы.
Во-первых, нам нужно проверить, доступны ли сервис-воркеры в браузере.
это код нашего файла script.js.
что делает приведенный выше код, если в навигации есть сервисный работник
если это так, запустите этот код внутри блока.
нам нужно создать пустой файл sw.js и указать путь к файлу sw.js в методе регистрации.
Метод Register дает нам обещание, если он успешно зарегистрирован
, тогда мы в порядке, иначе во время регистрации возникнут проблемы.
Теперь мы в файле Sw.js
это разные события жизненного цикла, которые предлагает нам сервисный работник
, которые: установить, активировать, получить?
Во-первых, нам нужно установить сервис-воркер, для чего нам нужно написать код.
Установить событие
self.addEventListener('install',function(){})
это похоже на эти
Во время установки нам нужно открыть кеш и поместить в него наши статические ресурсы.
event.waitUntil () принимает обещание, так что он ждет, пока обещание
не будет выполнено. Например, подождите, пока активы не будут помещены в кеш.
Я пропускаю событие активации, которое мы уже кэшировали в наших статических ресурсах в кэше с именем * ’my-cache-1 ' *.
Теперь мы хотим получить доступ к кешу и использовать ресурсы внутри кеша вместо отправки сетевого запроса.
Получить событие
Сначала он проверяет, что запрошенный файл находится в кеше, если да, используйте его или отправьте сетевой запрос.
Вау, мы успешно завершили нашу простую оффлайн веб-страницу
Это наш окончательный результат. Попробуйте сами, если у вас есть какие-либо сомнения, не стесняйтесь спрашивать.
Удачного кодирования…
Посмотрите мою книгу на JavaScript
Ресурсы
✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
