Как настроить кнопку «домой» в PWA?

Для настройки кнопки «домой» (home) в прогрессивных веб-приложениях (PWA) на JavaScript можно использовать Service Worker и определенные манифесты приложения.

Перед тем как начать, убедитесь, что ваше PWA приложение имеет уже установленный Service Worker, который отвечает за кэширование ресурсов и управление оффлайн-режимом.

В папке вашего приложения создайте файл manifest.json, который будет содержать метаданные о вашем приложении. Пример содержимого файла manifest.json:

{
  "name": "My PWA App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

В этом примере указаны основные настройки, такие как имя и краткое имя приложения, ссылка на стартовую страницу, отображаемый режим (standalone) и настройки иконки.

После этого нужно зарегистрировать манифест вашего приложения, добавив ссылку на manifest.json в HTML-файл вашей стартовой страницы:

<link rel="manifest" href="/path/to/manifest.json">

Далее, необходимо добавить код JavaScript для отображения кнопки «домой». Этот код должен быть включен в вашей Service Worker файле. Пример кода для отображения кнопки:

self.addEventListener('fetch', event => {
  if (event.request.url.match(/.*/)) {
    event.respondWith((async function() {
      const response = await fetch(event.request);

      if (!response || response.status !== 200 || response.type === 'opaque') {
        return response;
      }

      const responseClone = response.clone();
      caches.open('my-cache').then(function(cache) {
        cache.put(event.request, responseClone);
      });

      return response;
    })());
  }
});

self.addEventListener('install', event => {
  event.waitUntil((async function() {
    const cache = await caches.open('my-cache');
    const urlsToCache = [
      '/path/to/icon.png'
    ];
    cache.addAll(urlsToCache);
  })());
});

self.addEventListener('beforeinstallprompt', event => {
  event.preventDefault();
  const homeButton = document.createElement('button');
  homeButton.innerHTML = 'Add to Home Screen';
  homeButton.addEventListener('click', evt => {
    event.prompt();
    event.userChoice.then(choiceResult => {
      console.log(choiceResult.outcome);
      if (choiceResult.outcome === 'dismissed') {
        console.log('User cancelled installation');
      } else {
        console.log('User added to home screen');
      }
    });
  });
  document.appendChild(homeButton);
});

В этом примере используются события Service Worker: install, fetch, beforeinstallprompt. В событии install регистрируется кэш для сохранения ресурсов, которые могут быть использованы в офлайн-режиме. В событии fetch происходит сохранение интересующих ресурсов в кэш. В событии beforeinstallprompt создаётся и отображается кнопка «домой». При клике на эту кнопку вызывается запрос по установке PWA приложения. Можно также добавить логику обработки результатов этого запроса.

После внесения всех изменений вам нужно зарегистрировать ваш Service Worker. Для этого добавьте следующий код в HTML-файл вашей стартовой страницы:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/path/to/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.log('Service Worker registration failed:', error);
      });
  });
}

Замените '/path/to/service-worker.js' на путь к вашему Service Worker файлу.

После всех этих шагов ваша кнопка «домой» должна появиться на вашей стартовой странице PWA приложения, и при клике на неё пользователь должен увидеть предложение установить приложение на домашний экран своего устройства.