Отныне я не буду больше создавать нативные приложения. Все мои приложения в дальнейшем будут прогрессивными веб-приложениями (PWA, Progressive Web Apps). Это такие приложения, которые предназначены для еще более органичной работы на мобильных устройствах, чем нативные приложения.
Что я имею ввиду под «более органичной работой»? Большая часть веб-траффика исходит от мобильных устройств и пользователи устанавливают в среднем от 0 до 3 новых приложений в месяц. Это означает, что люди не тратят много времени на поиск новых приложений в App store, но они проводят много времени в сети, где могут найти и использовать ваше приложение.
Прогрессивные веб-приложения начинают свою работу как любое другое веб-приложение, но когда пользователь возвращается в приложение и показывает (фактом использования), что он заинтересован в более регулярном обращении к приложению, браузеры предложат пользователю установить приложение на свой домашний экран. PWA также могут использовать push-уведомления как и нативные приложения.
И тут-то начинается интересная часть. Как и любое нативное приложение, прогрессивное веб-приложение будет обладать собственной иконкой для домашнего экрана и когда вы нажимаете на нее приложение запускается без оболочки браузера Chrome. Это означает отсутствие адресной строки и кнопок навигации. Только обычная строка состояния телефона и ваше приложение во всем своем почти полноэкранном великолепии.
К этому уже давно шло. Ни одна из технологий не является особо новой, за примечательным исключением развивающегося кросс-платформенного стандарта.
Немного истории
На заре iPhone не существовало app store. Стив Джобс хотел, чтобы разработчики создавали приложения для iPhone, используя стандартные веб-технологии.
Иногда мечтатели правы, но они на 10 лет опережают свое время. Оглядываясь назад на 2 года, рекомендация Стива Джобса о создании веб-приложений для iPhone была названа журналом Forbes его “крупнейшей ошибкой”, поскольку нативные приложения приобрели сокрушительный успех.
Сегодня, оглядываясь назад, кажется очевидным, что он действительно что-то нащупал, но только далеко впереди возможностей существующий веб-стандартов того времени.
Сейчас десятилетие спустя, мобильные веб-стандарты поддерживают многие функции, которые были нужны разработчикам нативных приложений и первоначальное видение мобильных веб-приложений Стива Джобса теперь воспринимается серьезно всем миром. Практически с самого начала Apple поддерживал “apple-mobile-web-capable” веб-приложения, которые вы можете добавить себе на домашний экран, используя мета тэги, которые помогают устройствам iOS находить такие вещи как подходящие иконки.
Другие производители последовали примеру, каждый создавал свою собственную коллекцию мета тэгов для объявления возможностей мобильных веб-приложений. Но недавно была введена кросс-платформеная спецификация и теперь кросс-платформенные мобильные веб-приложения наконец-то становятся реальностью.
Приложения, выполняющие стандарт называются прогрессивными веб-приложениями, не путать с такими сбивающими с толку, похожими терминами как прогрессивное усовершенствование или отзывчивые приложения.
Что такое прогрессивные веб-приложения
Прогрессивные веб-приложения являются веб-приложениями, разработанными и адаптированными под мобильные устройства. Если браузер отмечает, что пользователь хочет продолжить использование приложения, то он может предложить ему установить приложение на свой домашний экран. Но для того чтобы он это сделал, приложения должны удовлетворять специфическим критериям:
- Должны быть HTTPS (смотри let's encrypt)
- Валидный манифест с обязательными свойствами ( Web Manifest Validator)
- Должны иметь service worker
- start_url прописанный в манифесте, должен всегда загружаться даже в offline (используя service worker)
- Должны предоставлятьсвою собственную навигацию
- Должны быть отзывчивыми к разным размерам экрана и ориентациям
Конечно, использование HTTPS и service worker для оффлайн пользователей является сегодня рекомендуемой нормой для любого современного приложения.
Что забывают многие создатели приложений так это то, что если вы делаете прогрессивное веб-приложение, то вы должны иметь возможность управлять приложением без браузерной оболочки и навигационных жестов. Мобильные устройства полагают, что вы встроили собственную навигацию в приложение.
Например, если у вас есть страница, то эта страница должна иметь обратную ссылку на пользовательский интерфейс приложения, или пользователям придется закрывать и повторно открывать приложение, чтобы вернуться обратно к главному экрану.
Прогрессивные приложения — инструкция
В сети существует множество информации о создании прогрессивных веб-приложений, но по большей части она устаревшая, а многие источники содержат только фрагменты того, что вам нужно чтобы создать приложение. Давайте исправим это.
Включить HTTPS
Чтобы включить HTTPS вам понадобится:
- Веб-сервер (я рекомендую DigitalOcean)
- SSL сертификат
- Сильная группа Diffie-Hellman (
sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048) - TLS/SSL конфигурация для вашего веб-сервера (инструкции для Nginx на Ubuntu)
Манифест
Файл манифеста называется manifest.json и он достаточно простой. Он состоит из имени (short_name для иконки домашнего экрана и опционального name для более полного названия), начального url, большого списка иконок чтобы вы могли поддерживать широкий спектр если для разных платформ нужны разные размеры иконки. Для Android и iOS вам понадобится:
- 36*36
- 48*48
- 60*60 (значок Apple touch на iPhone)
- 72*72
- 76*76 (значок Apple touch на iPad)
- 96*96
- 120*120 (значок Apple touch на iPhone retina)
- 152*152 (значок Apple touch на iPad retina)
- 180*180 (значок Apple touch для iOS 8+ )
- 192*192
- 512*512
Я выделил значки Apple touch потому что у них известные имена:
apple-touch-icon-180x180.png
Где 180*180 может быть заменено на любое нужное разрешение. Использование известных имен не обязательно, но если вы забудете включить тэги, iOS все-равно сможет найти иконки, ища их в корневой директории вашего веб-приложения, если вы будете использовать известные имена.
Иконки iOS не поддерживают прозрачность.
Простой manifest.json:
{
"name": "My Progressive Web Application",
"short_name": "Progressive",
"start_url": "/?home=true",
"icons": [
{
"src": "/icons/icon36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/icons/icon48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/icons/icon60.png",
"sizes": "60x60",
"type": "image/png"
},
{
"src": "/icons/icon72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icons/icon76.png",
"sizes": "76x76",
"type": "image/png"
},
{
"src": "/icons/icon96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/icons/icon120.png",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "/icons/icon152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/icons/icon180.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/icons/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#000000",
"background_color": "#FFFFFF",
"display": "fullscreen",
"orientation": "portrait"
}
Существуют некоторые функции, о которых вам следует знать. theme_color устанавливает цвет статусной строки, а заголовок окна используется при переключении между приложениями на Android.
background_color устанавливает цвет заставки. На Android заставка будет состоять из свойства name (длинное имя) и большой иконки поверх background_color.
Манифест есть не везде
Когда с создал первое прогрессивное веб-приложение, я был потрясен тем, что оно работало как и предполагалось в Chrome на Android, но не в Safari /iOS. Причина в том, что мобильный Safari, несмотря на десятилетнюю поддержку этих функций, используя свои специфичные тэги не поддерживает до сих пор спецификацию веб-манифеста.
Поэтому в дополнение к файлу манифеста для поддерживаемых браузеров вам также понадобятся специальные мета тэги для iOS, начиная с этого, который будет запускать приложение без оболочки браузера:
Существует множество тэгов, о которых надо помнить, хотя есть и другой способ. Есть web manifest polyfill, который прочтет ваш manifest.json файл и добавит тэги производителей для более старых мобильных браузеров, iOS и даже для Windows phone и Firefox OS.
Перевод: Ольга Чернопицкая
Продолжение следует
Поддержка публикации — компания Edison, которая разрабатывает автоматическую систему сборки прошивки для сетевой техники, а так же делает перевод ПО на русский для транснациональной промышленной корпорации.
Автор: Edison
