Привет! Меня зовут Никита Грибков, я работаю 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 — поддержка офлайн-работы с помощью механизма 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 хорошо работают на Android, эта функция была добавлена в обновление 16.4 и включена по умолчанию для всех пользователей iOS.
✔️ Независимость от сторов.
Благодаря PWA долгие проверки обновлений контента приложения, возможное удаление приложения, непрозрачные проверки под капотом в Google Play/Apple Strore/App Gallery, уйдут в небытие. PWA — это приложение, которое собирается из браузера. Чтобы выложить приложение на сайт не нужны сторы, нужно просто загрузить его на домен.
Минусы PWA
- Один из главных недостатков PWA заключается в том, что они могут быть медленнее, чем обычные веб-сайты. Это происходит из-за того, что PWA должны загружать все ресурсы, необходимые для работы приложения, включая шрифты, изображения и JavaScript-файлы. Если на сайте много контента, то это может замедлить загрузку страницы.
- Некоторые устройства могут не поддерживать определенные функции PWA, такие как пуш-уведомления или офлайн-режим. Также некоторые браузеры могут не поддерживать возможности PWA.
- PWA приложения обеспечивают безопасность за счет использования HTTPS-протокола, манифеста веб-приложения и Service Worker`ов. Они полагаются на защиту, предоставляемую браузером, и требуют предварительной защиты от таких атак, как CSRF, XSS, SQL-инъекций и других подобных угроз.
Преимущества нативных приложений перед PWA
✔️ Максимальная производительность и функциональность.
Нативные приложения могут полностью использовать функциональность устройства, обеспечивая высокую производительность и доступ к широкому спектру возможностей.
✔️ Полный доступ к устройственным функциям.
Нативные приложения могут взаимодействовать с камерой, сенсорами, геолокацией и другими устройственными возможностями.
✔️ Лучший пользовательский опыт.
Нативные приложения могут предоставить наилучшие пользовательский интерфейс и взаимодействие благодаря оптимизации под каждую платформу.
✔️ Доступ к магазинам приложений.
Размещение в магазинах приложений может увеличить видимость приложения и доверие пользователей.
✔️ Безопасность в приложение.
Нативные приложения считаются более безопасными из-за ряда факторов:
- Приложения используют многофакторную аутентификацию.
- Имеют SSL-сертификат.
- Сторы имеют ряд правил, благодаря которым безопасность приложения находится на приемлемом уровне.
Минусы нативных приложений в сравнении с PWA
- Необходимость разрабатывать отдельные версии для разных платформ (iOS, Android) может потребовать больше времени и ресурсов.
- Обновления нативных приложений должны пройти процесс утверждения в магазинах приложений, что может вызвать задержки.
- Нативные приложения требуют скачивания и установки, что может отпугнуть часть пользователей.
Отдельно хочу остановиться на ограничениях базовых функций платформ на 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. А если у вас остались вопросы, готов ответить в комментариях.
В остальных случаях лучше выбрать нативную разработку или рассмотреть кросс-платформу. Как выбрать между ними, мы уже рассказывали. Еще об этом можно узнать больше в телеграм-канале моего коллеги Саши Ворожищева, он знает всё про Flutter. А если у вас остались вопросы, готов ответить в комментариях.
Комментарии и обсуждения статьи на habr.