От автора: я уверен, что большинство из вас наверняка слышали о прогрессивных веб-приложениях (PWA). PWA — это захватывающая технология, которая может изменить способы разработки веб- и мобильных приложений. Однако некоторые могут сказать, что PWA — это просто веб-сайт, преобразованный в мобильное приложение, в то время как некоторые спорят о его возможностях, проблемах безопасности и производительности по сравнению с нативными мобильными приложениями.
Итак, в этой статье я расскажу о пяти ценных функциях PWA, полезных для ваших будущих проектов.
1. Единая технология для веб- и мобильных платформ
В современном техническом мире мы видим, что разработчики позиционируют себя как веб-разработчики, мобильные разработчики и т. д.
Глядя на причины, мы видим, что технологии, инструменты и различные платформы сыграли значительную роль в этом разделении.
Если мы возьмем в качестве примера разработку нативных приложений, для этого потребуются знания о нескольких специализированных технологиях, таких как Java, Kotlin, Swift, Flutter и т. д., а также о таких инструментах, как Android Studio, XCode и т. д.
Напротив, с JavaScript / TypeScript, HTML, CSS легко начать работу и использовать фреймворк, такой как Angular, или библиотеку, такую как React. Если мы посмотрим на результаты опроса на stack overflow в 2019, то увидим, что эти языки веб-разработки являются самыми популярными.
Эти результаты влияют на принятие технологий разработчиками, и, как следствие, более простой поиск разработчиков в Интернете.
Снижайте затраты на разработку, выполняйте быстрее
Использование одного и того же стека для Native и Web — это не только способ избежать изучения новых языков и фреймворков, но и способ максимально использовать код повторно.
Распространяя и управляя повторно используемыми компонентами / модулями в концентраторах облачных компонентов, вы можете сосредоточиться на создании отличных приложений вместо того, чтобы тратить время на создание с нуля для нескольких технологий и платформ.
Пример: компоненты React совместно используются и управляются на Bit.dev
2. Надежная работа
Быстрота, надежность и увлекательность — вот некоторые важные особенности, которые мы можем увидеть в PWA. Архитектура оболочки приложения — один из лучших подходов к реализации этих функций. Эта архитектура обеспечивает быструю и надежную работу пользователей, даже если они находятся на медленном соединении или в автономном режиме. Рассмотрим, в чем главное преимущество этой архитектуры.
Оболочка и структура содержимого
Если мы будем следовать архитектуре оболочки приложения, мы можем разделить приложение на две основные части: Оболочка и Контент. Минимальный контент приложения, необходимый для запуска пользовательского интерфейса, называется оболочкой, а другие динамические части, которым требуется подключение к Интернету, называются контентом. Таким образом, эта оболочка отвечает за обеспечение быстрого и надежного взаимодействия с пользователем, кэшируя его содержимое для использования в автономных средах. Это идеально подходит для одностраничных приложений и предлагает пользователям экономичное использование данных, надежную и быструю производительность, а также нативный опыт взаимодействия.
3. Обеспечивает лучший пользовательский опыт с помощью Service Worker
Если вы веб-разработчик, я уверен, что вы знаете или слышали о Service Workers. Service Worker работает в фоновом режиме веб-приложения и обрабатывает большое количество задач, не требующих внимания пользователя. Service Worker часто используются в новых веб-приложениях, а также могут применяться в прогрессивных веб-приложениях. Давайте рассмотрим основные функции, которые Service Workers предлагает для PWA.
Работа в автономном режиме
Возможность работать в автономном режиме — одна из конкурентных функций PWA по сравнению с нативными приложениями, и PWA получает эту возможность благодаря поддержке Service Worker. С помощью Service Workers вы можете кэшировать оболочку приложения, и она будет загружаться мгновенно, когда пользователь вернется. Эти фоновые операции позволяют улучшить пользовательский интерфейс приложения, поскольку пользователь не увидит каких-либо существенных различий между онлайн и офлайн режимами. Но динамический контент будет обновляться только при наличии соединения. Например, мы можем взять Telegram, платформу для обмена сообщениями. Приложение откроется в обычном режиме, и вы сможете увидеть и прочитать предыдущий чат, даже если вы не в сети. Приложение будет обновляться новыми сообщениями, когда вы будете в сети.
Фоновая синхронизация
Фоновая синхронизация — это еще одна функция, предоставляемая Service Workers, и она позволяет приложению отвечать на любой критический запрос, когда соединение доступно, даже если вы делаете этот вызов в автономном режиме. Например, если вы отправляете сообщение, когда находитесь в автономном режиме, Service Worker позаботится об этом и выполнит запрос, когда соединение станет доступным. Демонстрационная реализация фоновой синхронизации показана ниже:
navigator.serviceWorker.register('/service_worker.js'); navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('backGroundSync');
}); self.addEventListener('sync', function(event) { if (event.tag == 'backGroundSync') { event.waitUntil(yourFunction()); }
});Как я упоминал ранее, Service Worker используется в качестве цели события, чтобы заставить работать фоновую синхронизацию, даже когда приложение закрыто. yourFunction() вернет промис, он укажет статус действия как успех или неудачу. В случае успеха фоновая синхронизация завершается, а в случае сбоя другая синхронизация будет запланирована позже. Также обратите внимание, что имя yourFunction() должно быть уникальным для данной синхронизации.
Помимо этих двух, Service Worker предоставляют PWA множество функций, таких как получение push-уведомлений, даже когда приложение неактивно, кэширование сетевых запросов, кеширование статического содержимого и т. д.
4. Внешний вид нативного приложения
Если мы возьмем простое объяснение, манифест веб-приложения — это файл JSON, отвечающий за внешний вид прогрессивного веб-приложения. Если мы устанавливаем приложение из хранилища воспроизведения или хранилища приложений, мы можем видеть значок приложения на мобильном телефоне, и это делает пользователей более интерактивными, как с мобильными приложениями, а не с веб-сайтами. Для PWA файл манифеста веб-приложения является точкой входа для всех взаимодействий с пользователем, и сюда включены все метаданные о том, как мы показываем приложение пользователю. Используя этот файл JSON, мы можем легко изменить многие элементы приложения, включая значки приложений, цвета темы, ориентацию и экран-заставку. Давайте подробнее рассмотрим эти свойства на примере.
{ "name": "My Example App", "short_name": "My App", "start_url": ".", "display": "standalone" "background_color": "#ffffff", "theme_color": "red" "description": "Demo App.", "orientation": "portrait-primary", "icons": [{ "src": "images/logo.png", "sizes": "48x48", "type": "image/png" } ... ], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?..." }]
}JSON-файл простого веб-манифеста будет выглядеть так, как в приведенном выше примере, и name, и short_name используются для отображаемого имени приложения. Здесь свойство icons содержит список иконок приложения разных размеров. Свойство display может задавать полноэкранный, автономный, минимальный пользовательский интерфейс, параметры браузера, а полноэкранный режим удаляет все элементы браузера и обеспечивает наилучшее естественное поведение для приложения. start_url определяет страницу, загружаемую, когда пользователь запускает прогрессивное веб-приложение. Помимо этого, есть много свойств, которые вы можете использовать для придания естественности своему PWA. Самым важным является то, что вы как разработчик имеете полный контроль над процессом запуска приложения и можете легко конкурировать с нативными приложениями, используя эти свойства.
5. Повышение безопасности и прозрачный доступ к возможностям устройства
Безопасность — еще один важный аспект, который нам необходимо учитывать. С увеличением количества инцидентов безопасности, происходящих во всем мире, пользователи больше, чем когда-либо, обеспокоены безопасностью своих информационных устройств от злонамеренных атак. Поэтому мы, как разработчики, должны применять передовые методы безопасности с любой технологией, которую выбираем, чтобы избежать этих проблем. Итак, давайте посмотрим, как мы можем обеспечить безопасность пользователей с помощью PWA.
PWA обеспечивает безопасность транспортного уровня. Таким образом, конфиденциальная информация будет зашифрована во время передачи, а данные могут быть расшифрованы только с помощью закрытого ключа, хранящегося на сервере. По этой причине веб-сайт PWA должен обслуживаться с использованием HTTPS, и установка сертификата SSL на сервере является обязательной.
Кроме того, PWA не взаимодействует с оборудованием устройства без разрешения пользователя, и нелегко скрыть какие-либо вредоносные коды внутри приложений PWA. Если мы будем следовать лучшим практикам, чтобы запрашивать только необходимый доступ к устройству и использовать надежные библиотеки JavaScript, которые постоянно обновляются, риск значительно снижается.
Заключение
В дополнение к этим 5, PWA обладает многими качествами, которые мы ожидаем от любого веб-или мобильного приложения, такими как скорость, надежность, удобство использования и т. д. Как разработчикам, нам важна простота разрабатки PWA, поскольку у вас нет проблем с языками и фреймворками. Разработка PWA занимает очень мало времени по сравнению с разработкой нативных приложений.
Что касается бизнеса, если вы решили использовать PWA, стоимость будет меньше, охват рынка будет высоким, и его можно будет очень быстро оптимизировать в поисковых системах. Так что не бойтесь попробовать PWA, когда в следующий раз будете искать веб- или мобильное решение.
Автор: Chameera Dulanga
Источник: https://blog.bitsrc.io
Редакция: Команда webformyself.