Решил задачу, рассказал об этом
Браузер Google Chrom позволяет установить на своем сайте всплывающее уведомление "Добавить приложение на главный экран" смартфона, в виде ссылки на любую страницу сайта. Сделать это очень просто, достаточно проделать несколько шагов.
{
"name": "Only Manifest",
"short_name:" only_manifest ",
"description": "фиктивное приложение к демонстрационному манифесту без SW",
"start_url": "/index.html",
"scope:". ",
"background_color": "#EEE",
"theme_color": "# 4A148C",
«дисплей»: «автономный»,
«ориентация»: «портретно-начальная»,
"dir:" ltr ",
"lang": "en-US",
"related_applications: [
{
«платформа»: «игра»,
"url": "https://play.google.com/.../app_name",
"id": "com.example.app"
}
],
"иконки": [
{
"src": "src / images / icons / app-icon-144x144.png",
"type": "image / png",
"размеры": "144х144"
},
,
, -> Другие похожие объекты изображения
,
]
}
Вот краткое объяснение каждого свойства.
short_name - отображается на главном экране под значком приложения в качестве имени приложения.
description - общее описание того, что делает веб-приложение.
start_url - URL-адрес, который загружается первым при запуске приложения, нажав значок приложения на главном экране. область действия - страницы, которые вы хотите включить в свой опыт работы с PWA, «.» означает все, где находится I (файл манифеста веб-приложения). Поэтому лучше поместить в корневой каталог вместе с index.html, если вы хотите включить полноценное веб-приложение.
background_color - цвет заставки.
theme_color - цвет строки состояния. display - указывает режим отображения. «Автономный» означает приложение, например, без адресной строки браузера. Другие опции: «полноэкранный», «автономный», «minimal-ui», «браузер». ориентация - указывает ориентацию экрана. «портретная первичная» означает строгий портретный режим и запрещает альбомный режим. Другие варианты: пейзаж, любой, портрет и т. Д.
dir - основное направление текста. «ltr» (по умолчанию) означает слева направо.
lang - основной язык приложения. 'EN-US' (по умолчанию).
related_applications - ссылка на родное приложение (приложение для Android). Пропустить, если родного приложения нет.
icons - массив объектов изображения, который содержит иконки разных размеров, которые вы хотите показать на главном экране. Рекомендуемые размеры: 48, 96, 144, 192, 256, 384, 512. Ваше устройство автоматически выберет лучший значок.
Тут все просто. Положите данный файл в корне сайта и подключите его перед закрывающим тегом header с помощью конструкции
Создайте в корне сайта файл service-worker.js со следующим содержимым
self.addEventListener ('fetch', function (event) {
});
Создайте в корне сайта файл service-worker.js со следующим содержимым
Перед закрывающим тегом body необходимо разместить следующий скрипт
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
Проверка. Теперь
