PWA не для всех

    В комментах к моей предыдущей статье о service worker'ах была высказана мысль, что PWA на десктопах - вещь малополезная. Примерно полгода назад я разбирался с тем, как прикрутить PWA Vue Storefront к магазинам на платформе Magento и мне понравилось, как шустро крутилось в моём компьютере это приложение по сравнению с оригинальным web-интерфейсом. Мой персональный опыт показывал, что PWA на десктопах имеет неплохую перспективу, но дальнейшее углубление в тему показало, что коллега @sumanai со своим отрицанием PWA на десктопах был прав.

    Offline

    Какая основная "фишка" прогрессивных web-приложений?

    Способность работать в режиме offline.

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

    Ввод-вывод

    По способу ввода ("сенсорный экран" против "клавиатура + мышь") и отображения информации (размер дисплея в дюймах) устройства можно разделить на две больших группы:

    • смартфоны и планшеты

    • ноутбуки и десктопы

    Web-интерфейсы

    Современные браузеры предлагают разнообразный API для web-приложений, большая часть которого работает для обеих групп устройств. Тем не менее вот эти три интерфейса актуальны именно для смартфонов/планшетов:

    IndexedDB

    Для "осознанного" кэширования запросов (например, на уровне service worker'ов) современные браузеры предоставляют Cache API, но основным хранилищем данных при работе в режиме offline является IndexedDB. Серверная база данных общего пользования (MySQL, Postgres, Oracle, MongoDB, ...) в этот момент заменяется базой данных персонального пользования (IndexedDB).

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

    SEO

    В моей статье "Влияние service worker'ов на web-приложения" я пришёл вот к такой схеме работы PWA:

    При общении браузера с сервером возникают два потока информации:

    • статика: это код (HTML/CSS/JS) и медиа-файлы (в основном изображения), которые могут кэшироваться service worker'ом;

    • API: это пользовательские данные, которые так или иначе должны мигрировать между серверным хранилищем (DB) и персональным хранилищем (IndexedDB);

    PWA - это прежде всего альтернатива native apps для мобильных устройств. Native apps также можно рассматривать с позиции, что статика (код + медиа) сворачивается в один пакет и распространяется через App Store или Google Play, а данные передаются между приложением и сервером через API (с учётом offline/online состояния подключения). И при этом никто не ожидает, что поисковики должны индексировать API-запросы native apps. От web-приложений же наоборот ждут, что любой адрес (страница) на сервере должен иметь возможность быть собранным на стороне сервера, в том числе и для индексации поисковиками.

    Резюме

    PWA - это, в первую очередь, альтернатива native apps для мобильных устройств.

    PWA должны обеспечивать работу в режиме offline, что сильно усложняет разработку клиентской части, но является бесполезным функционалом для десктопов с их стабильным online-режимом работы сети.

    Особенности взаимодействия пользователя со смартфоном/планшетом (ввод-вывод, гео-позиционирование) достаточно сильно отличаются от особенностей взаимодействия пользователя с десктопом/ноутбуком. Создание универсального решения ("амфибии") добавляет сложности по отношению к двум решениям - отдельно для смартфонов/планшетов и отдельно для ноутбуков/десктопов. Причём не столько с точки зрения кодирования, сколько с точки зрения UX.

    PWA хорошо подходят для мобильных пользователей, но очень плохо подходят для поисковых роботов, что бы там себе ни думал по этому поводу Google.

    Похожие публикации

    Средняя зарплата в IT

    110 475 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 6 942 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 15

      0
      Вполне очевидно, что на десктопах и так можно почти всё делать «оффлайн», просто залив всё в один html. Не будет «красивого» доступа к файловой системе, но всё остальное — будет. А уж если прибавить к этому Electron, то и упаковывать всё в html не придётся, и доступ к файловой системе будет какой угодно.

      Естественно, что при таких вводных PWA на десктопе особо никому не впился.
        +2
        На Windows PWA может получить доступ к UWP API, если будет распространяться пакетом через стор.
          0

          Еще PWA работает в песочнице — не может повредить компьютеру. Т.е. безопасность веб приложений + своя иконка тема, окно, офлайн и так далее.

          +3
          Тут больше вопрос — какого рода у вас приложение и что вы от него хотите в на десктопе и в оффлайне. Мне нравится то, что PWA работает как визуально почти нативное приложение. У него есть иконка, он запускается отдельно. И если вдруг нет сети — оно будет работать и хотя бы говорить, что сети нет. Обычный веб-сайт такого не умеет, хотя если добавить сервис воркеры, то будет почти что то же самое.
            0
            Вообще-то умеет, сообщение об отсуствии интернета от самого браузера? Ну и потом, сайт может быть закэширован и работать оффлайн, в чём собственно проблема?
              +1
              Ну и потом, сайт может быть закэширован и работать оффлайн, в чём собственно проблема
              Никаких проблем, это часть технологии под названием PWA
                0
                тут можно поспорить, так кэширование доков появилось гораздо раньше, чем идеи об ПВА и сделанно это было в целях экономии трафика, а не как не для создания «приложений» из сайтов. Тем более закэшированный сайт имеет ограничения перед ПВА
                  0
                  Если под кешированием имеется ввиду сохранение вебстраницы — да, оно появилось давно, но в современном вебе применимо только в статьям и собственно разработчик сайта тут сделать ничего не может
                    0
                    чего? Только в статьях? Активно используется вообще-то, ради интереса, попробуй отключить кэш в браузере на денёк — увидишь как сильно изменится картина всего веба.
            0

            У меня главным ограничением стало 10мб хранилища. Я рад делать приложеньки, которые выглядят как нативные для юзера, но невозможность сохранить кусочек контента (скачать урок, статью, видео) это прям беда.


            Кстати про полный онлайн для десктопа — я бы не был уже так уверен. Лэптоп как основной рабочий девайс сегодня не редкость, да, дома/в офисе он в сети всегда, но его берут с собой на встречи, сидят с ним в кафе, в переговорке или может появится время в дороге — это тот момент когда оффлайн очень помогает. Конечно это редкие, но, как говорится "меткие" моменты.

              0

              Для IndexedDB ограничения размера хранилища в 10Mb нет. Поведение зависит от браузера. В общем случае есть уровень (10Mb, 50Mb, ...) после которого браузер запрашивает у пользователя разрешение для приложения использовать больше пространства для хранения данных, после чего можно сохранять сотни мегабайт, гигабайты и даже десятки гигабайт (если размер памяти устройства позволяет). Для Safari ограничение на размер IndexedDB — 500Mb на одно приложение (origin).


              Кстати про полный онлайн для десктопа — я бы не был уже так уверен.

              Да, ноутбуки (лэптопы) относятся к мобильным устройствам и могут попадать в offline mode. Но у них другой интерфейс взаимодействия с пользователем, по сравнению со смартфонами (основная целевая аудитория для PWA) и планшетами. Можно заморочиться и сделать PWA и для них, и для десктопов (которые практически всегда online), просто это будет гораздо сложнее из-за разницы интерфейсов устройств (размеры дисплея и методы ввода информации), придётся учитывать разный User Experience. Но да, если ресурсы позволяют, то можно и для ноутов запилить PWA. Просто эффективность PWA для смартфонов выше, чем для ноутбуков.

                0

                Ого. Я это пропустил. Уже даже начинаю сомневаться что верно в прошлый раз нашел ограничение...


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

              +1

              Вы кажется ни разу не выходили из дома с ноутбуком, не уезжали в командировки, не сидели в кафе с перегруженным вайфаем. Иначе бы вы такие странные вещи про офлайн для десктопных PWA не говорили. Тот же Squoosh.app у меня на десктопе всегда под рукой, а не только когда есть сеть. И это много раз спасало.

                +1

                Так у автора ноутбуки относятся к мобильным устройствам

                0
                Нашли для себя прекрасное применение PWA и на десктопе. Была задача отображать демографическую аналитику на разных планшетах и десктопах. Аналитика, хоть и берется из оперативной базы, но и если возьмется из кеша, то ничего страшного не произойдет (на годовые данные 1-2 дня существенно не влияют). А с адаптивностью вполне себе справляется js-фреймворк.

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

                Самое читаемое