用于“添加到主屏幕”的 Javascript 在 iPhone 上？

Question

是否可以使用 Javascript 模拟 Mobile Safari 书签菜单中的“添加到主屏幕”选项？

类似于 IE 的 window.external.AddFavorite(location.href, document.title); 可能吗？

Answer 1

在 Safari 实现 Service Worker 并遵循 Chrome 和 Firefox 设置的方向之前，无法以编程方式将应用程序添加到主屏幕，或者让浏览器提示用户。

但是，有一个小型库可以提示用户执行以下操作：它甚至指向正确的位置。 工作是一种享受。

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

Answer 2

在 MobileSafari 中添加任何书签（包括主屏幕上的书签）的唯一方法是使用内置 UI，而 Apple 无论如何也不提供通过页面内的脚本执行此操作的方法。 事实上，我很确定在桌面版 Safari 上也没有执行此操作的机制。

Answer 3

到 2020 年，这在 Mobile Safari 上仍然无法实现。

下一个最佳解决方案是显示有关将网站添加为用户主屏幕快捷方式的说明。

// Check if the user has seen the message already
const hasSeenInstallPopup = localStorage.getItem("hasSeenInstallPopup");

// Detects if the device is on iOS 
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test( userAgent );
}

// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);

// Checks if app should display the install popup notification:
if (!hasSeenInstallPopup && isIos() && !isInStandaloneMode()) {
  showInstallMessage();
  localStorage.setItem("hasSeenInstallPopup", true);
}

Answer 4

有一个开源 Javascript 库提供了相关的东西：
mobile-bookmark-bubble

移动书签 Bubble 是一个 JavaScript 库，它会在移动 Web 应用程序的底部添加促销气泡，邀请用户将应用程序添加为书签到其设备的主屏幕。 该库使用 HTML5 本地存储来跟踪促销是否已显示，以避免不断烦扰用户。

该库的当前实现专门针对 Mobile Safari，即 iPhone 和 iPad 设备上使用的 Web 浏览器。

Answer 5

在 javascript 中，这是不可能的，但在“Web Clips”的帮助下，我们可以在 iPhone 中创建“添加到主屏幕”图标或快捷方式（通过 .mobileconfig 的代码文件）

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

http://appdistro.cttapp.com/webclip/< /a>

创建 mobileconfig 文件后，我们可以在 iphone safari 浏览器安装证书中传递此 url，完成后检查你的 iphone 主屏幕，有一个网页或 web 应用程序的快捷方式图标。

Answer 6

这也是另一个很好的主屏幕脚本，支持 iphone/ipad、Mobile Safari、Android、Blackberry 触摸智能手机和 Playbook。

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile -书签-气泡

Answer 7

TLDR：@Craig 在上面有一个更好的答案。

以下是我的原始答案，但我认为它不能充分回答问题。 今天我想说你必须尝试一个库来模拟这种效果，因为 WebViews (PWA) 不支持 A2HS。

@Kerrick我想删除我的答案，但不能，因为它已被接受。

老答案：

是的。 大多数现代浏览器都支持渐进式 Web 应用程序的“添加到主屏幕”（或 A2HS）功能。 引用 Mozilla Web Docs 文章：

“添加到主屏幕”功能可用于
现代浏览器允许用户“安装”网络应用程序，即。 添加一个
主屏幕的快捷方式。

另请参阅：caniuse.com 上的 A2HS 浏览器支持

Answer 8

似乎在移动/桌面 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，有一种替代方法。 您可以引导用户完成将应用程序添加到主屏幕的过程，类似于 add-to-homescreen repo：

我只是添加了一些代码：

    // 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

我希望它可以帮助别人。 祝你有美好的一天！