13,9 тыс подписчиков

Прогрессивные веб-приложения для начинающих

2 апреля 20202 апр 2020

396

5 мин

Оглавление

Введение
Компоненты
Манифест

Недавно мир приложений разделился на две категории: появились приложения для устройств Android и iOS. Возможно, многие слышали о прогрессивных веб-приложениях (PWA), однако не знакомы с концепцией их работы.

В этой статье мы узнаем, что такое PWA, из каких компонентов оно состоит, а также как создать его самостоятельно.

Введение

Прогрессивное веб-приложение — это веб-сайт, переделанный в приложение. Вместо написания кода на Java, Objective-C или более поздних языках мобильного программирования можно написать код для приложения с html-файлами, таблицами стилей и сценариями, как для веб-сайта.

Зачем создавать PWA вместо нативного приложения? Во-первых, после выпуска PWA можно постоянно изменять без необходимости перевыпуска приложения. Поскольку весь код размещен на сервере и не является частью APK/IPA, изменения происходят в режиме реального времени. Помимо этого, с PWA можно работать в режиме offline в случае проблем с сетью.

И самое главное, пользователи могут добавить PWA на главный экран. Нативные приложения не обладают подобной функцией.

Компоненты

PWA создается из стандартного набора компонентов:

Манифест веб-приложения
Service worker
Install Experience
HTTPS
Создание APK
Lighthouse audit

Манифест

Это файл конфигурации (.JSON), с помощью которого можно изменять настройки PWA и его внешний вид для пользователя. Пример одного из них:

В манифесте необходимо указать название или короткое название ключа. На главном экране и в панели запуска отображается короткое название. Просто название используется в разделе настройки «Добавить на главный экран» (или в запросе установки приложения).

Дисплей может обладать четырьмя значениями:

fullscreen — при открытии приложение занимает весь экран;
standalone — приложение выглядит как нативное, скрывая элементы браузера;
minimal-ui — предоставляет некоторые элементы управления браузером (поддерживается только на мобильной версии Chrome);
browser—видны все элементы браузера.

Также можно установить ориентацию приложения и область видимости страниц.

Не забудьте добавить манифест в главный html-файл, разместив следующий метатег в теге head:

Service Worker

Service worker — это компонент, работающий в фоновом режиме сайта в браузере. Он обладает широким набором функций, включая push-уведомления, кэширование ассетов, предоставление их для работы в режиме offline, а также возможность откладывать действия до появления стабильного подключения к Интернету.

Обычно код service worker сохраняется в файле sw.js.

✋ Расположение service worker играет важную роль, поскольку он может обращаться только к тем файлам, которые находятся с ним в одном каталоге или подкаталоге.

Жизненный цикл service worker состоит из следующих фаз:

Регистрация
Установка/Активация
Ответы на события

Install Experience

Install experience — это одна из уникальных особенностей PWA, побуждающая пользователя установить приложение. Для того, чтобы у пользователя была такая возможность, нам нужно прослушать событие beforeinstallprompt. Ниже представлен пример кода, демонстрирующий процесс предоставления пользователю возможности добавить приложение к активации логики на основании его выбора.

HTTPS

Не так давно сайты использовали всем известный протокол http. Однако в связи с недавними изменениями в безопасности и в Chrome все сайты, не работающие по протоколу https, будут помечены как незащищенные. Даже если веб-сайт не обрабатывает пользовательские данные или конфиденциальные сообщения, все равно рекомендуется переключиться на https.

Как было сказано ранее, PWA должен использовать протокол https. Чтобы избежать трудностей, связанных с приобретением домена, поиском подходящего хостинга и включением SSL, можно воспользоваться Github. При наличии учетной записи откройте репозиторий и создайте страницу GitHub. Этот процесс достаточно прост и понятен, а бонусом является встроенный в Github HTTPS.

Создание APK

Чтобы PWA был доступен в Google Play Store, нужно создать APK. Для упрощения работы можно использовать такой инструмент, как PWA2APK. Также можно создать APK самостоятельно.

Google представил новый способ интеграции PWA в Play Store с помощью Trusted Web Activity или TWA. Создать TWA, который затем можно загрузить в Play Store, можно за несколько простых шагов.

1. Откройте Android Studio и создайте пустой activity

2. Зайдите в файл проекта build.gradle и добавьте репозиторий jitpack:

3. Зайдите в файл build.gradle уровня модуля и добавьте следующие строки для активации совместимости с Java8:

4. Добавьте библиотеку поддержки TWA в качестве зависимости:

5. Добавьте activity XML в файле AndroidManifest между тегами приложения:

6. Теперь нужно создать связь между приложением и веб-сайтом с помощью ссылки на цифровые ассеты. Вставьте следующий фрагмент в файл strings.xml:

7. Добавьте следующий метатег в качестве дочернего элемента к тегу приложения в AndroidManifest.xml:

8. Создайте ключ загрузки и хранилище ключей;

9. Используйте следующую команду для извлечения SHA-256:

keytool -list -v -keystore keystore_path -alias keystore_alias -storepass keystore_password -keypass key_password

10. Перейдите к генератору ссылок на ресурсы, предоставьте отпечаток SHA-256, пакет приложения и домен веб-сайта;

11. Разместите результат в файле assetlinks.json, который находится в /.well-known в директории веб-сайта;

12. Сгенерируйте подписанный APK и загрузите в Play store

Lighthouse

Для создания PWA требуется выполнить множество действий, в которых можно легко запутаться.

К счастью, Google создал Lighthouse. Его можно найти в Chrome Developer Tools (в версии Chrome 60). Доступ к нему можно получить, щелкнув правой кнопкой мыши в браузере и выбрав inspect (просмотреть код). Когда откроется новая панель, в дальнем правом углу найдите вкладку Audits.

Оставив настройки без изменения, нажмите кнопку “Run audits” для запуска audit. Это займет минуту или две, и по окончании инструмент оценит PWA в отношении трех свойств:

Производительность
Доступность
Лучшие практики

В отношении каждого свойства будет отмечено, соответствует ли приложение требованиям. Пример подобного чек-листа можно найти здесь.

Заключение

На этом наше путешествие заканчивается. Надеюсь, вы узнали многое о мире PWA.