Сайт с правильными витаминами
Что такое ПВА
Прогрессивное веб-приложение (PWA) — это тип приложения, которое обладает встроенными функциями, подобными приложениям. PWA устанавливается, имеет автономную поддержку и работает быстрее, чем обычно. PWA, как я люблю говорить, — это веб-сайт со всеми необходимыми витаминами. В этом руководстве мы создадим простое PWA, которое можно установить и которое может работать в автономном режиме.
Давайте начнем
Итак, создайте файл index.html и в теге head задайте ему специальный тег ссылки на файл manfest.json — нам нужен файл, чтобы сообщить браузеру, что это PWA. Я использую materlize.css, поэтому получаю приятный стиль панели навигации.
Нужны иконки хотя бы этих размеров, 192*192,512*512, иначе PWA не будет. Поэтому в файле manfest.json заполним необходимые настройки для нашего PWA.
Давайте сломаем это!
Свойство name — это имя приложения, описание — это просто описание приложения, в то время как у нас есть массив наших различных значков (192 * 192 512 *512). 'start_url' – это место, с которого запустится приложение. 'display' – это то, как мы хотим, чтобы наше приложение отображалось. установлен в автономный режим, что означает, что он открывается без браузера. Наконец, «theme_color» — это просто цвет границ приложения.
Регистрация сервис-воркера
Что нам нужно сделать дальше, так это зарегистрировать сервис-воркера; когда мы регистрируем сервис-воркера, мы можем останавливать запросы и кэшировать файлы для автономного использования. ServiceWorkders запускаются в отдельном потоке javascript, и они очень мощные, поэтому мы можем использовать их только на https://, но единственным исключением является localhost. В main.js, который я связал с index.html, мы зарегистрируем сервис-воркера.
Итак, создайте файл с именем sw.js. Затем мы собираемся создать массив файлов, которые мы хотим кэшировать для автономного использования.
У сервис-воркеров есть жизненный цикл, они не просто запускаются при каждом обновлении страницы, они устанавливаются и активируются. Итак, давайте кэшируем все наши важные файлы для использования в автономном режиме, чтобы сделать это, давайте прослушивать событие установки.
Итак, что мы делаем, так это просто прослушиваем событие установки, и self автоматически становится доступным для нас, потому что это зарегистрированный файл сервис-воркера.
Итак, теперь мы прослушиваем событие выборки и пытаемся ответить тем, что находится в кеше, или по умолчанию получаем этот запрос. Вот и все. К настоящему времени у вас должна быть полнофункциональная устанавливаемая PWA. Спасибо за чтение.
