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

另一個觸發“添加到主屏幕”彈出窗口的腳本： http ： //cubiq.org/add-to-home-screen

Answer 4

有一個開源的 Javascript 庫提供了一些相關的東西： mobile-bookmark-bubble

Mobile Bookmark Bubble 是一個 JavaScript 庫，它在您的移動 Web 應用程序底部添加一個促銷氣泡，邀請用戶將應用程序添加到他們設備的主屏幕上。 該庫使用 HTML5 本地存儲來跟蹤促銷是否已經顯示，以避免不斷嘮叨用戶。

該庫的當前實現專門針對 iPhone 和 iPad 設備上使用的 Web 瀏覽器 Mobile Safari。

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/

創建 mobileconfig 文件后，我們可以在 iphone safari 瀏覽器安裝證書中傳遞此 url，完成后檢查您的 iphone 主屏幕是否有您的網頁或 web 應用程序的快捷方式圖標..

Answer 6

在 2020 年，這在 Mobile Safari 上仍然是不可能的。

下一個最佳解決方案是顯示有關將頁面添加到主屏幕的步驟的說明。

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

// Detects if 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 should display install popup notification:
if (!hasSeenInstallPopup && isIos() && !isInStandaloneMode()) {
  showInstallMessage();
  localStorage.setItem("hasSeenInstallPopup", true);
}

圖片和代碼片段來自這篇很棒的文章，它涵蓋了這個問題和許多其他關於如何讓你的 PWA 感覺像是 iOS 原生的技巧。

Answer 7

這也是另一個很好的主屏幕腳本，支持 iphone/ipad、Mobile Safari、Android、Blackberry touch 智能手機和 Playbook。

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

Answer 8

是的。 大多數現代瀏覽器支持漸進式 Web 應用程序的添加到主屏幕（或 A2HS）功能。 引用Mozilla Web 文檔文章：

添加到主屏幕是現代瀏覽器中提供的一項功能，它允許用戶“安裝” web 應用程序，即。 將快捷方式添加到他們的主屏幕。

另請參閱： caniuse.com 上的 A2HS 瀏覽器支持