БлогСфера

От создателя: я уверен, что большая часть из вас наверное слышали о прогрессивных веб-приложениях (PWA). PWA — это захватывающая разработка, которая может поменять методы разработки веб- и мобильных приложений. Но некие могут сказать, что PWA — это просто веб-веб-сайт, перевоплощенный в мобильное приложение, в то время как некие спорят о его способностях, дилеммах сохранности и производительности по сопоставлению с нативными мобильными приложениями.

Итак, в данной для нас статье я расскажу о 5 ценных функциях PWA, нужных для ваших будущих проектов.

1. Единая разработка для веб- и мобильных платформ

В современном техническом мире мы лицезреем, что создатели позиционируют себя как веб-создатели, мобильные создатели и т. д.

Смотря на предпосылки, мы лицезреем, что технологии, инструменты и разные платформы сыграли значительную роль в этом разделении.

Если мы возьмем в качестве примера разработку нативных приложений, для этого потребуются познания о нескольких специализированных разработках, таковых как Java, Kotlin, Swift, Flutter и т. д., также о таковых инструментах, как Android Studio, XCode и т. д.

Напротив, с JavaScript / TypeScript, HTML, CSS просто начать работу и употреблять фреймворк, таковой как Angular, либо библиотеку, такую как React. Если мы поглядим на результаты опроса на stack overflow в 2019, то увидим, что эти языки веб-разработки являются самыми пользующимися популярностью.

Эти результаты влияют на принятие технологий разрабами, и, как следствие, наиболее обычной поиск разрабов в Вебе.

Снижайте издержки на разработку, делайте резвее

Внедрение 1-го и такого же стека для 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 позаботится о этом и выполнит запрос, когда соединение станет легкодоступным. Демо реализация фоновой синхронизации показана ниже:

Инструкция по переносу сайта на HTTPS от Джона Мюллера

JavaScript 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() обязано быть неповторимым для данной синхронизации.

Кроме этих 2-ух, Service Worker предоставляют PWA огромное количество функций, таковых как получение push-уведомлений, даже когда приложение неактивно, кэширование сетевых запросов, кеширование статического содержимого и т. д.

4. Наружный вид нативного приложения

Если мы возьмем обычное разъяснение, манифест веб-приложения — это файл JSON, отвечающий за наружный вид прогрессивного веб-приложения. Если мы устанавливаем приложение из хранилища проигрывания либо хранилища приложений, мы можем созидать значок приложения на мобильном телефоне, и это делает юзеров наиболее интерактивными, как с мобильными приложениями, а не с веб-веб-сайтами. Для PWA файл манифеста веб-приложения является точкой входа для всех взаимодействий с юзером, и сюда включены все метаданные о том, как мы показываем приложение юзеру. Используя этот файл JSON, мы можем просто поменять почти все элементы приложения, включая значки приложений, цвета темы, ориентацию и экран-заставку. Давайте подробнее разглядим эти характеристики на примере.

JavaScript { “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”: “48×48”, “type”: “image/png” } … ], “related_applications”: [{ “platform”: “play”, “url”: “https://play.google.com/store/apps/details?…” }]

}

JSON-файл обычного веб-манифеста будет смотреться так, как в приведенном выше примере, и name, и short_name употребляются для отображаемого имени приложения. Тут свойство icons содержит перечень иконок приложения различных размеров. Свойство display может задавать полноэкранный, автономный, малый пользовательский интерфейс, характеристики браузера, а полноэкранный режим удаляет все элементы браузера и обеспечивает лучшее естественное поведение для приложения. start_url описывает страничку, загружаемую, когда юзер запускает прогрессивное веб-приложение. Кроме этого, есть много параметров, которые вы сможете употреблять для придания естественности собственному PWA. Самым принципиальным будет то, что вы как разраб имеете полный контроль над действием пуска приложения и сможете просто соперничать с нативными приложениями, используя эти характеристики.

Verisign тайно повысит стоимость доменов в зоне com

5. Увеличение сохранности и прозрачный доступ к способностям устройства

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

PWA обеспечивает сохранность транспортного уровня. Таковым образом, секретная информация будет зашифрована во время передачи, а данные могут быть расшифрованы лишь при помощи закрытого ключа, лежащего на сервере. По данной для нас причине веб-веб-сайт PWA должен обслуживаться с внедрением HTTPS, и установка сертификата SSL на сервере является неотклонимой.

Не считая того, PWA не ведет взаимодействие с оборудованием устройства без разрешения юзера, и нелегко скрыть какие-либо вредные коды снутри приложений PWA. Если мы будем следовать наилучшим практикам, чтоб запрашивать лишь нужный доступ к устройству и употреблять надежные библиотеки JavaScript, которые повсевременно обновляются, риск существенно понижается.

Заключение

В дополнение к сиим 5, PWA владеет почти всеми свойствами, которые мы ожидаем от хоть какого веб-либо мобильного приложения, таковыми как скорость, надежность, удобство использования и т. д. Как разрабам, нам принципиальна простота разрабатки PWA, так как у вас нет заморочек с языками и фреймворками. Разработка PWA занимает весьма не достаточно времени по сопоставлению с разработкой нативных приложений.

Что касается бизнеса, если вы решили употреблять PWA, стоимость будет меньше, охват рынка будет высочайшим, и его можно будет весьма стремительно улучшить в поисковых системах. Так что не страшитесь испытать PWA, когда в последующий раз будете находить веб- либо мобильное решение.

Создатель: Chameera Dulanga

Редакция: Команда webformyself.

Источник