PWA：如何以編程方式觸發：“添加到主屏幕”？ 在 iOS Safari

Question

我最近發布了一個服務器渲染的漸進式 web 應用程序，到目前為止一切正常。 然而，使用 chrome 的 Android 顯示了一個下載應用程序的橫幅，這很棒，但它不在 iOS 上。 使用 Safari，用戶需要點擊幾下才能進入“添加到主屏幕”功能，這很糟糕。

所以我在這里，我對我的 PWA 很滿意，但我真的很想能夠自己告訴用戶這個應用程序可以添加到主屏幕。

據我記得，我看到https://marvelapp.com/這樣做是為了在主屏幕上添加一個原型。

Answer 1

iOS - Safari 目前不支持 Web 應用安裝橫幅，就像在 Android - Chrome 中一樣。

也無法在 Android 中以編程方式觸發安裝橫幅，除非您捕獲 beforeInstallPromot 並使用它來顯示橫幅。

在鏈接的答案中，您可以檢查有關如何在應用程序橫幅中顯示以引導用戶添加到主屏幕的替代選項。 下面是一些相同的代碼示例，這是特定於 iOS 的（查看 #PROTIP 3）。

Answer 2

目前，Apple 無法讓這種“添加到主屏幕”體驗變得簡單。

不過，對於 IO 用戶，您可以向用戶提供工具提示說明：

詳細說明在這里： https : //www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

在部分： 技巧 3：自己創建一個“添加到主屏幕”彈出窗口！

Answer 3

請注意，Chrome（在 Android 上）是唯一自動提示用戶安裝 PWA 的瀏覽器。 您應該手動處理 iOS 和其他 Android 瀏覽器。 統計數據顯示（2021 年更新）排名前 3 的移動瀏覽器是 Chrome、Safari 和三星互聯網（<6%）。

您可以使用此代碼來幫助您提示：

// helps you detect mobile browsers (to show a relevant message as the process of installing your PWA changes from browser to browser)
var isMobile = {
  Android: function () {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function () {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function () {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Samsung: function () {
    return navigator.userAgent.match(
      /SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i,
    );
  },
  Windows: function () {
    return (
      navigator.userAgent.match(/IEMobile/i) ||
      navigator.userAgent.match(/WPDesktop/i)
    );
  },
  any: function () {
    return (
      isMobile.Android() ||
      isMobile.BlackBerry() ||
      isMobile.iOS() ||
      isMobile.Opera() ||
      isMobile.Windows()
    );
  },
};

// use this to check if the user is already using your PWA - no need to prompt if in standalone
function isStandalone(): boolean {
  const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
  if (document.referrer.startsWith("android-app://")) {
    return true; // Trusted web app
  } else if ("standalone" in navigator || isStandalone) {
    return true;
  }
  return false;
}

至於安裝說明：

Chrome - auto
Safari - Press "Share" icon then "Add to home"
Samsung internet - An "Install" icon will be shown on the top bar (I didn't quite understand if the app should be registered in Samsung Store for it to show) OR press "Menu" on the bottom bar then "Add/install to home"
Other browsers - Press menu on the bottom/top bar then "Add/install to home"

Answer 4

這是可以完成的方法