Кнопка для добавления иконки веб страеицы на экран мобильного

[karen12]

Можно ли с помощью скрипта на сайте создать кнопку, при ножатии на которого иконка страницы появится на экране мобильного, как закладка?

 

[w3gret]

Можно сделать как PWA. Почитай в нете как сделать, там впринципе легко.
Создаешь manifest.json заполняешь, кидаешь его в хед с парой мета тегов. Скрипт на 15 строк, и готово. Когда пользователь нажмет на кнопку, то в телефоне появится иконка с сайтом

 

[s1mson]

Шаги для реализации "Add to Home Screen" с помощью PWA​

1. Создайте файл manifest.json — это файл, который описывает ваше приложение и позволяет браузеру распознать его как PWA:
   

   json
   
   {
   "name": "Ваше Приложение",
   "short_name": "Приложение",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
   "description": "Описание вашего приложения.",
   "icons": [
   {
   "src": "/path-to-icon/icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png"
   },
   {
   "src": "/path-to-icon/icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
   }
   ]
   }

2. Добавьте manifest.json на страницу:
   Включите manifest.json в ваш HTML-код следующим образом:
   

   html
   
   <link rel="manifest" href="/manifest.json">

3. Реализуйте Service Worker — еще одно требование для PWA. Service Worker может быть пустым, но он необходим, чтобы ваш сайт определялся как PWA.
   Создайте файл service-worker.js с базовой регистрацией:
   

   javascript
   
   self.addEventListener('fetch', function(event) {
   // Можно оставить пустым или добавить обработку кэша
   });

   
   Затем зарегистрируйте Service Worker в основном JavaScript вашего сайта:

4. javascript
   if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/service-worker.js')
   .then(function(registration) {
   console.log('Service Worker зарегистрирован с областью:', registration.scope);
   })
   .catch(function(error) {
   console.log('Регистрация Service Worker не удалась:', error);
   });
   }

5. Попросите пользователя добавить на домашний экран:
   Для браузеров на Android, вы можете отслеживать событие beforeinstallprompt, которое возникает, когда сайт удовлетворяет требованиям PWA. Это позволяет показать уведомление, предлагающее добавить сайт на домашний экран.
   

   javascript
   
   let deferredPrompt;
   
   window.addEventListener('beforeinstallprompt', (e) => {
   e.preventDefault();
   deferredPrompt = e;
   
   // Показываем кнопку добавления на домашний экран
   const addButton = document.getElementById('add-to-home-screen');
   addButton.style.display = 'block';
   
   addButton.addEventListener('click', (e) => {
   // Скрываем кнопку
   addButton.style.display = 'none';
   // Показать предложение добавить на главный экран
   deferredPrompt.prompt();
   
   deferredPrompt.userChoice.then((choiceResult) => {
   if (choiceResult.outcome === 'accepted') {
   console.log('Пользователь добавил на главный экран');
   } else {
   console.log('Пользователь отказался добавить на главный экран');
   }
   deferredPrompt = null;
   });
   });
   });