Привет! Меня зовут Никита Грибков, я работаю 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
Один из главных недостатков PWA заключается в том, что они могут быть медленнее, чем обычные веб-сайты. Это происходит из-за того, что PWA должны загружать все ресурсы, необходимые для работы приложения, включая шрифты, изображения и JavaScript-файлы. Если на сайте много контента, то это может замедлить загрузку страницы.
Некоторые устройства могут не поддерживать определенные функции PWA, такие как пуш-уведомления или офлайн-режим. Также некоторые браузеры могут не поддерживать возможности PWA.
PWA приложения обеспечивают безопасность за счет использования HTTPS-протокола, манифеста веб-приложения и Service Worker`ов. Они полагаются на защиту, предоставляемую браузером, и требуют предварительной защиты от таких атак, как CSRF, XSS, SQL-инъекций и других подобных угроз.
Преимущества нативных приложений перед PWA
✔️ Максимальная производительность и функциональность.
Нативные приложения могут полностью использовать функциональность устройства, обеспечивая высокую производительность и доступ к широкому спектру возможностей.
✔️ Полный доступ к устройственным функциям.
Нативные приложения могут взаимодействовать с камерой, сенсорами, геолокацией и другими устройственными возможностями.
✔️ Лучший пользовательский опыт.
Нативные приложения могут предоставить наилучшие пользовательский интерфейс и взаимодействие благодаря оптимизации под каждую платформу.
✔️ Доступ к магазинам приложений.
Размещение в магазинах приложений может увеличить видимость приложения и доверие пользователей.
✔️ Безопасность в приложение.
Нативные приложения считаются более безопасными из-за ряда факторов:
Приложения используют многофакторную аутентификацию.
Имеют SSL-сертификат.
Сторы имеют ряд правил, благодаря которым безопасность приложения находится на приемлемом уровне.
Минусы нативных приложений в сравнении с PWA
Необходимость разрабатывать отдельные версии для разных платформ (iOS, Android) может потребовать больше времени и ресурсов.
Обновления нативных приложений должны пройти процесс утверждения в магазинах приложений, что может вызвать задержки.
Нативные приложения требуют скачивания и установки, что может отпугнуть часть пользователей.
Отдельно хочу остановиться на ограничениях базовых функций платформ на iOS и Android. Подчеркнуты ограничения и функции, недоступные на апрель 2023 года.
Android: |
iOS: |
Итак, что выбрать
В заключение приведу ситуации, когда вам стоит обратить внимание именно на прогрессивные веб-приложения.
У вас ограниченное время и бюджет. PWA требуют меньше времени и средств для разработки и публикации. Если разрабатывать PWA с использованием фреймворка Flutter, то бизнес получает целый перечень приложений: Web + Mobile + PWA. Это дешевле, чем содержать три команды разработки: Android — Kotlin, iOS — Swift, Web — JS.
Вы хотите простое приложение для ваших пользователей. PWA не требует загрузки и позволяет взаимодействовать с пользователями с помощью пуш-уведомлений. К тому же PWA поможет вам охватить невовлеченных пользователей — тех, кто предпочитает взаимодействовать с веб-сайтами. Обычно такие пользователи неохотно переходят на мобильные приложения, вероятностью этого составляет ≈30–60%. Прогрессивные веб-приложения могут повысить вероятность того, что пользователь будет использовать и Web, и PWA.
Вам нужна независимость от платформы. PWA собирается под любую платформу Android и iOS, используя браузер. Поэтому неважно, с какой платформы было установлено приложение.
В остальных случаях лучше выбрать нативную разработку или рассмотреть кросс-платформу. Как выбрать между ними, мы уже рассказывали. Еще об этом можно узнать больше в телеграм-канале моего коллеги Саши Ворожищева, он знает всё про Flutter. А если у вас остались вопросы, готов ответить в комментариях.
Что еще почитать об этом
Комментарии (8)
Error1024
13.09.2023 10:37Про PWA vs Native - как не странно это признавать, но иногда «натив» медленнее бывает. В оптимизацию браузерных движков вбуханны миллиарды денег и сотни тысяч часов разаработки.
Моя PWA PixelArt Camera - https://turborium.github.io/turbopixel/ - работет тупо быстрее многих «нативных» аналогов из AppStore. Ну и зачем тогда «страдать» с байтами, когда jit в рантайме оптимизирует все?
ANDROMAQUEHERE Автор
13.09.2023 10:37Вы верно отметили, что (PWA) могут быть быстрыми и эффективными. Но стоит заметить, что сравнение PWA с нативными приложениями не всегда однозначно, и зависит от конкретного случая.
Пример PixelArt Camera показывает, что PWA могут быть предпочтительнее нативных приложений.
Но при выборе между PWA и нативными приложениями нужно учитывать цели проекта, потребности пользователей и конкретные характеристики приложения.
george3
13.09.2023 10:37а вот производительность PWA на Flutter будет гораздо выше RN-приложений.
Это почемуйто. Года 3 назад сайты на flutter тормозили минимум 2-x по сравнении с обычным на js. Тормознутая отрисовка в основном.
ANDROMAQUEHERE Автор
13.09.2023 10:37В 2020 году, Flutter Web я не застал, знаю только что stable Web вышел в 2021 году.
Вероятно вы правы, 3 года приложения скомпилированные dartToJs тормозили.
Сейчас, ситуация исправилась, заметных тормозов не наблюдаю.
RouR
13.09.2023 10:37Из статьи в статью, из года в год перепечатывают один и тот же тезис что PWA медленный.
Но эта статья пробивает дно.
Никаких замеров производительности, одни оценочные суждения!
Но даже если к ним присмотреться, то
Один из главных недостатков PWA заключается в том, что они могут быть медленнее, чем обычные веб-сайты. Это происходит из-за того, что PWA должны загружать все ресурсы, необходимые для работы приложения, включая шрифты, изображения и JavaScript-файлы.
Нет, это ложь. PWA устанавливает воркер, который кэширует всё приложение.
Максимальная производительность и функциональность.
Не факт
Полный доступ к устройственным функциям.
Нативные приложения могут взаимодействовать с камерой, сенсорами, геолокацией и другими устройственными возможностями.
Не всегда это нужно. А когда нужно - можно погуглить "How to Access the Camera in a PWA" и т.п. Ответы есть, PWA это тоже умеет.
Лучший пользовательский опыт.
Зависит больше от навыков разработчика.
Доступ к магазинам приложений.
Так же возможен
Нативные приложения считаются более безопасными из-за ряда факторов:
1. Приложения используют многофакторную аутентификацию.
Как будто PWA это запрещает. Как будто нативных приложений без двухфакторки нету.
2. Имеют SSL-сертификат.
PWA без SSL не работает. В принципе не работает. А вот нативное приложение может сходить на сервер и без SSL.
Очень странно, когда автор пишет в статье, о минусе PWA - "PWA приложения обеспечивают безопасность за счет использования HTTPS-протокола". И после этого - "Преимущества нативных приложений перед PWA... Имеют SSL-сертификат. "
А-а-а, у меня пригорает от такого уровня аналитики.
Сторы имеют ряд правил, благодаря которым безопасность приложения находится на приемлемом уровне.
"всё смешалось в доме облонских". Как будто в сторах нету вирусов и скама. Как будто разработчику PWA что-то мешает соблюдать "ряд правил, благодаря которым безопасность приложения находится на приемлемом уровне"
p.s. Возможно, когда-нибудь, я напишу статью про Ionic. Возможно я расскажу как тот же самый PWA, уже без Ionic, работает с sqlite и пишет файлы напрямую в файловую систему из браузера. И какие есть ограничения у этого способа.
ibnteo
У lichess.org PWA сделали гораздо удобнее чем Native, всё же меньше трудозатрат при создании приложения.