Pwa как установить на телефон

Обновлено: 10.01.2025

От автора: 30 марта состоялся долгожданный релиз iOS 11.3 с поддержкой базовых функций PWA на iPhone и iPad – сервис воркеры и манифест файлы. Хорошо, наконец-то, получить поддержку этих функций, но UX PWA на iOS все еще не идеален. Это значит, что множество выпущенных PWA iOS до сих пор имеют серьезные проблемы на устройствах Apple, а на Android работают почти, как родные приложения. Во front end сообществе уже высказали свое недовольство, список багов и проблем длинный. Но не опускайте руки! Ниже собрано несколько советов, как решить эти проблемы и максимально приблизить PWA к обычным приложениям.

Что не так с поддержкой PWA на iOS?

В последнем обновлении iOS Apple добавила поддержку сервис воркеров и манифеста приложения. Теперь можно использовать кэширование с сервис воркерами и заставить PWA работать без интернет соединения. Давайте вспомним – это базовое требование в определении PWA. К сожалению, в реализации Apple есть несколько минусов.

По сравнению с Android, поддержка сервис воркеров сильно ограничена. Вы лишь можете сохранять данные приложения и кэшировать его файлы (никаких фоновых задач). У хранилища ограничение в 50Мб и «пару недель».

iOS 11.3 также представила поддержку манифест файла. Но наши тесты показали, что она далека от идеальной. Иконки работают плохо (или вообще не работают), нет поддержка экрана запуска – при загрузке приложения у вас просто пустой белый экран. Приложение перезагружается каждый раз, когда возвращается из фонового режима, нет поддержка push уведомлений и других функций, которые необходимы для мобильного приложения. В общем – общий UX очень плохой.

И что? На iOS невозможно сделать PWA похожими на родные приложения?

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Я считаю, что PWA – это будущее инклюзивного, быстрого и интуитивного веба. Поэтому хочу поделиться с вами некоторыми советами о том, как обойти ограничения iOS для PWA.

Про совет №1: сделаем иконку приложения снова великой (на всех устройствах)

Мы столкнулись с тем, что iOS не использует иконки из манифеста и сильно портит иконку приложения на домашнем экране. Обойти проблему очень легко – просто добавьте мета тег apple-touch-icon с подходящим изображением. Не подкладывайте иконки с прозрачностью, не сработает.

Совсем недавно наткнулся на pwa приложения. На удивление они легко создаются и устанавливаются на ios, android и даже windows. Если говорить просто pwa - это ваш веб сайт, который ведет себя как обычное приложение в телефоне. Но обо всем по порядку.

Преимущества pwa приложений:

Легкость создания
Кроссплатформенность - достаточно сделать один код, который будет работать сразу на несколько платформах.
Лучший рейтинг в Google
Кэширование ресурсов (картинки, css, js) - соответственно, быстрая загрузка
И самое главное pwa приложения могут работать при отсутствии интернета

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

Как установить pwa приложение в Android?

Если на сайте все правильно настроено, то при открытии сайта, автоматически появится уведомление - Добавить на рабочий стол? Когда юзер нажмет да, появится ярлычек на страницу вашего сайта. Все, на этом приложение установлено!

Как установить pwa приложение в IOS?

К сожалению, у меня нет iphone (или к счастью 🙂 ), поэтому тестировал у знакомых. Вот, что я выяснил - официально pwa на ios работает с версии 11.7. Уведомление, добавить на экран не появляется. Нужно в сафари нажать поделиться и выбрать На экран «Домой» или подобное. В общем-то так можно сделать с любым сайтом на сафари, но при нажатии на иконку от pwa открывается pwa приложение, которое работает без интернета и навигации браузера.

Как установить pwa приложение в Chrome браузере?

Для этого надо открыть сайт с pwa (подождите, чтобы он сначала полностью загрузился), нажать кнопку Настройки (три точки) и выбрать Установка приложения "Название". Оно сразу установится и откроется.

Автоматически оно продублируется в Пуск > Приложения Chrome > "Название". Оттуда его можно запустить, создать ярлык на рабочий стол или удалить. Также вы можете управлять всеми приложениями из браузера Chrome по адресу: chrome://apps/

А теперь самое интересное - во второй части мы начнем создавать собственное pwa приложение, которое будет тестировать и устанавливать.

