Автоматический запрос «Add To home Screen» при загрузке страницы
Прогрессивные веб-приложения (PWA) продолжают революционизировать работу в Интернете, предоставляя нативные приложения прямо в браузере. Одной из определяющих особенностей PWA является возможность предлагать пользователям «Добавить на главный экран», что обеспечивает быстрый доступ к приложению. В этой статье мы покажем вам, как создать прогрессивное веб-приложение с автоматическим запросом «Добавить на главный экран» при загрузке страницы, аналогично тому, как популярные приложения, такие как Twitter, предлагают пользователям добавить свои облегченные версии.
Шаг 1: Создайте файл манифеста
Начните с создания файла manifest.json в корневом каталоге вашего веб-приложения. Этот файл содержит важные метаданные, определяющие поведение вашего PWA. Настройте следующий пример, чтобы он соответствовал особенностям вашего приложения:
{
"name": "Your App Name",
"short_name": "Short Name",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "https://via.placeholder.com/128x128?text=App+Icon",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "https://via.placeholder.com/192x192?text=App+Icon",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://via.placeholder.com/512x512?text=App+Icon",
"sizes": "512x512",
"type": "image/png"
}
]
}Замените «Your App Name» и «Short Name» на имя вашего приложения и краткое имя соответственно. Массив icons состоит из трех заполнителей для значков разных размеров.
Шаг 2. Внедрение Service Worker
Чтобы включить функции PWA, нам нужен Service Worker. Создайте новый файл с именем sw.js в корневом каталоге вашего приложения и используйте следующий код:
// Activate event: Clean up old caches
// Define the cache name
const cacheName = 'your-app-cache-v1';
// List of assets to cache
const assetsToCache = [
'/',
'/index.html',
'/path/to/your/css/styles.css',
'/path/to/your/js/script.js',
'https://via.placeholder.com/128x128?text=App+Icon',
'https://via.placeholder.com/192x192?text=App+Icon',
'https://via.placeholder.com/512x512?text=App+Icon',
// Add a wildcard to match all pages (*)
'/*'
];
// Install event: Cache the essential assets
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(assetsToCache))
.then(() => self.skipWaiting())
);
});
// Activate event: Clean up old caches
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys()
.then(cacheNames => {
return Promise.all(
cacheNames.filter(name => name !== cacheName)
.map(name => caches.delete(name))
);
})
.then(() => self.clients.claim())
);
});
// Fetch event: Serve assets from cache, and update cache if necessary
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
// Clone the request because it can only be consumed once
const fetchRequest = event.request.clone();
return fetch(fetchRequest)
.then(response => {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// Clone the response because it can only be consumed once
const responseToCache = response.clone();
caches.open(cacheName)
.then(cache => cache.put(event.request, responseToCache));
return response;
});
})
);
});Замените URL-адреса-заполнители фактическими URL-адресами ваших файлов CSS, JavaScript и URL-адресами значков в массиве assetsToCache. Этот сервисный работник будет кэшировать важные активы во время установки, очищать старые кэши во время активации и обслуживать кэшированные активы, когда они доступны, при необходимости обновляя кэш.
Шаг 3. Автоматическая подсказка «Add To Home screen» при загрузке страницы
В index.html добавьте следующий скрипт, чтобы автоматически отображать приглашение «Добавить на главный экран» при загрузке страницы:
<!DOCTYPE html>
<html>
<head>
<!-- ... (Other meta tags and links) ... -->
<link rel="manifest" href="manifest.json">
<!-- ... (Other styles) ... -->
</head>
<body>
<!-- ... (Your web app content) ... -->
<script>
// Check if the browser supports the beforeinstallprompt event
if ('serviceWorker' in navigator && 'BeforeInstallPromptEvent' in window) {
window.addEventListener('load', () => {
// Wait for the beforeinstallprompt event
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the default "Add to Home Screen" prompt
event.preventDefault();
// Automatically show the "Add to Home Screen" prompt on page load
event.prompt();
});
});
}
</script>
</body>
</html>С помощью этого скрипта приглашение «Add To Home screen» будет автоматически появляться при загрузке страницы для браузеров, поддерживающих событие beforeinstallprompt.
Шаг 4. Тестирование и развертывание
Тщательно протестируйте свое прогрессивное веб-приложение на различных устройствах и в разных браузерах, чтобы убедиться, что функция «Add To Home Screen» работает должным образом. Как только вы будете удовлетворены функциональностью, разверните обновленное PWA на своем действующем веб-сайте.
Заключение:
С автоматическим запросом «Добавить на главный экран» при загрузке страницы ваше прогрессивное веб-приложение предложит пользователям беспроблемный опыт, как и нативные приложения. Пользователям будет предложено добавить ваше приложение на свои домашние экраны без каких-либо дополнительных действий. Применяя PWA и встраивая такие важные функции, вы можете предоставить своим пользователям опыт работы с приложением, повышая вовлеченность и удержание.
