Javascript для "Добавить на главный экран" на iPhone?

Question

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

Нечто похожее на IE window.external.AddFavorite(location.href, document.title); возможно?

Answer 1

Единственный способ добавить любые закладки в MobileSafari (в том числе на домашнем экране) - с помощью встроенного пользовательского интерфейса, и Apple не предоставляет никаких возможностей сделать это с помощью скриптов на странице. На самом деле, я уверен, что в настольной версии Safari нет механизма для этого.

Answer 2

Пока Safari не реализует Service Worker и не следует указаниям, заданным Chrome и Firefox, невозможно добавить приложение программно на домашний экран или заставить браузер запрашивать пользователя.

Тем не менее, есть небольшая библиотека, которая предлагает пользователю сделать это и даже указывает на правильное место. Работает угощение.

https://github.com/cubiq/add-to-homescreen

Answer 3

Еще один скрипт, который вызывает всплывающее окно "Добавить на главный экран": http://cubiq.org/add-to-home-screen

Answer 4

Существует библиотека Javascript с открытым исходным кодом, которая предлагает что-то связанное: http://code.google.com/p/mobile-bookmark-bubble/

Mobile Bookmark Bubble - это библиотека JavaScript, которая добавляет рекламный пузырь внизу вашего мобильного веб-приложения, предлагая пользователям добавить приложение в закладки на домашний экран своего устройства. Библиотека использует локальное хранилище HTML5 для отслеживания того, была ли реклама уже отображена, чтобы постоянно не раздражать пользователей.

Текущая реализация этой библиотеки специально нацелена на Mobile Safari, веб-браузер, используемый на устройствах iPhone и iPad.

Answer 5

В 2020 году это по-прежнему невозможно в Mobile Safari.

Следующее лучшее решение - показать инструкции по добавлению вашей страницы на главный экран.

Изображение взято из этой замечательной статьи, которая охватывает множество других советов о том, как сделать ваш PWA родным для iOS.

Answer 6

В javascript это невозможно, но с помощью "Веб-подборок" мы можем создать значок "Добавить на домашний экран" или ярлык на iPhone(с помощью файла кода.mobileconfig).

https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html

http://appdistro.cttapp.com/webclip/

после создания файла mobileconfig мы можем передать этот URL-адрес в сертификат установки браузера iphone safari, а после этого проверить домашний экран iphone, появится ярлык веб-страницы или веб-приложения.

Answer 7

Это также еще один хороший скрипт для домашнего экрана, который поддерживает iphone/ipad, Mobile Safari, Android, смартфоны Blackberry Touch и Playbook.

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble

Answer 8

Да. Большинство современных браузеров поддерживают функцию «Добавить на главный экран» (или A2HS) для прогрессивных веб-приложений. Чтобы процитировать статью Mozilla Web Docs :

Добавить на главный экран — это функция, доступная в современных браузерах, которая позволяет пользователю «установить» веб-приложение, т.е. добавить ярлык на главный экран.

См. также: Поддержка браузера A2HS на сайте caniuse.com.

Answer 9

Кажется, что это все еще невозможно в Mobile/Desktop Safari...

Запрос на установку можно вызвать с помощью события beforeinstallprompt . Эта функция не поддерживается в iOS. Во-первых, обеспечение возможности установки PWA .

      // Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});


buttonInstall.addEventListener('click', async () => {
  if (!deferredPrompt) {
    return;
  }

  // Show the install prompt
  deferredPrompt.prompt();

  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;

  // We've used the prompt, and can't use it again, throw it away
  deferredPrompt = null;
});

Пример контекста приложения React:

      const AddToHomeScreen = () => {
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  const handleBeforeInstallPrompt = useCallback((e) => {
    // Prevent the mini-infobar from appearing on mobile
    e.preventDefault()

    // Store the event for later use
    setDeferredPrompt(e)
  }, [])

  const handleAddToHomeScreenClick = async () => {
    if (deferredPrompt) {
      // Show the install prompt
      deferredPrompt.prompt()

      const choiceResult = await deferredPrompt.userChoice
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt")
      } else {
        console.log("User dismissed the install prompt")
      }

      setDeferredPrompt(null)
    } else {
      console.log("Install prompt is not available")
    }
  }

  useEffect(() => {
    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)

    return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
    }
  }, [handleBeforeInstallPrompt])

  return (
      <button onClick={handleAddToHomeScreenClick}>
        Add to Home Screen
      </button>
  )
}

export default AddToHomeScreen

Для iOS есть альтернативный подход. Вы можете провести пользователя через процесс добавления приложения на главный экран, аналогично тому, как это делается в репозитории добавления на главный экран :

Я просто добавляю несколько кодов:

          // Detects if device is on iOS 
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)

 else if (isIOS) {
      // Here we could notify the user to guide them in order to add the app to Home Screen.
      // You can update your UI to render a notification, popin, alert...
      console.log(
        "To add this web app to your Home Screen, open this app in Safari/Chrome and tap the Share button, then select 'Add to Home Screen'."
      )
    } 

      import { useEffect, useState, useCallback } from "react"

const AddToHomeScreen = () => {
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  const handleBeforeInstallPrompt = useCallback((e) => {
    // Prevent the mini-infobar from appearing on mobile
    e.preventDefault()

    // Store the event for later use
    setDeferredPrompt(e)
  }, [])

  const handleAddToHomeScreenClick = async () => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)

    if (deferredPrompt) {
      // Show the install prompt
      deferredPrompt.prompt()

      // Wait for the user to respond to the prompt
      const choiceResult = await deferredPrompt.userChoice
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt")
      } else {
        console.log("User dismissed the install prompt")
      }
      setDeferredPrompt(null)
    } else if (isIOS) {
      // Here we could notify the user to guide them in order to add the app to Home Screen.
      // You can update your UI to render a notification, popin, alert...
      console.log(
        "To add this web app to your Home Screen, open this app in Safari and tap the Share button, then select 'Add to Home Screen'."
      )
    } else {
      console.log("Install prompt is not available")
    }
  }

  useEffect(() => {
    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)

    return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
    }
  }, [handleBeforeInstallPrompt])

  return (
      <button onClick={handleAddToHomeScreenClick}>
        Add to Home Screen
      </button>
  )
}

export default AddToHomeScreen

Я надеюсь, что это может помочь кому-то. Хорошего дня!