27.07.2023 в 12:52

Автоматический запрос «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 и встраивая такие важные функции, вы можете предоставить своим пользователям опыт работы с приложением, повышая вовлеченность и удержание.

Источник:

Selected Sort Option

#JavaScript

Войти на сайт