Прогрессивные веб-приложения могут изменить то, как мы создаем приложения в сфере здравоохранения , особенно те, которые предназначены для пациентов. В то время как другие приложения используются ежедневно и могут заслуживать самостоятельного полноценного веб-приложения, приложения для пациентов используются на разовой основе, как правило, на мобильном телефоне и в пути, в кабинетах врачей и т. д.
Ранее мы экспериментировали с различными формами устройств и хотели проверить нашу теорию — будут ли PWA более широко распространены, чем нативные мобильные приложения.
Нашей первой попыткой было приложение для взаимодействия с пациентами для нью-йоркской офтальмологической группы. Мы разослали SMS-рассылки пациентам с приложением PWA. Приложение PWA имело ссылки для добавления приложения на главный экран и на сам экран входа в систему, имело ссылки на собственные приложения для iOS и Android.
Результаты?
Каждый пациент (до сих пор) использовал только PWA. Это быстро, безопасно и позволяет пациенту аутентифицировать себя с помощью одноразового пароля (OTP) в SMS-сообщении.
Это СУПЕР удобно. Мы призываем вас рассмотреть прогрессивные веб-приложения при разработке программного обеспечения для здравоохранения. Это действительно изменило наше представление о приложениях для пациентов.
Что такое прогрессивное веб-приложение (PWA)?
Прогрессивные веб-приложения — это мобильные/веб-приложения, разработанные с использованием веб-технологий.
По правде говоря, PWA — это настоящее кроссплатформенное приложение, поскольку вы создаете его и запускаете везде.
Почему прогрессивное веб-приложение (PWA)?
С 2015 по 2019 год мобильный трафик сайта вырос с 31% до 52% и не собирается останавливаться в будущем. Согласно статистике, данные продолжают показывать, что для большинства сайтов большая часть их трафика поступает с мобильных устройств.
Дилемма мобильных приложений заключается в том, что каждый шаг загрузки приложения сокращает значительное количество пользователей, а охват мобильных веб-сайтов в 2,5 раза выше, чем у мобильных приложений.
Вот где вам поможет прогрессивное веб-приложение (PWA). Поскольку большинство пользователей используют веб-сайты через мобильные устройства, когда они посещают прогрессивные веб-приложения, им выдается приглашение «Добавить на главный экран», и как только они нажимают на него, ваше приложение достигает главного экрана мобильного устройства и останавливается. сильна с другими родными приложениями.
Кроме того, прогрессивные веб-приложения дают пользователям возможность сначала проверить приложение и, если им захочется, загрузить родное мобильное приложение, которое они могут. Если оно используется нечасто, пользователь может использовать приложение как любые другие веб-сайты.
Почему мы использовали прогрессивное веб-приложение (PWA)?
Программное обеспечение, которое мы планировали разработать, было ориентировано на людей, и средством, которое мы использовали для представления программного обеспечения общественности, были SMS. Таким образом, в основном наши пользователи будут мобильными пользователями.
Таким образом, это был идеальный сценарий, в котором можно было бы использовать прогрессивное веб-приложение, поскольку на них можно ссылаться, и мы можем легко поделиться URL-адресом нашего приложения. Люди могут загрузить и начать использовать приложение вместо того, чтобы идти в магазин приложений или магазин игр и ждать его установки.
Особенности PWA
Устанавливаемый:
Подсказка прогрессивных веб-приложений позволяет пользователю сохранять приложение на главном экране с возможностью добавления на главный экран. Это устраняет множество шагов, которые пользователи должны предпринять для загрузки собственных приложений.
Офлайн-поддержка:
Сервисные работники помогают предоставлять автономную поддержку пользователям, поскольку они кешируют запрос сервера, а затем в автономном режиме сообщают клиенту, что нужно использовать API-интерфейс кэша для загрузки страниц вместо запроса нового вызова сервера.
Безопасность:
Одной из самых больших проблем в Интернете является безопасность, и прогрессивные веб-приложения готовы бороться с этой проблемой, поскольку, чтобы быть прогрессивным веб-приложением, оно должно обслуживаться через безопасную сеть.
Обновления:
Прогрессивные веб-приложения устраняют шаги, которые должны выполнять пользователи при обновлении приложения, поскольку прогрессивные веб-приложения можно обновлять со стороны разработки без участия пользователя.
Можно связать:
Пользователи могут легко обмениваться прогрессивными веб-приложениями, поскольку вам просто нужно поделиться ссылкой.
Отзывчивый:
Прогрессивные веб-приложения реагируют на любой экран, будь то экран ноутбука, планшета или мобильного телефона, они поддерживают все размеры экрана.
Нативное приложение:
Прогрессивные приложения выглядят так же, как и любые другие нативные приложения, а также с точки зрения навигации они ведут себя как нативные приложения.
PWA предлагает другие интересные функции, такие как доступ к push-уведомлениям, геолокация, камера и средство выбора контактов.
Как создать прогрессивное веб-приложение (PWA)
Многие интерфейсные платформы предоставляют возможность создания прогрессивного веб-приложения. Например:
Мы использовали angular для создания нашего приложения. Angular — один из самых популярных интерфейсных фреймворков для разработки веб-приложений, который также предоставляет функцию PWA. Также вы можете легко преобразовать существующее приложение в PWA с помощью angular CLI.
Команда CLI для добавления функций PWA в приложение:
добавить @angular/pwa
Эти отдельные команды выполняют различные задачи по преобразованию вашего веб-приложения в прогрессивное веб-приложение.
- С помощью этой команды angular позаботится о добавлении сервис-воркеров в ваш проект и активирует сервис-воркер. После успешного выполнения этой команды вы можете проверить в файле package.json, что был добавлен пакет @angular/service-worker.
- Добавляет файл manifest.webmanifest в папку src вашего приложения. Этот файл предоставляет информацию о приложении в формате JSON (т. е. имя, цвет темы, значок разного размера и т. д.).
- Добавляет в ваш проект файл ngsw-config.json, в котором указывается, какие файлы и URL-адреса данных следует кэшировать сервисному работнику angular.
- Обновляет файл index.html со ссылкой на manifest.json и метатегами для цвета темы (темы адресной строки браузера, чтобы они соответствовали фирменному цвету вашего прогрессивного веб-приложения).
- Устанавливает файлы значков для поддержки установленного Progressive Web App в папку ресурсов.
- Регистрирует работника службы в модуле приложения. Сервисные работники играют важную роль в прогрессивных веб-приложениях, поскольку они позволяют приложениям контролировать сетевые запросы, кэшировать эти запросы для обеспечения автономной поддержки. Сервисные работники проверяют, есть ли у приложения доступ в Интернет. Если это не так, то сервис-воркер говорит клиенту, что он должен получить кешированную версию страницы, а не создавать новый запрос к серверу.
Слова предостережения
Поскольку это выглядит и ощущается как нативное приложение, пользователи ожидают, что оно будет работать как нативное приложение. Поэтому в кнопках постарайтесь дать обратную связь по нажатию кнопки.
Поскольку прогрессивное веб-приложение используется как на платформах IOS, так и на платформах Android, при разработке приложения необходимо учитывать стандарты сафари (т. е. некоторые форматы даты не поддерживаются в сафари и отлично работают в других браузерах).
Safari не поддерживает файлы манифеста, в которых значки сохраняются для домашнего экрана мобильного устройства. Итак, для iPhone иконки нужно добавить в index.html.
Прогрессивные веб-приложения должны реагировать на любой размер экрана и пытаться сделать положение заголовков в вашем приложении фиксированным для открытого состояния клавиатуры.
Для прокрутки использование виртуальной прокрутки идеально подходит для прогрессивных веб-приложений, поскольку пользователи будут прокручивать очень быстро, учитывая, что ваше приложение используется как родное приложение. Мы использовали cdk-virtual-scroll-viewport в нашем приложении, потому что он загружает только видимый контент, что делает его более быстрым, плавным и похожим на приложение для пользователя. Проблема, с которой я столкнулся при использовании cdk-virtual-scroll-viewport, заключается в том, что в cdk-virtual-scroll-viewport мы должны определить фиксированную высоту для порта просмотра. Таким образом, для высоты всегда давайте расчет высоты, так как приложение может быть открыто на нескольких высотах (например, в веб-браузере, в автономном режиме IPhone и Android, в браузере IPhone и Android)
Одной из основных проблем прогрессивных веб-приложений являются обновления, и сервисные работники предлагают решение для этого. Используя общедоступный API SwUpdate, вы можете определить, когда доступна новая версия вашего приложения, и выполнить необходимые действия соответственно.
Будущее прогрессивного веб-приложения (PWA):
Можно сказать, что прогрессивные веб-приложения — это будущее разработки веб-приложений . Прогрессивным веб-приложениям еще предстоит пройти долгий путь, но они уже на пути к тому, чтобы составить серьезную конкуренцию нативным приложениям.
Собираем все вместе
Прогрессивное веб-приложение (PWA) предлагает преимущества современных функций браузера с мобильным интерфейсом.