Начало работы с прогрессивными веб-приложениями (PWA)
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
В наши дни прогрессивные веб-приложения (PWA) становятся все более популярными. Возможно, вы уже использовали PWA, не зная, потому что многие крупные веб-сайты уже расширили свои платформы с помощью функций PWA.
Прогрессивное веб-приложение - это веб-приложение, в котором используются новейшие веб-технологии, чтобы веб-приложение работало и ощущалось как приложение. Это достигается за счет использования файлов манифеста веб-приложения и рабочих служб. Используя эти технологии, PWA может сократить разрыв между классическим веб-приложением и настольным компьютером. или родное мобильное приложение.
Строительные блоки PWA
Чтобы улучшить классическое веб-приложение с помощью функций PWA, вы должны добавить в свое приложение два основных строительных блока: файл манифеста веб-приложения и сервис-воркер. Давайте выясним, в чем суть этих двух элементов.
Манифест веб-приложения
Основная цель файла манифеста веб-приложения - предоставить информацию о веб-приложении. Структура JSON этого файла может содержать такую информацию, как имя, автор, значки и описание. Эта информация используется для установки веб-приложения на домашний экран устройства, чтобы пользователь мог более легко получить доступ к приложению и иметь общий опыт работы с приложением.
Сервисные работники
Service worker - это файл JavaScript, который добавляется в проект и регистрируется в браузере. Затем сценарий сервис-воркера может работать в фоновом режиме и выполнять такие задачи, как:
- Распознавание состояния сети и отображение специальной страницы при отсутствии подключения к сети / Интернету.
- Добавляйте данные приложения в кеш браузера в режиме онлайн и предоставляйте эти данные в автономном режиме.
- Показывать push-уведомления пользователю, когда ваш сайт не открыт.
Как видно из этого списка вариантов использования, работники сервисов очень мощные и могут помочь улучшить взаимодействие с пользователем и значительно повысить коэффициент конверсии.
На данный момент только Chrome, Firefox и Opera имеют адекватную поддержку для обслуживающего персонала. Конечно, это означает, что не хватает двух крупных игроков: Safari и Edge. Однако Apple начала работу над добавлением Service Workers в WebKit, механизм компоновки с открытым исходным кодом, который недавно использовался браузером Safari. Так что вскоре мы можем ожидать увидеть поддержку сервис-воркеров в Safari.
То же самое и с Microsoft Edge. Согласно https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/, функция Service Worker находится в стадии разработки и будет доступна для браузеров Edge в ближайшем будущем.
Реализация первого PWA
Теперь, когда у вас есть базовое представление о том, что такое PWA и как различные части сочетаются друг с другом, давайте продолжим создание простого примера приложения.
Настройка проекта
Сначала нам нужно создать новый проект. В качестве начального шаблона мы используем бесплатный шаблон Bootstrap с сайта https://startbootstrap.com/template-overviews/freelancer/. Нажмите кнопку Загрузить V4, чтобы загрузить исходный код, основанный на платформе Bootstrap 4, в виде ZIP-архива. Распакуйте содержимое архива в любую папку по вашему выбору.
Чтобы убедиться, что все было успешно загружено, переключитесь в командную строку и перейдите во вновь созданный каталог проекта. Чтобы запустить веб-сервер разработки в этой папке, мы используем live-server, который доступен как пакет NPM. Если вы еще не установили live-сервер, вы можете сделать это, выполнив сначала следующую команду для глобальной установки сервера в вашей системе:
$ npm install -g live-server
Теперь мы можем запустить сервер с помощью
$ live-server
Сервер запускается, и приложение становится доступным через порт 8080. При доступе к http: // localhost: 8080 в вашем браузере теперь должна отображаться начальная страница шаблона Bootstrap, как вы можете видеть на следующем снимке экрана:
На следующих этапах мы расширим это веб-приложение с помощью строительных блоков PWA.
Добавление значка приложения
У пользователя будет возможность добавить наш PWA на домашний экран мобильного устройства. Поэтому нам нужно включить значок приложения.
В качестве основы для значка приложения мы будем использовать изображение, уже включенное в проект: img / profile.png.
Поскольку значок нашего приложения должен работать на разных платформах и с разным разрешением экрана, нам необходимо предоставить значок в разных размерах. Для создания всех необходимых размеров мы можем использовать http://www.favicon-generator.org/. Загрузите файл profile.png и выберите параметр Создавать значки для веб-приложений, приложений Android, Microsoft и iOS (iPhone и iPad) и нажмите кнопку Создать значок. Результат должен выглядеть следующим образом:
В результате вы получите ZIP-файл, который можно загрузить в каталог проекта. В каталоге вашего проекта распакуйте этот архив в новую папку. На следующем шаге мы предположим, что файлы png извлечены в папку с именем img / icons.
Затем скопируйте HTML-код, указанный на сайте загрузки, и вставьте этот код в заголовок index.html. Кроме того, измените значение, присвоенное значению href каждого элемента ‹link›. Каждый путь также должен содержать префикс img / icons /, так что теперь код должен выглядеть следующим образом:
<!-- App Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="img/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
<link rel="manifest" href="img/icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">Добавление файла манифеста
Теперь нам нужно добавить файл манифеста приложения. Однако, если вы внимательно посмотрите на HTML-код, который был вставлен на последнем шаге, вы заметите, что файл manifest.json уже был добавлен через следующую строку:
<link rel="manifest" href="img/icons/manifest.json">
Мы будем использовать этот файл в качестве основы для манифеста нашего приложения. Заглянем внутрь этого файла:
{
"name": "App",
"icons": [
{
"src": "android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}Как видите, значки уже включены, а соответствующие записи доступны в структуре JSON. Согласно официальной спецификации файла манифеста веб-приложения (https://www.w3.org/TR/appmanifest/), структура должна содержать дополнительные свойства для описания приложения, языка приложения, начального URL, цветов. и режим отображения. Давайте расширим содержимое JSON с помощью следующего кода:
{
"name": "My PWA Test",
"short_name": "PWA Test",
"lang": "en-US",
"start_url": "/",
"background_color": "#2C3E50",
"theme_color": "#18BC9C",
"display": "standalone",
"icons": [
...
]
}
Если вы хотите создать манифест приложения с нуля, вы также можете взглянуть на Генератор манифеста веб-приложений (https://tomitm.github.io/appmanifest/).
Добавление сервис-воркера
После добавления файла манифеста веб-приложения нам теперь нужно добавить Service Worker в наше приложение. Есть много способов добавить сервис-воркера в ваше приложение. Например. вы можете использовать генератор Service Worker с сайта http://www.pwabuilder.com/generator.
На втором этапе вы можете выбирать между различными функциями сервис-воркера. Создается соответствующий исходный код JavaScript, так что вы можете скопировать и вставить этот код в проект.
Простейшей формой реализации серверного исполнителя является опция Offline page. В этом сценарии сервисный работник работает в фоновом режиме и просто определяет, доступно ли сетевое соединение с сервером. Если соединение недоступно, сервис-воркер обслуживает специальную HTML-страницу (offline.html), которую необходимо добавить в проект.
В нашем примере с PWA мы выбираем вариант Автономная копия страниц. В этом случае копия каждой страницы сохраняется в кеше после того, как пользователь запросил ее один раз. Если приложение находится в автономном режиме и соответствующая страница уже находится в кеше, запрос заполняется работником службы, и страница отображается в браузере.
Чтобы добавить эту функциональность сервис-воркера в наше приложение, нам просто нужно скопировать код, указанный в левой области «Код для веб-сайта», в раздел сценария в index.html, как вы можете видеть на следующем рисунке. листинг:
<!-- Service worker registration -->
<script type="text/javascript">
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
//Register the ServiceWorker
navigator.serviceWorker.register('pwabuilder-sw.js', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
</script>Вставьте этот раздел сценария сразу после последнего элемента ‹div› в разделе body.
Сценарий использует объект navigator.serviceWorker, чтобы определить, был ли уже установлен сервисный работник. Если это не так, сервисный работник регистрируется с помощью метода navigator.serviceWorker.register. Этот метод принимает два параметра:
- Строка, содержащая файл, в котором можно найти реализацию сервис-воркера. В нашем случае это строка pwabuilder-sw.js. Мы создадим этот файл и на следующем шаге добавим реализацию сервис-воркера.
- Объект конфигурации JSON, который содержит область свойств, для которой задана строка «./». Это означает, что служебный воркер установлен для корневого URL-адреса приложения и, таким образом, может управлять всеми страницами.
Теперь вам нужно скопировать и вставить следующий код с веб-сайта PWABuilder в файл pwabuilder-sw.js:
//This is the "Offline copy of pages" wervice worker//Install stage sets up the index page (home page) in the cahche and opens a new cache self.addEventListener('install', function(event) { var indexPage = new Request('index.html'); event.waitUntil( fetch(indexPage).then(function(response) { return caches.open('pwabuilder-offline').then(function(cache) { console.log('[PWA Builder] Cached index page during Install'+ response.url); return cache.put(indexPage, response); }); })); });//If any fetch fails, it will look for the request in the cache and serve it from there first self.addEventListener('fetch', function(event) { var updateCache = function(request){ return caches.open('pwabuilder-offline').then(function (cache) { return fetch(request).then(function (response) { console.log('[PWA Builder] add page to offline'+response.url) return cache.put(request, response); }); }); };event.waitUntil(updateCache(event.request));event.respondWith( fetch(event.request).catch(function(error) { console.log( '[PWA Builder] Network request Failed. Serving content from cache: ' + error );//Check to see if you have it in the cache //Return response //If not in the cache, then return error page return caches.open('pwabuilder-offline').then(function (cache) { return cache.match(event.request).then(function (matching) { var report = !matching || matching.status == 404?Promise.reject('no-match'): matching; return report }); }); }) ); })
Здесь вы можете видеть, что логика обслуживания разделена на два основных раздела:
- Сначала регистрируется обработчик события установки. Функция обработчика событий создает новый кеш и добавляет в него страницу index.html.
- Во-вторых, регистрируется функция обработчика событий выборки. Сначала методы берут существующий кеш и обновляют файлы, запрошенные в этом кеше. Если сетевой запрос не выполняется, проверяется, содержит ли кеш уже запрошенные файлы. В этом случае запрос выполняется путем предоставления всех ресурсов из кеша. Пользователь может видеть запрошенный веб-сайт, хотя подключение к веб-серверу отсутствует.
Инструменты разработчика Chrome
После добавления в наше приложение манифеста веб-приложения и сервис-воркера давайте протестируем PWA в браузере. Поскольку live-сервер все еще работает, просто зайдите на http: // localhost: 8080 и откройте Инструменты разработчика Chrome. Затем перейдите на вкладку Приложение. На вкладке Приложение откройте представление Manifest, как показано на следующем снимке экрана:
Если манифест вашего приложения имеет правильный формат, это представление дает вам обзор настроек, включая включенные значки. Затем вы можете развернуть раздел Cache Storage слева, чтобы проверить, было ли уже создано хранилище pwabuilder-offline и были ли добавлены первые ресурсы:
Наконец, вы можете открыть раздел Service Workers, и вы увидите следующий экран:
Здесь вы можете проверить правильность установки сервис-воркера. Чтобы протестировать нашего сервис-воркера, вы можете использовать это представление и активировать флажок Offline, как показано на следующем снимке экрана:
Теперь браузер работает в автономном режиме. Если вы попытаетесь открыть страницу приложения еще раз, вы получите тот же результат в браузере. На этот раз ответ генерируется с использованием ресурсов из кеша.
Маяк
Для тестирования PWA вы можете использовать Lighthouse (https://developers.google.com/web/tools/lighthouse/), который доступен как расширение Chrome.
Если PWA зарегистрирован, вы можете активировать Lighthouse, щелкнув символ приложения, а затем кнопку выбора Создать отчет:
Создание отчетов занимает несколько секунд. После выполнения всех проверок Lighthouse выдаст вам сводку в следующей форме:
Здесь вы получите подробную информацию о вашем PWA. Вы можете увидеть, в какой степени приложение соответствует базовому контрольному списку PWA. Кроме того, вы получаете KPI по производительности, доступности и передовым методикам. Список неудавшихся аудитов дает вам подробную информацию для дальнейшей оптимизации.
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
Углубите свои навыки веб-разработки - ознакомьтесь с лучшими курсами:
Лучшие курсы веб-разработки
Отказ от ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!
