Продължете към съдържанието
Начало » Блог » Add to Home screen

Add to Home screen

Add to Home screen

Може и да сте срещали тази функционалност, но може и да не сте. Целта на този кратък урок е да Ви въведете в стъпките, през който трябва да преминете за да добавите 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 месеца.