Blog
Back

PWA vs Native: a checklist to help you choose

#Development 14 september 2023
Привет! Меня зовут Никита Грибков, я работаю Flutter-разработчиком в AGIMA. Мы с командой часто консультируем заказчиков о том, какой тип приложения им выбрать: нативное, кросс-платформенное или PWA. Я решил упростить себе работу и написать об этом статью. Но поскольку о разнице между кросс-платформой и нативом мы уже писали, сосредоточусь на разнице между нативом и PWA.

Что такое PWA

Progressive Web Apps (PWA) или прогрессивные веб-приложения — это не какой-то фреймворк или SDK. Это философия того, как надо строить современные веб-приложения. Говоря по-простому, это режим отображения веб-сайта, который можно запускать в виде приложения на смартфоне. Поэтому PWA могут работать на любом устройстве, будь то компьютер, планшет или смартфон.
С технологической точки зрения в PWA используются современные веб-стандарты, доступные в браузерах: HTML5, CSS3 и JavaScript. Подход PWA не накладывает каких-то особых ограничений на сами веб-приложения. Например, PWA могут быть одностраничными (SPA — single page applications) приложениями, а могут и не быть таковыми.

Главная особенность PWA — поддержка офлайн-работы с помощью механизма Service Worker’ов и связанная с этим возможность добавления иконки приложения на стартовый экран устройства пользователя. PWA-приложения есть у таких компаний, как, например, Tinder, Pinterest, Forbes, Aliexpress и Uber.

PWA vs Native

У прогрессивных приложений ряд преимуществ перед нативными. Однако, как и у любого другого подхода, у PWA есть и недостатки. Рассмотрим PWA в сравнении с нативными приложениями.

Преимущества прогрессивных приложений (PWA)

✔️ Кросс-платформенность.
PWA работает с большинством браузеров и операционных систем:

  • Браузеры: Safari, Chrome, FireFox и др.
  • OS: iOS, Android, macOS, Linux и др.
✔️ Более быстрое развертывание.
Создать PWA быстрее, чем разработать нативные приложения для разных платформ.
✔️ Производительность приложения.
Так как PWA по-прежнему является веб-сайтом, он не сравнится по скорости работы с нативными приложениями. Если сравнивать с React Native, масштаб беды невелик, а вот производительность PWA на Flutter будет гораздо выше RN-приложений.
✔️ Пуш-уведомления.
PWA позволяют отправлять пуш-уведомления благодаря Service Worker’ам. Однако эта функция зависит от платформы. Они доступны в браузерах Chrome, Opera, Safari и Mozilla и Safari в iOS.

Пуш-уведомления в PWA хорошо работают на Android, эта функция была добавлена в обновление 16.4 и включена по умолчанию для всех пользователей iOS.
✔️ Независимость от сторов.
Благодаря PWA долгие проверки обновлений контента приложения, возможное удаление приложения, непрозрачные проверки под капотом в Google Play/Apple Strore/App Gallery, уйдут в небытие. PWA — это приложение, которое собирается из браузера. Чтобы выложить приложение на сайт не нужны сторы, нужно просто загрузить его на домен.

