Содержание
Web App Manifest (Манифест ) — это специальный файл (Web App Manifest с дополнительными полями для JS API), который сообщает браузерам, какие файлы следует сохранять, а какие следует заменять другим содержимым. В манифесте описывается информация, необходимая для работы NativeCache.
Сегодня мы обсудим материал, в котором опишем решение, с помощью которого, мы можем угодить Яндексу и ускорить загрузку сайта в Яндекс браузере как на мобильном так и компьютерах.
Создайте манифест в формате JSON и опубликуйте в виде файла. Вы можете дополнить уже существующий Web App Manifest сайта необходимыми для JS API полями — в таком случае создавать отдельный манифест не обязательно.
head, абсолютную или относительную ссылку на созданный манифест. Это нужно, чтобы на устройстве пользователя сохранились необходимые ресурсы для работы приложения. Пример:
<head>
<link rel='manifest' href='/manifest.json' type="application/manifest+json">
</head>
{
"name": "Тестовое приложение",
"lang": "ru",
"icons": [
{
"src": "icons/icon.png",
"sizes": "576x576",
"type": "image/png"
}
],
"start_url": "https://yoursite.ru/turboapp/index.html",
"scope": "https://yoursite.ru/",
"yandex": {
"manifest_version": 1,
"app_version": "1.0.0",
"cache": {
"resources": [
"/static/css/index.css",
"/static/js/index.js",
"/static/images/icon.png",
...
],
"ignored_query_params": [
"param_1",
"param2"
]
}
}
}
name - Название сайта.lang - Основной язык.icons * - Иконки в формате PNG. Примеры иконок см. в Figma.src - Абсолютный или относительный путь к иконке. Если вы используете относительный путь, указывайте значение относительно расположения манифеста.sizes - Размер иконки. Допустимые размеры: 192 × 192 px и 512 × 512 px. Иконки других размеров будут созданы автоматически.type - MIME-тип иконки. Рекомендуемый тип — image/png.start_url * - Ссылка на главную страницу. Если значение некорректно, используется URL документа, в котором указан URL манифеста. Подробнее о start_url.scope * - Область навигаций внутри сайта (базовый адрес). При навигациях на страницы внутри этой области будет применяться Native Cache. Область навигаций должна быть задана на том же домене, на котором располагается страница сайта, содержащая в верстке <linkrel="manifest" href="...">. Подробнее о scope.yandex - Специальная секция Web App Manifest с дополнительными полями для JS API.manifest_version * - Версия формата манифеста (Integer). Текущая версия: 1.app_version * - Версия приложения (Int32). Можно использовать любой удобный формат версий.cache - Раздел манифеста, описывающий ресурсы для NativeCache.resources * - Массив ссылок на статические ресурсы сайта. Необходим для ускорения времени загрузки сайта и работы в офлайн-режиме.Ссылки могут вести как на ресурсы с этого сайта, так и на внешние ресурсы.
Пример содержимого моего файла:
{
"start_url": "/",
"name": "Статьи по Linux",
"short_name": "ABCLinux - Статьи по Linux",
"icons": [
{
"src": "/maskable_icon.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/android-icon-192x192-dunplab-manifest-48026.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#317EFB",
"background_color": "#317EFB",
"display": "standalone",
"lang": "ru",
"orientation": "any",
"description": "В данном блоге вы сможете прочесть интересные статьи по Ubuntu / linux, Обзоры по дистрибутивам, Инструкции по настройке системы, найдете Темы для дистрибутива и статьи про Оформление / Безопасность linux, Статьи про Игры и как установить приложения",
"categories": ["education"],
"scope": "/",
"yandex": {
"manifest_version": 1,
"app_version": "1.0.0",
"cache": {
"resources": [
"/css/style.css",
"/css/bootstrap.css",
"/css/font-awesome.min.css",
"/css/ajax.css",
"/.s/src/base.min.css",
"/.s/src/layer1.min.css",
"/.s/src/jquery-1.12.4.min.js",
"/.s/src/uwnd.min.js",
"/.s/src/ulightbox/ulightbox.min.css",
"/.s/src/ulightbox/ulightbox.min.js",
"/.s/src/social.css",
"/php/quicksearch/init.php?js",
"/rate/getRate2.js",
"/js/readtime.js",
"/js/later.js",
"/js/bootstrap.min.js",
"/.s/src/socCom.css",
"/.s/src/socCom.js",
"/js/scripts.js"
]
}
},
"screenshots": [
{
"src": "/screenshot.png",
"sizes": "1280x800",
"type": "image/png"
},
{
"src": "/screenshot1.png",
"sizes": "750x934",
"type": "image/png"
}
]
}
С примера выше мы наблюдаем, что нужно прописать:
Важно! У каждого сайта блок resources с ссылками на файлы скриптов и стилей отличается. Будьте внимательны и пропишите свои файлы которые у вас используются. Если не понимаете как это правильно сделать и какие файлы прописать, оставьте комментарий с ссылкой на сайт, посмотрим вместе как правильно составить манифест.
Важно! После как все настройки выполните и пропишите, сохраняем это содержимое в файл с названием manifest.json ( как видно с примера, файл должен быть в формате json это обязательно ).
После нужно загрузить наш файл в корень фтп ( файловый менеджер ) сайта, в блоке хеад во всех страницах шаблонах активных модулей прописать строку для подключения манифеста:
<link rel='manifest' href='/manifest.json' type="application/manifest+json">
вот и все, готово.
В глобальный блок нижняя часть сайта нужно установить такой скрипт:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function (reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function (error) {
console.error('Trouble with sw: ', error);
});
}
</script>
он нужен для корректной работы обработчика манифеста, в корень фтп загрузите скрипт:
вот и все, все готово.
Для проверки манифеста, корректно ли вы его составили и нет ли ошибок, можно использовать форму которая доступа по адресу: https://turboapps.yandex.ru/console/check-manifest . Если ошибок нет, вы увидите примерно следующее:
там же можно проверить корректность файла манифеста как по прямой ссылке так и готовому коду который вы составили:
Страница ( панель управления ) новым функционалом для ускорения ( и не только ) сайта: https://turboapps.yandex.ru/console/applications
Работу манифеста можно проверить в приложениях Яндекс и Яндекс.Браузер.
Пример тестирования моего манифеста на изображении немного выше.
Для генерации файла минифеста можно использовать онлайн сервисы:
Будут вопросы, пишите в комментариях.
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!
|
| |
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.