Где вы берёте софт для смартфона? Несмотря то что у пользователей Android выбора гораздо больше, чем у пользователей iOS, вариантов по факту не так уж и много. Это может быть либо один из так называемых официальных магазинов приложений вроде Google Play или AppGallery, либо агрегатор APK вроде APKMirror или APKPure. Пользоваться первыми, бесспорно, намного удобнее, чем вторыми, потому что они обладают механизмом автоматической установки и не засоряют память смартфона установочными файлами. Но ведь есть ещё и третий вариант, который называется PWA.

PWA теперь будут полноценной альтернативой обычным приложениям

PWA, или прогрессивные веб-приложения – это специальные версии сайтов, интерфейс которых адаптирован для работы на мобильных устройствах, за счёт чего их почти невозможно отличить от обычных приложений. Несмотря на то что они работают на мощностях браузера, по факту они запускаются в выделенном пространстве, которое им обеспечивает Android System WebView, так что Chrome или другой веб-обозреватель, которым вы пользуетесь, в момент использования PWA не запускается.

Как устанавливать PWA на Android

Раньше принцип установки PWA был довольно простым. Более того, как таковой установки и не требовалось. Всё, что нужно было сделать, — это сохранить вкладку на рабочем столе. Если сайт был адаптирован под формат PWA, пользователь получал иконку как при установке обычного приложения, нажатие на которую активировало PWA.

Однако Google сочла, что это недостаточно очевидный способ. Поэтому в Chrome был реализован специальный механизм установки прогрессивных веб-приложений, напоминающий установку обычного софта. Его можно включить в меню экспериментальных функций:

Запустите Chrome на своём Android-смартфоне;
Забейте в адресной строке адрес chrome://flags;

Найдите Mobile PWA Installation bottom sheet;
В выпадающем меню напротив выберите Enabled;
Перезагрузите браузер нажатием кнопки Relaunch;

Перейдите на сайт, у которого есть PWA (у меня это Twitter);
В контекстном меню выберите «Установить приложение».

Учитывайте, что на данный момент не так много сайтов, которые поддерживают PWA и новое окно установки. Чтобы оно появилось, нужно, чтобы разработчики самостоятельно адаптировали свой веб-ресурс к особенностям нового фреймворка. Только после этого пользователи смогут увидеть новое окно установки и его содержимое.

Что общего у PWA и обычных приложений

PWA работают на мощностях браузера, но не запускают его, когда запускаются сами

Теперь, когда вы захотите добавить себе PWA на рабочий стол, на экране появится не просто баннер с действиями подтверждения и отмены, а полноценное диалоговое окно с кнопкой установки, описанием сервиса, который вы устанавливаете, и, что немаловажно, скриншотами интерфейса этого PWA. Это позволит решить сразу несколько проблем:

Во-первых, Google как бы легализует PWA, признавая их за полноценные приложения, ведь, если PWA нужно устанавливать, значит, они ничем не отличаются от обычного софта;
Во-вторых, Google даёт пользователю понять, что интерфейсно PWA – это не сайты, а самые настоящие приложения, которые ничем не отличаются от традиционных приложений;
В-третьих, разработчики смогут предложить для своих PWA именно то описание, которое, по их мнению, сможет привлечь пользователя, ведь в Google Play такое тоже есть.

Судя по всему, процесс установки изменился не только косметически, но и «конструктивно». Дело в том, что от момента нажатия на кнопку установки до момента появления иконки PWA на рабочем столе смартфона проходит около 30 секунд. Возможно, сайт подгружал какие-то компоненты интерфейса, чтобы облегчить использование сервиса, а, возможно, это просто затупил мой интернет.

В только что вышедшей iOS 11.3 практически незаметно начали работать Progressive Web Apps. Настала пора разобраться с тем, как PWA работают в новой версии операционной системы и какие ограничения накладываются на такие приложения.

В iOS 11.3 Apple незаметно добавила поддержку базового сета технологий Progressive Web Apps (PWA). Настало время посмотреть, как они работают, каковы их плюсы и минусы и что вам нужно знать, если у вас уже есть опубликованное PWA.

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

В процесс при этом не вовлечены магазины приложений, только Edge/Windows 10 сейчас размещает PWA в магазине. Это значит, что теперь вы можете устанавливать приложения на iOS без необходимости получать одобрение App Store. Apple не упомянула об этой возможности только потому, что не хотела запутать пользователей. Даже в заметках о релизе Safari не упоминалось об этой возможности.

Но ведь Apple и создала PWA?