Минусы PWA


  1. Один из главных недостатков PWA заключается в том, что они могут быть медленнее, чем обычные веб-сайты. Это происходит из-за того, что PWA должны загружать все ресурсы, необходимые для работы приложения, включая шрифты, изображения и JavaScript-файлы. Если на сайте много контента, то это может замедлить загрузку страницы.
  2. Некоторые устройства могут не поддерживать определенные функции PWA, такие как пуш-уведомления или офлайн-режим. Также некоторые браузеры могут не поддерживать возможности PWA.
  3. PWA приложения обеспечивают безопасность за счет использования HTTPS-протокола, манифеста веб-приложения и Service Worker`ов. Они полагаются на защиту, предоставляемую браузером, и требуют предварительной защиты от таких атак, как CSRF, XSS, SQL-инъекций и других подобных угроз.

Преимущества нативных приложений перед PWA

✔️ Максимальная производительность и функциональность.
Нативные приложения могут полностью использовать функциональность устройства, обеспечивая высокую производительность и доступ к широкому спектру возможностей.
✔️ Полный доступ к устройственным функциям.
Нативные приложения могут взаимодействовать с камерой, сенсорами, геолокацией и другими устройственными возможностями.
✔️ Лучший пользовательский опыт.
Нативные приложения могут предоставить наилучшие пользовательский интерфейс и взаимодействие благодаря оптимизации под каждую платформу.
✔️ Доступ к магазинам приложений.
Размещение в магазинах приложений может увеличить видимость приложения и доверие пользователей.
✔️ Безопасность в приложение.
Нативные приложения считаются более безопасными из-за ряда факторов:

  1. Приложения используют многофакторную аутентификацию.
  2. Имеют SSL-сертификат.
  3. Сторы имеют ряд правил, благодаря которым безопасность приложения находится на приемлемом уровне.

Минусы нативных приложений в сравнении с PWA


  1. Необходимость разрабатывать отдельные версии для разных платформ (iOS, Android) может потребовать больше времени и ресурсов.
  2. Обновления нативных приложений должны пройти процесс утверждения в магазинах приложений, что может вызвать задержки.
  3. Нативные приложения требуют скачивания и установки, что может отпугнуть часть пользователей.
Отдельно хочу остановиться на ограничениях базовых функций платформ на iOS и Android. Подчеркнуты ограничения и функции, недоступные на апрель 2023 года.

Android: iOS: Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Заголовок 7 Заголовок 8 Заголовок 9
Video Video Нужен блок Нужен блок Нужен блок с табличкой для статей на вихре Нужен блок Нужен блок Нужен блок с табличкой для статей на вихре Нужен блок
Geolocation Geolocation
Notification Notification
Contact picker Contact picker
Web share Web share
Authentification Authentification
File System File System
Vibration Vibration
Audio recording Audio recording
Audio Audio
Bluetooth Bluetooth
Web NFC Web NFC
QR code scan QR code scan
AR/VR AR/VR
Payment Payment
Wake Lock Wake Lock
Sensor Sensor
3D Motion 3D Motion
Multi Touch Multi Touch
Network info Network info
Speech synthesis Speech synthesis
Speech recording Speech recording

Speech recording

В заключение приведу ситуации, когда вам стоит обратить внимание именно на прогрессивные веб-приложения.
У вас ограниченное время и бюджет. PWA требуют меньше времени и средств для разработки и публикации. Если разрабатывать PWA с использованием фреймворка Flutter, то бизнес получает целый перечень приложений: Web + Mobile + PWA. Это дешевле, чем содержать три команды разработки: Android — Kotlin, iOS — Swift, Web — JS.
Вы хотите простое приложение для ваших пользователей. PWA не требует загрузки и позволяет взаимодействовать с пользователями с помощью пуш-уведомлений. К тому же PWA поможет вам охватить невовлеченных пользователей — тех, кто предпочитает взаимодействовать с веб-сайтами. Обычно такие пользователи неохотно переходят на мобильные приложения, вероятностью этого составляет ≈30–60%. Прогрессивные веб-приложения могут повысить вероятность того, что пользователь будет использовать и Web, и PWA.
Вам нужна независимость от платформы. PWA собирается под любую платформу Android и iOS, используя браузер. Поэтому неважно, с какой платформы было установлено приложение.

В остальных случаях лучше выбрать нативную разработку или рассмотреть кросс-платформу. Как выбрать между ними, мы уже рассказывали. Еще об этом можно узнать больше в телеграм-канале моего коллеги Саши Ворожищева, он знает всё про Flutter. А если у вас остались вопросы, готов ответить в комментариях.
Комментарии и обсуждения статьи на habr.

Content-hub

0 / 0
+7 495 981-01-85 + Become a customer
Services Cases Content-hub