В заголовках сайта, в секции между тегами <head> и </head> должен присутствовать тег viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Если всё это уже имеется, осталось совсем немного, чтобы ваш сайт превратился в простое PWA приложение.
1. Создать файл Webmanifest
2. Создать файл Service Worker
3. Добавить код для поддержки PWA на страницы сайта.
4. Можно также добавить специальную кнопку для установки приложения (не обязательно)
Кстати, если у вас возникнут сложности по поводу первого и второго шага из инструкции, можете воспользоваться этим генератором кода для PWA, который поможет упростить первый и второй шаг.
1. Создание файла Webmanifest.
В текстовом редакторе (рекомендую использовать Notepad) создайте новый файл "mymanifest.webmanifest". В данном случае webmanifest, это не имя файла, а его расширение, поэтому написано после точки.Действующий пример такого файла: webmanifest (можете сохранить, переименовать и исправить значения).
В этот файл вставьте код следующего содержания.
{
"name": "UNILA.RU",
"short_name": "UNILA.RU",
"description": "UNILA.RU",
"icons": [
{"src":"/images/icons/512.png","sizes":"512x512","type":"image/png"},
{"src":"/images/icons/256.png","sizes":"256x256","type":"image/png"},
{"src":"/images/icons/128.png","sizes":"128x128","type":"image/png"}
],
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#333333"
}
"name": "UNILA.RU",
"short_name": "UNILA.RU",
"description": "UNILA.RU",
"icons": [
{"src":"/images/icons/512.png","sizes":"512x512","type":"image/png"},
{"src":"/images/icons/256.png","sizes":"256x256","type":"image/png"},
{"src":"/images/icons/128.png","sizes":"128x128","type":"image/png"}
],
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#333333"
}
Замените в коде содержимое согласно описанию ниже.
name - укажите название вашего приложения. Оно будет отображаться на экране во время запуска приложения.
short_name - короткое название вашего приложения. Оно будет отображаться на рабочем столе под иконкой приложения.
descriptrion - описание вашего приложения. При работе с приложением его обычно не видно.
Загрузите в любую папку своего сайта три изображения с иконкой (логотипом) вашего приложения, в трёх разных размерах:
512 пикселей на 512 пикселей,
256 x 256,
128 x 128.
В коде выше в секции icons замените ссылки на изображения на свои - укажите адреса ваших иконок на вашем сервере. Путь указывается в относительном формате без названия домена в начале.
Далее....
start_url - укажите страницу или раздел на вашем сайте, который должен открываться сразу после запуска приложения. Если это главная страница, то просто оставьте одинарный слеш: /
scope - область действия вашего приложения. Внутри указанной области ссылки внутри приложения открываются внутри этого приложения, за пределами указанной области действия, внутренние ссылки могут открываться в браузере. Можете указать специальный каталог (пример: "/catalog") или весь сайт. Если вы оставите одинарный слеш / то областью действия приложения будет считаться весь ваш сайт.
display - здесь можно указать режим отображения вашего сайта в приложении.
"display": "standalone" = на весь экран как в обычным приложениях для мобильных устройств.
"display": "browser" = как в обычном браузере, с адресной строкой и другими элементами браузера.
theme_color = основно цвет цветовой схемы (#ffffff = белый)
background_color = цвет фона на первом экране при запуске приложения #333333 (тёмно серый)
Цвет указывается в формате HEX, который состоит из символа # и шести символов после него.
Сохраните файл webmanifest и загрузите его в начальную, корневую папку своего сайта.
2. Создание Service Worker
Теперь создайте файл с именем serviceworker.js (здесь расширение файла .js).Действующий пример: Service Worker, можете сохранить, переименовать и изменить значения на свои.
Вставьте в этот файл следующий код
self.addEventListener('install', function(e) {e.waitUntil(caches.open('5f341b54b5b8d6f39fb39a4343d4f215').then(function(cache){return cache.addAll([
'/images/icons/128.png',
'/images/icons/256.png',
'/images/icons/512.png'
])}))})
self.addEventListener('fetch',function(e) {
e.respondWith(caches.match(e.request).then(function(response){return response || fetch(e.request)}))})
'/images/icons/128.png',
'/images/icons/256.png',
'/images/icons/512.png'
])}))})
self.addEventListener('fetch',function(e) {
e.respondWith(caches.match(e.request).then(function(response){return response || fetch(e.request)}))})
А теперь замените некоторые детали.
Вместо этого значения: 5f341b54b5b8d6f39fb39a4343d4f215 - вы можете вставить любой свой идентификатор для своего приложения, он должен состоять из букв латинского алфавита или цифр.
Далее идёт перечисление тех файлов, которые вы хотите закэшировать (сохранить) в приложении, чтобы они не загружались с вашего сервера каждый раз при запуске приложения. Это поможет сэкономить трафик и ускорить работу приложения.
Это могут быть какие то изображения, файлы стилей или файлы шрифтов или файлы в формате pdf. Также это могут быть сами страницы вашего сайта вместе с содержимым.
Следует хорошо подумать, прежде чем добавить какую то страницу в кэш приложения. Ведь даже после изменения страницы на сайте закэшированная страница в приложении может отображаться также как в момент кэширования.
Итак, перечислите основные файлы и страницы, которые вы точно хотите закэшировать. Каждый файл указывайте в одинарных кавычках и с новой строки, в конце каждой строки указывайте запятую, а в конце последней строки списка файлов указывать запятую не нужно.
Сохраните файл serviceworker.js и загрузите его в корневой каталог своего сайта.
3. Вызов установки PWA на страницах сайта.
Осталось совсем немного. Теперь нужно подключить созданные файлы и код вызова установки PWA страницы своего сайта.В исходном коде вашего сайта, в том файле, которые отвечает за формирование страницы, между тегами <head> и </head> добавьте несколько строк:
<link rel="manifest" href="/mymanifest.webmanifest" />
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
Теперь, если вы всё сделали правильно и ваш сайт соответствует минимальным требованиям для PWA, при посещении вашего сайта с мобильных устройств пользователи будут видеть приглашение установить ваш сайт на главный экран в качестве приложения.
Имейте ввиду, что такое предложение может появиться не сразу, в зависимости от браузера потребуется больше или меньше времени провести на сайте, прежде чем браузер покажет уведомление о возможности установить приложение.
4. Кнопка для установки приложения
При желании вы можете установить на сайт специальную кнопку, нажав на которую, пользователь сам запустит процесс установки вашего приложения, не дожидаясь пока браузер предложит.В этом случае вы можете не устанавливать на все страницы сайта код для автоматической установки приложения, а создать специальную страницу установки приложения и использовать нужный код только на этой странице.
Итак, чтобы создать кнопку для установки приложения, на любой странице своего сайта, между тегами <head> и <head> вставьте код, как указано выше:
<link rel="manifest" href="/mymanifest.webmanifest" />
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
<script>
if('serviceWorker' in navigator){navigator.serviceWorker.register('/serviceworker.js').then(function() { console.log('Service Worker!'); })}
</script>
В любом месте страницы вставьте ссылку - кнопку, нажав на которую пользователь сможет запустить установку приложения:
<a href="javascript:void(0);" id="appInstall">УСТАНОВИТЬ ПРИЛОЖЕНИЕ</a>
Также в любом месте страницы (лучше внизу перед тегом </body> вставьте код:
<script>
let installButton = document.getElementById('appInstall');
let prompt;
window.addEventListener('beforeinstallprompt', function(e){
e.preventDefault();
prompt = e;
});
installButton.addEventListener('click', function(){
prompt.prompt();
})
</script>
let installButton = document.getElementById('appInstall');
let prompt;
window.addEventListener('beforeinstallprompt', function(e){
e.preventDefault();
prompt = e;
});
installButton.addEventListener('click', function(){
prompt.prompt();
})
</script>
Теперь пользователям не нужно ждать, когда браузер предложит им установить ваше приложение, они могут сами начать процесс установки.
В качестве примера посмотрите на страницу для установки приложения этого сайта
Однако не все браузеры поддерживают эту возможность, в мобильном браузере Opera может не работать, в других популярных браузерах - должно работать.