Сайт устанавливается на телефон как приложение: что даёт PWA клиенту и компании

Зачем клиенту ещё один значок на телефоне?

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

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

По руководству MDN, установленное веб-приложение получает значок и может запускаться в отдельном режиме. Способ предложения установки различается между браузерами и платформами, поэтому обещание одинаковой кнопки на любом телефоне стоит заменить перечнем поддерживаемых устройств.

Что сравнивать с обычным сайтом

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

Обычный сайт, PWA и отдельное приложение

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

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

Критерий вместо модного названия

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

Отдельный значок не равен офлайн-режиму. В описании установки MDN отмечено, что service worker часто используют для работы без сети, но наличие этого компонента не является обязательным условием установки. Сценарий без сети требует отдельного проектирования.

Название, значок и начальный экран

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

Установку описывает манифест — файл с параметрами веб-приложения. В руководстве MDN для Chromium названы поля name или short_name. Они задают имя, которое увидит человек при установке. Это точное место для названия сервиса, а не для длинного рекламного обещания. Короткое узнаваемое имя легче связать с каталогом, который клиент уже использует.

Первый экран выбирают намеренно. Поле start_url указывает начальный адрес, а display управляет режимом отображения. Эти названия нужны в задании специалисту: после запуска клиент попадает в полезную точку, при этом поведение без браузерной панели остаётся понятным.

Что попросить показать

Включите в демонстрацию запуск после закрытия и повторный вход в кабинет, потому что показ значка сразу после установки не раскрывает, сохранится ли доступ к нужной покупке, как откроется внешняя ссылка и куда вернётся человек после неё. Согласуйте название и изображение отдельно. В списке параметров Chromium для значков указаны размеры 192 и 512 пикселей, а доступный вид на экране всё равно оценивают на реальном устройстве.

Для рабочей установки используется HTTPS. Размещение и доступ к данным стоит испытать на тестовом адресе со специалистом, чтобы первый настоящий заказ уже проходил через рабочее соединение и не становился опытом по первоначальному запуску сервиса.

Что клиент увидит без интернета?

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

Кэш хранит ранее загруженные данные. MDN объясняет работу без сети через service worker и локальное сохранение ресурсов. Вариант cache-first сначала обращается к сохранённой копии, а network-first сначала пытается получить ответ по сети. Для заказчика смысл выбора прост: какие сведения можно безопасно показать из прошлого состояния и какие требуют свежего ответа. Техническую стратегию подбирает разработчик после решения о допустимой давности информации. Для цен и доступности это решение особенно существенно: сохранённая страница может выглядеть убедительно, хотя магазин уже не способен выполнить показанное на ней предложение в прежнем объёме и по прежней стоимости.

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

Что включить в образец задания

Можно записать так: «Без сети клиент видит сохранённый список товаров и сообщение о давности данных. Для подтверждения заказа требуется соединение. После восстановления сети сервис получает действующие условия и даёт подтвердить изменившуюся сумму». Это выбранный вариант для обсуждаемого каталога, а не универсальное правило всех PWA.

Повтор отправки требует внимания. Если человек нажал кнопку, связь пропала и результат неизвестен, интерфейс объясняет состояние покупки, чтобы клиент не создавал дубликаты из-за молчания экрана.

Поддержку оценивают на телефонах клиентов

Один удачный показ на телефоне разработчика покрывает только этот телефон. Список устройств и браузеров выбирают по фактическим посетителям сайта и требованиям компании к поддержке.

Одинаковую инструкцию установки лучше не обещать. В справке MDN отдельно описаны способы установки по платформам. Кроме того, собственная кнопка с использованием beforeinstallprompt не поддерживается на iOS. Если этот путь заложен в макет без запасного объяснения, часть клиентов получит недействующее приглашение. На неподдерживаемом устройстве обычный сайт остаётся рабочим входом к услуге.

Программа испытания вместо списка моделей

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

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

Установка оправдана повторяющейся пользой

Решение можно выразить без технического спора. Если клиент регулярно возвращается к кабинету и сохранённым покупкам, отдельный вход стоит испытать на устройствах его аудитории.

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

Короткая запись для принятия решения

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

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