До того, как команда Chrome придумала термин PWA, идея принадлежала Safari и оригинальной iPhone OS. В 2007 Стив Джобс анонсировал “ещё одну вещь” на WWDC: разработка приложений для оригинального iPhone была основана как раз на веб-технологиях. Напомним, что App Store не было в оригинальном плане, а нативный SDK не был доступен в течение первого года существования устройства. С точки зрения Apple, даже сегодня PWA — это просто “веб-приложение с домашнего экрана”, а иконку называют WebChip. Можете посмотреть мою презентацию с Fluent Conference, я упоминаю это на 10:50.

Приложение не проходит тест качества App Store, верно?

Да, все правильно. Но приложение будет работать на основе модели безопасности браузера или веб-платформы. Это означает, что вы можете “публиковать” приложения, которые не будут одобрены в магазине, например, внутреннее приложение для ваших сотрудников, но у вас не будет доступа к чисто нативным функциям: FaceID на iPhone X или ARKit. Либо вам придется подождать, пока веб-платформа начнет поддерживать эти новые функции.

PWA может запускаться внутри Safari, как любой сайт, или в полноэкранном режиме, как любое другое приложение в системе. Если вам интересно, используют ли PWA Web View, то это не так для Safari или установленнии иконкой, но Web View используется при работе в других браузерах или в приложении Facebook.

Возможности PWA на iOS

С Web Platform на iOS вы можете получить доступ к:

геолокации
сенсорам
камере
аудиовыходу
синтезу речи (только с подключенной гарнитурой)
Apple Pay
WebAssembly, WebRTC, WebGL и другим экспериментальным функциям.

Ограничения по сравнению с нативными приложениями

Приложение может хранить данные и файлы не больше чем на 50 МБ.
Если пользователь не использует приложение несколько недель, iOS удалит все файлы приложения. Иконка будет доступна на домашнем экране, но приложение будет скачиваться снова.
Отсутствие доступа к некоторым функциям: Bluetooth, серийному номеру, Beacons, Touch ID, Face ID, датчику высоты, информации о батарее.
Отсутствие работы в фоновом режиме.
Отсутствие доступа к приватной информации (контакты, background location) и к нативным социальным приложениям.
Отсутствие доступа к платежам внутри приложения и другим сервисам Apple.
На iPad отсутствует доступ к оконному отображению, PWA будет занимать весь экран
Отсутствие пуш-оповещений и интеграции с Siri

Что PWA могут на Android, но не на iOS

На Android вы можете хранить более 50 МБ.
Android не удаляет файлы, если вы не используете приложение, но файлы могут быть удалены при отсутствии свободной памяти. Если пользователь часто использует PWA, приложение может запросить постоянное место для хранения.
Доступ к Bluetooth для устройств BLE.
Web Share для доступа к собственному диалоговому окну
Распознавание речи
Фоновая синхронизация и пуш-оповещения
Баннер веб-приложения, который пригласит пользователя установить приложение
Ограниченная кастомизация Splash Screen и ориентации
С WebAPK и Chrome пользователи не могут установить больше одной копии PWA
С WebAPK и Chrome PWA появляются в настройках, и вы можете видеть статистику использования данных, на iOS все находится в разделе Safari
С WebAPK и Chrome PWA управляет запросами для своего URL, поэтому ссылка на PWA откроется в отдельном окне, а не в браузере.

Что PWA могут на iOS, но не на Android

Пользователи могут менять название иконки перед установкой
Пользователей можно настраивать в профиле конфигурации, поэтому корпоративные пользователи могут получать ссылки на PWA от компании. Safari называет эту функцию WebChip, но это не соответствует Web App Manifest.

Как установить PWA без App Store?

Приложение будет выглядеть, как любая другая иконка на экране. Для неё не будет доступно меню 3D Touch. И если вы установите то же самое PWA снова, у вас будет еще одна иконка, указывающая на то же приложение.

Во многих веб-приложениях есть ссылка на установку нативного приложения из App Store, и она остается в PWA, как в примере с Tinder:

У меня уже есть PWA, будет ли оно работать на iOS?

Ваше PWA будет сразу доступно для установки после того, как ваши пользователи обновят систему до iOS 11.3. Вам не нужно будет подстраиваться под iOS, но все не всегда будет работать, как задумано.

При нажатии Login или Continue открывается окно Safari, поэтому PWA оказывается бесполезным

Я писал об этом статью раньше, и многие баги и сложности бета-стадии остались в финальной версии.

Читайте также: