Как сделать веб-сайт приложением
Что же такое это волшебное PWA? Это набор современных спецификаций таких как сервис-воркеры, манифесты и другие функции веб-платформы. По сути это обычный сайт, но теперь вы можете добавить его иконку на экран смартфона или на рабочий стол, отправлять push уведомления, пользоваться как приложением даже без доступа к интернету и все это независимо от вашей операционной системы �� Рассмотрим как же сделать такую конфетку, но сначала немного подготовки.
Подготовка к внедрению PWA
Для внедрения PWA нужно иметь любой готовый веб-сайт с адаптивным дизайном, который задеплоен с использованием https протокола. Как пример я возьму самый простой сайт со списком дел, который я задеплоила с помощью Vercel.
Добавление манифеста
Первое, что нужно сделать — это добавить файл manifest.json и подключить его в ваш html файл. Это JSON файл, который содержит метадату про приложение (имя, иконку, описание и тд). Именно он предоставляет браузеру информацию, которая позволяет установить сайт как мобильное или десктопное приложение. Пример нашего manifest.json :
"lang": "en-us", "name": "Todo list", "short_name": "TodoList", "description": "App for making todo list", "start_url": "/", "background_color": "#FFF", "theme_color": "#FFF", "orientation": "any", "display": "standalone", "icons": [ "src": "icon.png", "sizes": "512x512" > ] > И подключить его в head в html файле:
link rel="manifest" href="manifest.json" /> Добавление сервис-воркеров
После добавления манифеста нам потребуется добавить сервис-воркеры . Это ключевая технология, которая используется для реализации PWA, можно сказать сердце прогрессивных веб-приложений. Это посредник между клиентом и сервером, пропускающий через себя все запросы к серверу. Именно сервис-воркеры обеспечивает возможность работы offline, с помощью разных стратегий кэширования. Базовые стратегии:
Я покажу пример стратегии Cache First , когда первым делом мы стучимся в кэш и если там есть нужные файлы, то берем их оттуда, если же нету, то уже отправляем запрос на их получение. Вот как sw.js будет выглядеть :
//определяем название кэша и файлы которые хотим кэшировать const APP_CACHE_NAME = 'app-cache-v1'; //определяем файлы для кэширования const ASSETS_URLS = [ 'index.html', '/scripts/script.js', '/scripts/index.js', '/css/style.css', ]; //добавляем событие при установке приложения self.addEventListener('install', (evt) => //ждем пока все файлы кэшируются evt.waitUntil(handleInstall()); >); const handleInstall = async () => const cache = await caches.open(APP_CACHE_NAME); //кэшируем контент при установке await cache.addAll(ASSETS_URLS); >; //добавляем событие на каждый запрос self.addEventListener('fetch', (evt) => evt.respondWith(handleRequest(event)); >); const handleRequest = async (evt) => const r = await caches.match(evt.request); //проверяем есть ли в кэше то что запрашивается if (r) return r; > //запрашиваем то что нам нужно, если этого нету в кэше const response = await fetch(evt.request); return response; >; Рассмотрим подробней этот файл :
- Определяем название кэша и файлы которые кэшируем. Название кэша — это ключ, по которому мы будем к нему доступаться. Сменив название, вы создадите новый кэш.
- Используем self вместо this , потому что он работает не только в window контексте, но и в worker контексте
- Далее добавляем обработчики событий. install при установке и fetch при запросах
- В install мы кэшируем контент
- В fetch описываем логику работы при запросе. В нашем случае применяем стратегию Cache First
Кэшировать можно данные, которые можно передавать по HTTP. Размер всех кэшируемых данных должен быть в пределах лимита для размеров кэша. В зависимости от браузера, при превышении этого лимита старый кэш либо будет удаляться, либо браузер запросит разрешение на увеличение лимита для размеров кэша. Вы можете кэшировать статические файлы, ответы на запросы и т. д., главное подобрать правильную стратегию кэширования. К примеру, если контент меняется очень редко или практически не меняется (статика), стоит использовать Cache Only , если нужно показывать обновленный контент, но допускается отображение старого (к примеру смена аватара пользователя) — подойдет стратегия Network First .
Главное отличие кэширования сервис-воркеров от браузерного, это то, что вы сами его контролируете. То есть, сервис-воркер проверяет, находится ли ресурс в его кэше, и решает возвращать ли сам ресурс, основываясь на стратегиях кэширования, которые вы сами запрограммировали.
Чтобы сервис-воркер заработал, нам нужно зарегистрировать его в нашем html файле:
script> // проверяем поддержку сервис-воркеров if ('serviceWorker' in navigator) // ожидаем полной загрузки страницы window.addEventListener('load', () => navigator.serviceWorker?.register('./sw.js'); >); > script> После регистрации сервис-воркеров, благодаря кэшированию файлов, приложение будет работать даже без подключения к интернету.
Можем также увидеть, что появилось предложение скачать приложение на десктопном и мобильном устройствах:
Как и любая технология, PWA имеет как преимущества, так и недостатки. Рассмотрим подробнее:
- Скорость работы приложения
- Низкая цена и время разработки
- Один код для всех платформ
- Занимает мало памяти
- Потребление батареи
- Ограниченная функциональность — PWA поддерживает только то что поддерживает HTML5. К примеру на данный момент PWA не имеет доступа к вашим мобильным контактам. Так как PWA разрабатывали в Google, многие функции IOS по сей день не доступны для прогрессивных приложений
Примеры известных PWA
Рассмотрим на примере нескольких компаний, которые сделали выбор в пользу прогрессивного веб приложения, каких целей они добились внедрив PWA ��
- Pinterest
- Тенденция к росту вовлеченности пользователей и дохода до 40%
- Время нахождения на сайте увеличилось до 30 %
- Количество новых пользователей увеличилось на 50%
- Страницы загружаются в среднем в 4 раза быстрее
- В 4 раза больше людей посетили страницы продаж BMW
- Увеличение посещаемости сайта на 49%
- На 43% больше сессий на пользователя
- В три раза увеличилась глубина прокрутки
- Увеличение числа пользователей в месяц до 130%
- Увеличение среднего количества часов прослушивания.
Большую роль достижении таких результатов сыграло увеличение скорости работы сайтов. Вот например сколько пользователи готовы ждать загрузки сайта:
Как видно, чем быстрее загружается и работает сайт, тем больше людей будут им пользоваться. Наличие отдельной иконки на экране смартфона упрощает доступ к приложению и увеличивает время пользования. Пользователю легче и удобней открыть его просто нажав на иконку, которую он видит каждый раз при пользовании смартфоном. Также постоянная коммуникация, например через push уведомления, помогает увеличивать уровень вовлеченности пользователей, так как всегда напоминает о приложении.
Инструменты для разработки PWA ��
Lighthouse — для проверки PWA. Его можно найти с помощью Dev Tools в Chrome. Это расширение подсказывает, что еще нужно, для того чтобы сайт стал PWA, и анализирует уже готовые прогрессивные приложения. Так вы сразу видите, что именно нужно добавить к вашему веб-сайту.
PWABuilder — предоставляет много крутых плюшек при разработке и использует современные технологии. У них даже есть расширение в VSCode. Но для работы с их стартовой сборкой нужно знание современных технологий (lit, web-component, Vite, Vaadin Router, TS).
Workbox — упрощает работу с сервер-воркерами и предоставляет многое из коробки. Также, множество библиотек и фреймворков при создании PWA темплейта используют именно его (React, Vue, Next)
Вывод
Как по мне PWA — это прорыв в мире веб разработки. Но на данном этапе эта технология только развивается и большой преградой к развитию становится компания Apple. Магазины приложений — это большой бизнес, с их продажи компании получают процент и конечно терять такой заработок они не хотят. Это видно по тому, насколько доступный функционал отличается для IOS и Android. Даже не смотря на это, существует несколько десятков удачных примеров PWA от крупных компаний. К тому же, разработка и поддержка PWА намного дешевле, чем, например, мобильных приложений, даже если разрабатывать кроссплатформенные приложения. В конце концов выбор всегда за вами, но обязательно попробуйте создать свое маленькое, а может и большое полноценное PWA ��
Полезные ссылки
Вдобавок хочу оставить некоторые интересные статьи на тему PWA ��
Добавьте манифест веб-приложения
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Франсуа Бофор
Пит ЛеПейдж
Томас Штайнер
Алексей РодионовМанифест веб-приложения — это файл JSON, который сообщает браузеру о вашем прогрессивном веб-приложении и о том, как оно должно вести себя при установке на настольный компьютер или мобильное устройство пользователя. Типичный файл манифеста включает, среди прочего, имя приложения, значки, которые приложение должно использовать, и URL-адрес, который должен открываться при запуске приложения.
Создайте файл манифеста
Файл манифеста может иметь любое имя, но обычно он называется manifest.json и обслуживается из корня (каталога верхнего уровня вашего веб-сайта). Спецификация предполагает, что расширение должно быть .webmanifest , но браузеры также поддерживают расширения .json , которые могут быть проще для понимания разработчиками.
Типичный манифест выглядит примерно так:
< "short_name": "Weather", "name": "Weather: Do I need an umbrella?", "icons": [ < "src": "/images/icons-vector.svg", "type": "image/svg+xml", "sizes": "512x512" >, < "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" >, < "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" >], "id": "/?source=pwa", "start_url": "/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/", "theme_color": "#3367D6", "shortcuts": [ < "name": "How's weather today?", "short_name": "Today", "description": "View weather information for today", "url": "/today?source=pwa", "icons": [< "src": "/images/today.png", "sizes": "192x192" >] >, < "name": "How's weather tomorrow?", "short_name": "Tomorrow", "description": "View weather information for tomorrow", "url": "/tomorrow?source=pwa", "icons": [< "src": "/images/tomorrow.png", "sizes": "192x192" >] > ], "description": "Weather forecast information", "screenshots": [ < "src": "/images/screenshot1.png", "type": "image/png", "sizes": "540x720", "form_factor": "narrow" >, < "src": "/images/screenshot2.jpg", "type": "image/jpg", "sizes": "720x540", "form_factor": "wide" >] >Ключевые свойства манифеста
short_name и/или name
Вы должны предоставить как минимум свойство short_name или name . Если указаны оба параметра, short_name используется на главном экране пользователя, в панели запуска или в других местах, где пространство может быть ограничено. name используется при установке приложения.
Примечание. В операционных системах обычно требуется заголовок для каждого окна приложения. Этот заголовок отображается в различных поверхностях переключения окон, таких как alt + tab , режим обзора и список окон на полке. Для PWA, работающих в автономном режиме, Chromium добавляет short_name (или, если оно недоступно, name ) к тому, что указано в HTML-документа, чтобы предотвратить маскировочные атаки, когда автономные приложения могут попытаться ошибиться, например , для диалогов операционной системы. Как следствие, разработчикам не следует повторять имя приложения в , когда приложение работает в автономном режиме.
icons
Когда пользователь устанавливает PWA, вы можете определить набор значков, которые браузер будет использовать на главном экране, средстве запуска приложений, переключателе задач, экране-заставке и т. д.
Свойство icons представляет собой массив объектов изображений. Каждый объект должен включать src , свойство sizes и type изображения. Чтобы использовать маскируемые значки , которые в Android иногда называют адаптивными значками, вам также необходимо добавить к свойству icon «purpose»: «any maskable» .
Для Chromium вы должны предоставить значок размером не менее 192×192 пикселей и значок размером 512×512 пикселей. Если указаны только эти два размера значков, Chrome автоматически масштабирует значки в соответствии с устройством. Если вы предпочитаете масштабировать свои собственные значки и настраивать их до пиксельного совершенства, предоставляйте значки с шагом 48 dp.
Примечание. Браузеры на основе Chromium также поддерживают значки SVG, которые можно произвольно масштабировать, не выглядя пикселизированными, и которые поддерживают расширенные функции, такие как чувствительность к prefers-color-scheme , с оговоркой, что значки не обновляются в реальном времени, а остаются в том состоянии, в котором они были. во время установки. Чтобы безопасно использовать значки SVG, всегда следует указывать растровый значок в качестве запасного варианта для браузеров, которые не поддерживают значки SVG.
id
Свойство id позволяет вам явно определить идентификатор, используемый для вашего приложения. Добавление свойства id в манифест устраняет зависимость от start_url или местоположения манифеста и позволяет их обновлять в будущем. Дополнительные сведения см. в разделе Уникальная идентификация PWA с помощью свойства идентификатора манифеста веб-приложения .
start_url
start_url является обязательным и сообщает браузеру, где ваше приложение должно запускаться при его запуске, и предотвращает запуск приложения на любой странице, на которой находился пользователь, когда он добавил ваше приложение на свой главный экран.
Ваш start_url должен направлять пользователя прямо на ваше приложение, а не на целевую страницу продукта. Подумайте, что пользователь захочет сделать, открыв ваше приложение, и разместите это там.
background_color
Свойство background_color используется на заставке при первом запуске приложения на мобильном устройстве.
display
Вы можете настроить, какой пользовательский интерфейс браузера будет отображаться при запуске вашего приложения. Например, вы можете скрыть адресную строку и элементы пользовательского интерфейса браузера. Игры даже можно сделать так, чтобы они запускались в полноэкранном режиме. Свойство display принимает одно из следующих значений:
Свойство Использовать fullscreen Открывает веб-приложение без пользовательского интерфейса браузера и занимает всю доступную область отображения. standalone Открывает веб-приложение, которое выглядит как автономное приложение. Приложение запускается в собственном окне, отдельном от браузера, и скрывает стандартные элементы пользовательского интерфейса браузера, такие как строка URL-адреса. 
minimal-ui Этот режим похож на standalone , но предоставляет пользователю минимальный набор элементов пользовательского интерфейса для управления навигацией (например, возврат назад и перезагрузка). 
browser Стандартный браузер. display_override
Веб-приложения могут выбирать, как они будут отображаться, задав режим display в своем манифесте, как описано выше . Браузеры не обязаны поддерживать все режимы отображения, но они обязаны поддерживать определенную спецификацией резервную цепочку ( «fullscreen» → «standalone» → «minimal-ui» → «browser» ). Если они не поддерживают данный режим, они возвращаются к следующему режиму отображения в цепочке. Такое негибкое поведение может быть проблематичным в редких случаях. Например, разработчик не может запросить «minimal-ui» без принудительного возврата в режим отображения «browser» , если «minimal-ui» не поддерживается. Другая проблема заключается в том, что текущее поведение делает невозможным введение новых режимов отображения с обратной совместимостью, поскольку такие исследования, как режим приложения с вкладками, не имеют естественного места в резервной цепочке.
Эти проблемы решает свойство display_override , которое браузер рассматривает перед свойством display . Его значение представляет собой последовательность строк, которые рассматриваются в указанном порядке, и применяется первый поддерживаемый режим отображения. Если ни один из них не поддерживается, браузер возвращается к оценке поля display .
Рассмотрим пример ниже. (Подробности о «window-control-overlay» выходят за рамки этой статьи.)
Как уже говорилось, браузер сначала проверит display_override .
- «window-control-overlay»
- «minimal-ui»
Если ни один из вариантов недоступен, происходит возврат к display . Если «standalone» недоступен, он возобновляет определенную спецификацией цепочку резервных копий с этой точки.
- «standalone»
- «minimal-ui»
- «browser»
scope
scope определяет набор URL-адресов, которые браузер считает принадлежащими вашему приложению, и используется для принятия решения о том, когда пользователь покинул приложение. scope управляет структурой URL-адресов, которая охватывает все точки входа и выхода в вашем веб-приложении. Ваш start_url должен находиться в scope .
Внимание: если пользователь щелкнет ссылку в вашем приложении, которая выходит за пределы scope , ссылка откроется и отобразится в существующем окне PWA. Если вы хотите, чтобы ссылка открывалась на вкладке браузера, необходимо добавить target=»_blank» к тегу . На Android ссылки с target=»_blank» открываются на пользовательской вкладке Chrome .
Еще несколько замечаний по scope :
- Если вы не включаете scope в свой манифест, то подразумеваемой scope по умолчанию является начальный URL-адрес, но с удаленным именем файла, запросом и фрагментом.
- Атрибут scope может быть относительным путем ( ../ ) или любым путем более высокого уровня ( / ), который позволит расширить охват навигации в вашем веб-приложении.
- start_url должен находиться в области видимости.
- start_url относится к пути, определенному в атрибуте scope .
- start_url , начинающийся с / всегда будет корнем источника.
theme_color
theme_color задает цвет панели инструментов и может быть отражен в предварительном просмотре приложения в переключателях задач. theme_color должен соответствовать цвету meta , указанному в заголовке вашего документа.
Начиная с Chromium 93 и Safari 15, вы можете настроить этот цвет в медиа-запросе с помощью атрибута media элемента цвета meta . Будет выбран первый подходящий. Например, вы можете использовать один цвет для светлого режима и другой для темного. На момент написания вы не можете определить их в своем манифесте. См. проблему w3c/manifest#975 на GitHub .
shortcuts
Свойство shortcuts — это массив объектов ярлыков приложения , цель которых — обеспечить быстрый доступ к ключевым задачам в вашем приложении. Каждый член представляет собой словарь, содержащий как минимум name и url .
description
Свойство description описывает цель вашего приложения.
screenshots
Свойство screenshots представляет собой массив объектов изображений, представляющих ваше приложение в распространенных сценариях использования. Каждый объект должен включать src , свойство sizes и type изображения. Свойство form_factor является необязательным. Вы можете установить значение «wide» для снимков экрана, применимых только к широким экранам, или «narrow» для узких снимков экрана.
В Chrome изображение должно отвечать определенным критериям:
- Ширина и высота должны быть не менее 320 пикселей и не более 3840 пикселей.
- Максимальный размер не может превышать минимальный размер более чем в 2,3 раза.
- Все скриншоты, соответствующие соответствующему форм-фактору, должны иметь одинаковое соотношение сторон.
- Начиная с Chrome 109, на рабочем столе отображаются только снимки экрана с form_factor , установленным на «wide» .
Chrome на рабочем столе отображает от одного до восьми снимков экрана, соответствующих приведенным выше критериям. Остальное будет проигнорировано.
Chrome на Android отображает от одного до пяти снимков экрана, соответствующих критериям, указанным выше. Остальное будет проигнорировано.
Добавьте манифест веб-приложения на свои страницы.
После создания манифеста добавьте тег на все страницы вашего Progressive Web App. Например:
Запрос манифеста выполняется без учетных данных (даже если он находится в том же домене), поэтому, если манифест требует учетные данные, вы должны включить crossorigin=»use-credentials» в тег манифеста.
Проверьте свой манифест
Чтобы убедиться, что ваш манифест настроен правильно, используйте панель «Манифест» на панели «Приложение» Chrome DevTools.
В Chrome максимальная длина описания ограничена 300 символами на всех платформах. Если описание длиннее, оно будет сокращено до знака многоточия. На Android существует дополнительный лимит — не более 7 строк.
Эта панель предоставляет удобочитаемую версию многих свойств вашего манифеста и позволяет легко проверить правильность загрузки всех изображений.
Заставки на мобильном телефоне
Когда ваше приложение впервые запускается на мобильном устройстве, может потребоваться некоторое время, чтобы браузер запустился и начал отображаться исходный контент. Вместо отображения белого экрана, который может показаться пользователю зависшим, браузер будет показывать заставку до первой отрисовки.
Chrome автоматически создает заставку из свойств манифеста, а именно:
background_color должен быть того же цвета, что и страница загрузки, чтобы обеспечить плавный переход от экрана-заставки к вашему приложению.
Chrome выберет значок, который точно соответствует разрешению устройства. В большинстве случаев достаточно значков размером 192 и 512 пикселей, но вы можете предоставить дополнительные значки для достижения пиксельного совершенства.
дальнейшее чтение
В манифест веб-приложения можно добавить несколько дополнительных свойств. Дополнительную информацию см. в документации по манифесту веб-приложения MDN .
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-10-26 UTC.
Делаем собственное Progressive Web App приложение для своего сайта. Manifest.json. Часть 3
В прошлой части мы определили, что требуется от сайта, чтобы создать pwa приложение. Теперь мы поговорим о файле-конфигураторе, в котором должны прописывать настройки приложения.
Шаг 2. Работа с manifest
Создайте файл manifest.json и подключите его в index-ом файле вашего сайта:
Рассмотрим пример содержимого этого файла. Черным мои комментарии — их нужно будет удалить, если вы хотите использовать код, как за пример:
«name»: «Good Day», //Полное название приложения
«short_name»: «GD», //Короткое название приложения
«lang»: «ru-RU», //Языковой тег (en-US)
«start_url»: «/», //Какую страницу открывать при клике на иконку в мобильном
«display»: «standalone», //Приложение будет выглядеть и ощущаться, как отдельное приложение.
«theme_color»: «#E6E6FA», //Определяет цвет темы по умолчанию для приложения
«background_color»: «#E6E6FA», //Заливка иконки
«icons»: [ //Иконки — обязательны 512/256/192/152/144/128/32
«src»: «/templates/new/icons/512.png»,
«sizes»: «512×512»,
«type»: «image/png»
>,
«src»: «/templates/new/icons/android-chrome-384×384.png»,
«sizes»: «384×384»,
«type»: «image/png»
>,
«src»: «/templates/new/icons/android-chrome-192×192.png»,
«sizes»: «192×192»,
«type»: «image/png»
>,
«src»: «/templates/new/icons/favicon-32×32.png»,
«sizes»: «32×32»,
«type»: «image/png»
>
]
>Также, есть и другие параметры, например:
«scope»: «https://site_demo.ru/mobile/» — если сайт находится не в корне, а например, в каталоге, то ставим путь каталога.
«description»: «Описание приложения»
После установки манифеста, нам нужно создать Service worker, который позволит кешировать сайт и дать ему возможность работать в автономном режиме.
Шаг 3: Service worker
Скачайте файлы sw.js, sw-toolbox.js и разместите их в корне вашего сайта. В файле sw-toolbox.js ничего править не нужно, а вот с sw.js придется повозиться. Откроем его код:
‘use strict’;
importScripts(‘/sw-toolbox.js’);
toolbox.precache([
‘/index.php’,
‘/templates/new/css/0jquery-ui.css’,
‘/templates/new/css/1bootstrap.css’,
‘/templates/new/css/2font-awesome.css’
]);
toolbox.router.get(‘/templates/new/images/*’, toolbox.cacheFirst);
toolbox.router.get(‘/*’, toolbox.networkFirst, < networkTimeoutSeconds: 5 >);В precache мы указываем все файлы, которые хотим кэшировать. Здесь же указываем страницы, которые должны быть доступны пользователю при отсутствии интернета. Если сайт динамический (например, здесь настройки для Joomla) — то ставим главный index сайта. Если же сайт на html без движка, то перечисляем путь к каждой странице.
На последок, мы рассмотрим работу готового pwa приложения!
Пишем правильный манифест для сайта
Думаю, многие знают о возможности добавления иконки сайта на рабочий стол мобильного устройства. Это удобно и причины могут быть разные (нету мобильного приложения, предоставляющего туже информацию, либо вы хотите сразу открыть определенную страницу сайта и т.д.). За некоторые свойства того, как будет отображаться сайт и как будет выглядеть иконка после добавления и отвечает файл манифеста.
Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другоеПодробнее
Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.
Сначала зафиксируем положение дел до добавления файла манифеста.
После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так
Тут, собственно, ничего особенного, кроме того, что мы можем убрать адресную строку, чтобы приложение было похоже на нативное.Встречайте, manifest.json!
С примером манифеста можно ознакомиться по этой ссылке . Кратко пройдемся по параметрам:
name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.Генерируй и властвуй.
Конечно, можно написать весь манифест ручками, но это скучно, долго и можно ошибиться. Уже нашлось немало умельцев, которые автоматизировали этот процесс. Ниже небольшой обзор инструментов для автоматической генерации манифеста.
brucelawson.github.io/manifest — все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.
www.favicon-generator.org — хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).
manifest-validator.appspot.com — этот инструмент предназначен для валидации вашего манифеста.
Результат
Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующие
Все. Смотрим, что получилось
Иконка:Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.
Загрузка приложения:
Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.
Сам сайт:
Тут тоже все стало лаконично. Без UI браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.
Я перечислил не все свойства, которые можно указать в файле манифеста. С полным списком можно ознакомиться здесь
Демо приложение
Репозиторий приложенияТакже необходимо подчеркнуть, что все это не будет работать на яблочных устройствах. На них можно достичь приблизительно такого результата, только надо использовать другой способ.