Как работает PWA приложение
На сегодня веб-приложение PWA использует 4 базовые технологии:
- Service Worker
- App Shell
- HTTPS
- Web App Manifest.
Service Worker
Обычное интернет приложение имеет два слоя: фронтенд (то, что видит пользователь) и бэкенд (логику обработки данных на сервере). Но в случаи с Progressive Web Apps добавляется еще и третий слой, который называется: Service Worker. Это JavaScript-файл, он работает в браузере и может выполнять задачи, обычно требующие сервер для подключения. Service Worker предоставляет возможность отправлять push-уведомления, работа с кэшем и выполнение довольно сложных операций с данными. В итоге это дает три преимущества:
- Хорошо ускоряет работу, так как данные хранятся в кэше устройства;
- Позволяет работать офлайн;
- Обеспечивает фоновую синхронизацию. Для того чтобы лучше понять данное преимущество стоит рассмотреть пример. Вы отправляете информационное письмо через интернет приложение. Для этого нужно нажать на кнопку отправки и дождаться, пока сервер проведет операцию, но если связь плохая то отправку можно ждать довольно долго. И тут как раз вступает PWA выполняя дальше запрос даже при условии что браузер будет закрыт. При проявлении соединения отправка сразу выполняется в автоматическом режиме.
Совместимость с браузерами
Сервис воркеры поддерживаются браузерами Chrome, Firefox, Edge, Safari и Opera.
App Shell
App Shell - это структура, при которой основная часть интерфейса PWA сохраняется в кэше устройства после первого посещения. В дальнейшем, при повторном использовании в приложения, его основная оболочка загружается уже с кэша, а с сервера загружается только новый контент. Это позволяет PWA работать так же быстро, как нативные приложения.
HTTPS
PWA работают только при применении защищенного протокола HTTPS. Это означает, что данные передаются в зашифрованном формате, для того чтобы хорошо повысить безопасность, чтобы хакерам было сложнее получить к ним доступ или вовсе не получить. Тут также стоит знать что необходимо подключить SSL-сертификат в настройках, чтобы веб-приложение работало через HTTPS.
Web App Manifest
Это файл, который содержит инфу о веб-приложении. Здесь собраны такие данные как: название приложения, его лого и настройки. В Web App Manifest могут быть указаны три режима отображения окна PWA:
- Минимальный (при открытии с минимальным интерфейсом, пользователь сможет увидеть только самое основное);
- Автономный/standalone (открывается как стандартное приложение в отдельном окне без браузерной панели);
- Полноэкранный (приложение занимает весь экран и скрывает все элементы интерфейса устройства).
Обновление приложения
Как вы уже поняли что приложение не находится в магазинах приложениях (маркетплейсах), вопрос относительно обновлений необходимо решать немного по-другому. Прежде необходимо разобраться, как происходит хранение данных. Если приложение каждый раз подключается к интернет сети, тогда обновления будут происходить автоматически. Если же данные хранятся на устройстве (в кэше), то пользователь получит уведомление о новом обновлении. Как только нажмете на кнопку обновления оно сразу запустится.
Преимущества и недостатки PWA
Как бы не работало приложение PWA у тоже есть свои достоинства и недостатки, поэтому предлагаю со всем ими детально познакомится:
Преимущества:
- Скорость. С PWA все выполняется в два раза быстрее:
- Цена. PWA намного дешевле, чем стандартное приложение;
- Мгновенное обновление: новые функции в PWA активны сразу;
- Гибкость: PWA можно установить на телефон, планшет, MacBook и другие;
- Легкость. PWA весит существенно меньше обычного приложения;
- Безопасность. Работа происходит через браузер, поэтому безопасное соединение гарантированно.
Недостатки:
- Функционал (мобильное приложение предоставляет больше возможностей, но это может создать ограничения для будущего развития);
- Ограничение в доступе к календарю, контактам, управлению голосом;
- Низкая популярность (к сожалению не многие знают про PWA и как оно работает, поэтому мало кто будет скачивать).
Вывод
Мы рассмотрели что такое PWA/Progressive Web Apps, как работает, а также основные плюсы и минусы. PWA действительно меняют веб-пространство и предоставляют новые технические возможности, но каждый не только не знает про них, но и не рискнет ими воспользоваться. Поэтому смелее знакомьтесь с ним и применяйте на практике.
