Може и да сте срещали тази функционалност, но може и да не сте. Целта на този кратък урок е да Ви въведете в стъпките, през който трябва да преминете за да добавите Add to Home screen (A2HS) във Вашият сайт. Add to Home screen е част от Progressive Web App (PWA) технологията.
Как да добавим функционалност Add to Home screen (Добави към началния екран)?
Manifest
Създайте файл site.webmanifest (ако няма) и го добавете в <head> по следния начин:
<link rel="manifest" href="site.webmanifest">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">За целта на това демо файла site.webmanifest трябва да съдържа:
{
"name": "My AppFlow",
"short_name": "My AppFlow",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"start_url": "/",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}service-worker.js
Създайте файл service-worker.js (ако няма) и го регистрирайте преди края на </body>.
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>Съдържание на файла service-worker.js
window.addEventListener("beforeinstallprompt", function(event){
});За да се покаже съобщението потребителя трябва да е бил в сайта поне 30 секунди. Ако потребителя затвори съобщението, то няма да се покаже отново през следващите 3 месеца.
