5 способов сделать мобильный фронтенд похожим на нативное приложение

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

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

Добавляем манифест

Web App Manifest — часть технологии Progressive Web Application (PWA).

PWA это веб-приложение, которые можно установить на устройство и запускать без интерфейса браузера в собственном окне. Хорошее PWA это классно. Мгновенная установка, доступ к нативным API, offline-first и так далее.

Чтобы сделать из сайта топовое offline-first PWA, нужно потратить не один спринт. Но для начала можно просто добавить в папку со статикой manifest.json, тогда при добавлении приложения на рабочий стол оно будет запускать отдельно от браузера! Далее можете докрутить остальные PWA-приколы, про это читайте здесь.

Подробнее о манифестах веб-приложений на MDN.

А здесь можно посмотреть на крохотный манифест Таймстрайпа.

Ставим прозрачный -webkit-tap-highlight-color

Свойство -webkit-tap-highlight-color определяет цвет полупрозрачных прямоугольников, которые появляются над интерактивными элементами UI во время нажатия.

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

body {
  -webkit-tap-highlight-color: transparent;
}

Фиксим стили ховеров

Обратите внимание на кнопку "Goal options"

На тачскринах нет ховера! Не знали? Про это писал здесь, почитайте: https://teletype.in/@og_mishgun/editor/the-right-hover

Выключаем pinch-to-zoom

Потому что нативные приложения не зумятся!

Ставим user-scalable: 0 в meta viewport. Пример из тэга head Таймстрайпа:

 <meta
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
 />

Убираем оверскролл в Сафари

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

На эту тему есть хорошая статья.

Бонус: react-easy-swipe use-gesture

Для Реакт-приложений есть супер-инструмент — библиотека react-easy-swipe. С помощью неё можно добавить в любой компонент поддержку свайпов.

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

Update: недавно появилась библиотека use-gesture, мне удалось попробовать её на одном из проектов и хочу сказать что она гораздо удобнее и функциональнее react-easy-swipe. В документации есть красивые примеры, в том числе с использованием react-spring. Пока что эти две либы дали мне лучший DX в сложных интерфейсных анимациях.

Ещё по теме

***

Понравилась статья? Подпишитесь на мой канал, там я пишу про фронтенд, крипту и лайфстайл.

А ещё подпишитесь на Таймстрайп в Инстаграме.