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

Ще одна копія хабора

Головне меню

Навігація за записами

Думаю, багато хто знає про можливість додавання іконки сайту на робочий стіл мобільного пристрою. Це зручно і причини можуть бути різні (немає мобільного додатка, що надає тугішу інформацію, або ви хочете відразу відкрити певну сторінку сайту і т.д.). За деякі властивості того, як відображатиметься сайт і як виглядатиме іконка після додавання та відповідає файл маніфесту.

Щоб показати, як manifest впливає на відображення сайту, я створив простий, тестовий веб-додаток, який повертає назву регіону за кодом.

Зустрічайте manifest.json!

Генеруй і володарюй.

Звичайно, можна написати весь маніфест ручками, але це нудно, довго і можна помилитись. Вже знайшлося чимало умільців, які автоматизували цей процес. Нижче невеликий огляд інструментів автоматичної генерації маніфесту.

brucelawson.github.io/manifest - все, що вам потрібно - заповнити поля (є короткий опис кожного параметра, так що процес досить легкий), інше за вас зробить генератор.

www.favicon-generator.org – хоч пряме призначення цього сайту генерувати іконки, а не маніфест. Він все ж таки його створює і на відміну від попереднього у вас вже будуть і іконки (для iOS і Аднроїд) і маніфест. Щоправда, маніфест доведеться підправити (змінити ім'я та інше налаштування).

manifest-validator.appspot.com – цей інструмент призначений для валідації вашого маніфесту.

Тож іконки намалювали, маніфест зробили. Далі треба повідомити браузер про маніфест, додавши в тег head наступні

Всі. Дивимося, що вийшло Іконка:

savepearlharbor
Зліва до. Праворуч після (іконка вийшла невразлива, із задоволенням поміняю,якщо надішлете краще). Тут вже помітно, що Android використовував ім'я з поля short_name, тому що name не міститься, мабуть.

Завантаження програми:

правильний
Тут найприємніші зміни. По-перше, замість білого екрану ви бачите подібність splash screen, який сам створюється системою з іконки, повного імені та кольору, вказаного в маніфесті (можливо, це відбувається тільки на Android 5.0 вище). По-друге, цей splash screen плавно зникає, що візуально красиво.

Сам сайт:

сайту
Тут теж все стало лаконічно. Без UI браузера сайт виглядає набагато краще і більше схожий на нативний додаток.

Я перерахував не всі властивості, які можна вказати у файлі маніфесту. З повним списком можна ознайомитися тут Демо програма Репозиторій програми

Також необхідно наголосити, що все це не буде працювати на яблучних пристроях. Там можна досягти приблизно такого результату, тільки треба використовувати інший спосіб.