PWA против React Native: подробный обзор

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

Краткие подробности

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

Прогрессивное веб-приложение (PWA)

Определения

Progressive Web App (PWA) — перспективное решение для разработки веб-приложений . По своей сути, PWA полагаются на сервис-воркеров и манифесты веб-приложений, чтобы обеспечить возможности, подобные приложениям, которые включают функции, ранее эксклюзивные для приложений, такие как push-уведомления, автономная доступность, возможность установки и т. д.

Варианты использования и примеры

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

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

 Рекомендуемое чтение: 12 лучших примеров прогрессивных веб-приложений (PWA) в 2021 году

Реагировать на родной

Определения

React Native — это фреймворк для разработки кроссплатформенных нативных приложений на основе JavaScript. Приложения, созданные с помощью React Native, могут взаимодействовать с собственными API-интерфейсами через парадигму декларативного пользовательского интерфейса React и JavaScript, а это означает, что единую кодовую базу React можно использовать для поддержки двух платформ (iOS и Android) без ущерба для удобства пользователей.

Варианты использования и примеры

Трудно определить конкретный вариант использования React Native, поскольку он используется для создания различных типов приложений, таких как популярные приложения для социальных сетей (например, Facebook, Instagram, Pinterest и т. д.) или приложения для цифрового общения (например, Skype, Discord). , Tencent QQ и др.). Чтобы ознакомиться со списком приложений, созданных с помощью React Native, ознакомьтесь с демонстрацией приложений React Native.

Вникая в детали

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

Язык

PWA полагаются на веб-технологии для предоставления возможностей, подобных приложениям. Таким образом, веб-языки, такие как HTML, CSS и JavaScript, по-прежнему являются основными языками, составляющими PWA, тогда как приложения React Native используют React.js (библиотеку JavaScript) в качестве основного языка.

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

Пользовательский интерфейс

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

Вместо этого приложение React Native способно предоставлять настоящие нативные возможности благодаря использованию нативных компонентов, включая компоненты для конкретных платформ, такие как <DatePickerIOS> и <ProgressViewIOS> для iOS или <ViewPagerAndroid> и <ToastAndroid> для Android.

Производительность

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

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

Одним из примеров этого является Temoorst, кувейтский бренд в индустрии одноразовых товаров. Выбрав SimiCart в качестве своего поставщика решений, бренд выбрал как нативное приложение, так и PWA для наилучшей рентабельности инвестиций, а аспект производительности PWA по-прежнему является тем, чего бренд не ожидал. В слепом тесте вам будет сложно найти различия в производительности и визуальных характеристиках между их PWA и их приложением React Native.

Чтобы проверить разницу в производительности между приложением React Native и PWA, мы рекомендуем вам попробовать приложения Temoorst. Сами приложения являются свидетельством того, как может выглядеть хорошо оптимизированное приложение React Native или PWA при максимальном использовании.

• Приложение React Native : Google Play Store | Apple App Store
• PWA : https://temourst.com/

Безопасность

Из-за более высокого уровня интеграции с используемым устройством приложение React Native, естественно, более безопасно и менее подвержено уязвимостям. Чтобы добавить больше уровней безопасности в приложение React Native, в процессе разработки можно использовать различные подходы, например:

• SSL Pinning: для защиты соединений между приложением и сервером.
• Связка ключей/конфиденциальная информация: обеспечить безопасное локальное хранилище вместе с биометрической/аутентификацией лица.
• Jscrambler: предотвратите подделку кода, добавив уровень самозащиты

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

Сервисные работники работают только через HTTPS. Поскольку сервисные работники могут перехватывать сетевые запросы и изменять ответы, атаки «человек посередине» могут быть очень опасными.

Введение в сервис-воркера

Возможность обнаружения

Вот где сияют PWA. Мало того, что PWA доступны в Интернете и открыты для поисковых систем, они также могут быть опубликованы в магазинах приложений. Google, Microsoft и даже Samsung присоединились к этой инициативе, чтобы способствовать более широкому внедрению PWA, внедряя переупакованные PWA в свои магазины приложений. Microsoft Store, например, делает еще один шаг вперед и планирует автоматически повторно заполнять свой магазин приложений качественными PWA, проиндексированными их собственными поисковыми роботами Bing:

Магазин Microsoft, работающий на базе поискового робота Bing, автоматически индексирует выбранное качество Progressive Web App.

Приветствуем прогрессивные веб-приложения в Microsoft Edge и Windows 10

На данный момент Apple App Store является единственным оставшимся популярным рынком приложений, до которого PWA не дотягивается. Это связано с тем, что Apple ясно дала понять в своих рекомендациях по проверке, что для одобрения приложение должно быть «за пределами переупакованного веб-сайта» — и это само по себе совершенно другое обсуждение, о том, как Apple активно препятствует разработке в Интернете из-за страха нанести ущерб своей прибыли.
По сравнению с PWA, возможность обнаружения приложений, созданных с помощью React Native, не так впечатляет, но кроссплатформенный характер фреймворка означает, что с единой кодовой базой вы все равно можете сделать свое приложение доступным для обнаружения как в Google Play Store, так и в Apple App Store. А учитывая, что пользователи iOS составляют большинство в некоторых странах (включая США) — и что PWA не могут быть опубликованы в Apple App Store — это должно быть достаточной причиной для выбора разработки приложений React Native, чтобы служить там, где большинство ваших пользователей..

Аппаратная доступность

Поскольку приложения React Native являются настоящими нативными приложениями, они имеют гораздо более широкий доступ к нативным API. И это означает, что даже низкоуровневый доступ к оборудованию устройства (например, доступ к NFC (Near Field Communication), списку контактов и т. д.) и системный доступ (например, доступ к системным настройкам, журналам и т. д.) возможны и могут быть использованы. для улучшения пользовательского опыта.
А поскольку PWA полагается на веб-API для доступа к оборудованию, PWA, естественно, более ограничены в том, как он может использовать ресурсы системы. В лучшем случае — если используемый браузер поддерживает все новейшие API-интерфейсы доступа к оборудованию — PWA может иметь доступ к различным аппаратным функциям, ранее эксклюзивным для собственных приложений, таким как геолокация, доступ к камере и микрофону, дополненная реальность (с WebXR API устройства).

 Рекомендуемая литература: Прогрессивное веб-приложение (PWA) и доступ к оборудованию

Затраты на разработку

Что касается затрат на разработку, проекты React Native, как правило, слишком дороги из-за высокого уровня сложности. Например, базовый проект React Native обычно стоит более 15 000 долларов США , тогда как базовый проект PWA должен стоить всего около 1000–10 000 долларов США. Однако по сравнению с другими нативными платформами приложений React Native остается экономичным решением благодаря своей независимой от платформы архитектуре. С единой кодовой базой React Native вы можете опубликовать свое приложение как в Google Play Store, так и в Apple App Store, что значительно сократит общие затраты на разработку без ущерба для пользовательского опыта.

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

Вывод

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

Для продавцов Magento, которые хотят создавать кроссплатформенные приложения React Native или безголовые PWA, здесь, в SimiCart, мы предлагаем экономически эффективные решения, которые помогут вам получить конкурентное преимущество над конкурентами.