Введение в прогрессивные приложения JavaScript
Development, Java | Комментировать запись
Благодаря сервис-воркерам сегодня сайты могут вести себя почти как нативные приложения (в браузерах, которые поддерживают эту технологию). Подобные сайты называются прогрессивными веб-приложениями (или PWA, progressive web app).
Прогрессивные веб-приложения позволяют выполнять такие действия, как установка на главный экран и доступ в офлайн режиме. Попробуйте отключить Wi-Fi и перезагрузить страницу прогрессивного приложения (если вы используете Chrome или Firefox). Вы увидите, что страница загружается нормально, потому что она была кэширована, а кэшированная версия обслуживается через service worker.
Читайте также: От сайта Gatsby к прогрессивному приложению
Контрольный список для прогрессивных веб-приложений
Чтобы веб-приложение считалось прогрессивным, необходимо выполнить несколько условий. Наиболее важными для работы базового прогрессивного веб-приложения являются следующие три параметра:
- сайт должен обслуживаться через https.
- у него должен быть манифест.
- у него должен быть работающий сервис-воркер.
Удовлетворив эти три условия, вы получите базовое прогрессивное веб-приложение, которое может быть доступно офлайн и загружает статические ресурсы из кэша. Вы можете использовать расширение Chrome под названием Lighthouse, чтобы провести аудит и посмотреть, какое место занимает ваше приложение в спектре:
Манифест веб-приложения
Манифест веб-приложения — это JSON файл, содержащий метаданные о приложении. Манифест очень важен, так как именно этот файл позволяет браузерам на телефонах Android устанавливать веб-приложения на домашнем экране.
Этот генератор манифестов веб-приложений упрощает создание файла manifest.json. Он даже поможет вам сгенерировать значки всех размеров из одного значка 512×512.
Получив файл manifest.json, включите его в код приложения:
<link rel="manifest" href="/path/to/manifest.json">
Содержание манифеста веб-приложения может, к примеру, выглядеть так:
{ "name": "Alligator.io", "short_name": "Alligator", "theme_color": "#138e69", "background_color": "#f8ea48", "display": "browser", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
Сервис-воркеры
Сервис-воркеры (Service Worker) — это новая технология, доступная в некоторых современных браузерах. Она позволяет контролировать сетевые запросы. Сервис-воркеры позволяют кэшировать контент и контролировать работу, когда нет доступа к сети или интернет очень медленный. В случае веб-приложений сервис-воркер может кэшировать активы для оболочки, благодаря чему они всегда будут доступны офлайн (или при медленном интернете).
Регистрация сервис-воркера
Первым шагом в создании сервис-воркера является его регистрация.
Вот пример сценария, который вы можете использовать для регистрации сервис-воркера. Обратите внимание, сначала скрипт проверяет, поддерживаются ли сервис-воркеры:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { console.log('ServiceWorker registration successful!'); }).catch(function(err) { console.log('ServiceWorker registration failed: ', err); }); }
Как видите, сервис-воркер находится в корневой папке. Это означает, что его действие будет распространяться на все веб-приложение. Если бы он находился во вложенной папке, по умолчанию его работа была бы ограничена только этой вложенной папкой.
Создание сервис-воркера
Что касается создания самого сервис-воркера, это довольно сложный процесс. Инструмент SW-Toolbox поможет вам сократить шаблонный код сервис-воркера. Кодирование сервис-воркера вручную включает в себя настройку прослушивателей для событий установки, активации и извлечения. К счастью, SW-Toolbox позаботится об этом самостоятельно.
Установить SW-Toolbox можно через npm:
$ npm install --save sw-toolbox
Затем в зарегистрированном ранее сервис-воркере (например, service-worker.js) импортируйте SW-Toolbox с помощью self.importScripts():
self.importScripts('node_modules/sw-toolbox/sw-toolbox.js');
Например, воркер может выглядеть так:
self.toolbox.precache(['/images/logo-small.svg', '/images/web-icons/webicon-twitter.svg', '/images/web-icons/webicon-facebook.svg']); self.toolbox.router.get('/*', toolbox.networkFirst);
Этот воркер предварительно кэширует несколько ресурсов, а затем кэширует все остальное. Прежде чем использовать кэшированную версию по умолчанию, он сначала пытается получить свежие данные из сети.
Такой вариант хорошо подходит для статического веб-сайта (например, для нашего информатория), но кэширование всего контента не будет работать в контексте реального веб-приложения, которое использует динамические данные.
Примечание: Подробнее узнать, что еще умеет SW-Toolbox, можно в этом руководстве.
Если вы хотите покопаться в сервис-воркерах, Mozilla составила отличный ресурс для изучения сервис-воркеров с примерами кода для различных функций.
Тестирование
Когда все будет готово, вы можете проверить манифест веб-приложения и сервис-воркер во вкладке Application в Chrome DevTools.
Рекомендуем поиграть с параметром Offline, чтобы проверить, как ваше приложение будет реагировать на офлайн режим. Экспериментируя с различными конфигурациями сервис-воркеров, подумайте о возможности отменить регистрацию текущего воркера, чтобы вместо него зарегистрировать новую версию.
Заключение
Данное руководство представляет собой лишь краткое введение в прогрессивные приложения. Возможно, вы захотите глубже погрузиться в изучение этой технологии. Вот несколько хороших ресурсов:
- Более подробный контрольный список условий для PWA от Google.
- Портал о прогрессивных веб-приложениях от Google.
Tags: Javascript