Привет! Меня зовут Никита Грибков, я работаю 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-файлы. Если на сайте много контента, то это может замедлить загрузку страницы.

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

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

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

✔️ Максимальная производительность и функциональность.

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

✔️ Полный доступ к устройственным функциям.

Нативные приложения могут взаимодействовать с камерой, сенсорами, геолокацией и другими устройственными возможностями.

✔️ Лучший пользовательский опыт.

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

✔️ Доступ к магазинам приложений.

Размещение в магазинах приложений может увеличить видимость приложения и доверие пользователей.

✔️ Безопасность в приложение.

Нативные приложения считаются более безопасными из-за ряда факторов:

  1. Приложения используют многофакторную аутентификацию.

  2. Имеют SSL-сертификат.

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

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

  1. Необходимость разрабатывать отдельные версии для разных платформ (iOS, Android) может потребовать больше времени и ресурсов.

  2. Обновления нативных приложений должны пройти процесс утверждения в магазинах приложений, что может вызвать задержки.

  3. Нативные приложения требуют скачивания и установки, что может отпугнуть часть пользователей.

Отдельно хочу остановиться на ограничениях базовых функций платформ на iOS и Android. Подчеркнуты ограничения и функции, недоступные на апрель 2023 года.

Android:

Video
Geolocation
Notification
Contact picker
Web share
Authentification
File System
Vibration
Audio recording
Audio
Bluetooth
Web NFC
QR code scan
AR/VR
Payment
Wake Lock
Sensor
3D Motion
Multi Touch
Network info
Speech synthesis
Speech recording

iOS:

Video
Geolocation
Notification
Contact picker
Web share
Authentification
File System
Vibration

Audio recording
Audio
Bluetooth
Web NFC
QR code scan

AR/VR
Payment
Wake Lock
Sensor
3D Motion
Multi Touch
Network info
Speech synthesis
Speech recording

Итак, что выбрать

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

У вас ограниченное время и бюджет. PWA требуют меньше времени и средств для разработки и публикации. Если разрабатывать PWA с использованием фреймворка Flutter, то бизнес получает целый перечень приложений: Web + Mobile + PWA. Это дешевле, чем содержать три команды разработки: Android — Kotlin, iOS — Swift, Web — JS.

Вы хотите простое приложение для ваших пользователей. PWA не требует загрузки и позволяет взаимодействовать с пользователями с помощью пуш-уведомлений. К тому же PWA поможет вам охватить невовлеченных пользователей — тех, кто предпочитает взаимодействовать с веб-сайтами. Обычно такие пользователи неохотно переходят на мобильные приложения, вероятностью этого составляет ≈30–60%. Прогрессивные веб-приложения могут повысить вероятность того, что пользователь будет использовать и Web, и PWA.

Вам нужна независимость от платформы. PWA собирается под любую платформу Android и iOS, используя браузер. Поэтому неважно, с какой платформы было установлено приложение.

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

Что еще почитать об этом

Комментарии (8)


  1. ibnteo
    13.09.2023 10:37

    У lichess.org PWA сделали гораздо удобнее чем Native, всё же меньше трудозатрат при создании приложения.


  1. Error1024
    13.09.2023 10:37

    Про PWA vs Native - как не странно это признавать, но иногда «натив» медленнее бывает. В оптимизацию браузерных движков вбуханны миллиарды денег и сотни тысяч часов разаработки.

    Моя PWA PixelArt Camera - https://turborium.github.io/turbopixel/ - работет тупо быстрее многих «нативных» аналогов из AppStore. Ну и зачем тогда «страдать» с байтами, когда jit в рантайме оптимизирует все?


    1. ANDROMAQUEHERE Автор
      13.09.2023 10:37

      Вы верно отметили, что (PWA) могут быть быстрыми и эффективными. Но стоит заметить, что сравнение PWA с нативными приложениями не всегда однозначно, и зависит от конкретного случая.
      Пример PixelArt Camera показывает, что PWA могут быть предпочтительнее нативных приложений.
      Но при выборе между PWA и нативными приложениями нужно учитывать цели проекта, потребности пользователей и конкретные характеристики приложения.


      1. Error1024
        13.09.2023 10:37

        Эээээээм, мне кажется или это ответ через ChatGPT?


        1. ANDROMAQUEHERE Автор
          13.09.2023 10:37

          Странно принимать вежливость, за генерацию AI)


  1. george3
    13.09.2023 10:37

     а вот производительность PWA на Flutter будет гораздо выше RN-приложений.

    Это почемуйто. Года 3 назад сайты на flutter тормозили минимум 2-x по сравнении с обычным на js. Тормознутая отрисовка в основном.


    1. ANDROMAQUEHERE Автор
      13.09.2023 10:37

      В 2020 году, Flutter Web я не застал, знаю только что stable Web вышел в 2021 году.
      Вероятно вы правы, 3 года приложения скомпилированные dartToJs тормозили.

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


  1. 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 и пишет файлы напрямую в файловую систему из браузера. И какие есть ограничения у этого способа.