PWA：如何以编程方式触发：“添加到主屏幕”？在 iOS Safari 上

Posted 2023-02-16

【中文标题】PWA：如何以编程方式触发：“添加到主屏幕”？在 iOS Safari 上

【英文标题】：PWA: How to programmatically trigger : "Add to homescreen"? on iOS Safari

【发布时间】：2018-12-12 02:36:23

【问题描述】：

我最近发布了一个服务器渲染的渐进式 Web 应用程序，到目前为止一切正常。 但是，使用 chrome 的 android 会显示一个横幅来下载该应用程序，这很棒，但在 ios 上却没有。使用 Safari，用户需要点击几下才能进入“添加到主屏幕”功能，这很糟糕。

所以我来了，我对我的 PWA 很满意，但我真的很想自己告诉用户这个应用可以添加到主屏幕。

据我所知，我看到 https://marvelapp.com/ 这样做是为了将原型添加到主屏幕。

【问题讨论】：

没有什么愚蠢的问题 :) 是的，我搜索了很多关于 manifest.json 文件的文档，以使浏览器能够提示用户，但没有关于以编程方式从网站触发此操作。

@GuillaumeLeMière 我以前看过，我发现最好的是dockyard.com/blog/2017/09/27/…，但如果有原生提示，我也很感兴趣

好文章@m0meni！除了告诉用户根据您的知识进行哪些操作之外，还有其他解决方案吗？因为这正是我想避免的，哈哈。

@GuillaumeLeMière 据我所知，这就是为什么我也热切关注这个问题哈哈。我认为答案是它还没有在 safari 上本地实现，因为它只在一个版本之前获得了 PWA 支持，但我也想保持谨慎乐观，希望我错了。

@m0meni 顺便说一句，您刚刚在 csv 解析器上获得了一颗星 ;-)

【参考方案1】：

iOS - Safari 目前不支持 Web 应用安装横幅，如 Android - Chrome。

Android 中也有no way to programatically trigger 安装横幅，除了当您捕获 beforeInstallPromot 并使用它来显示横幅的情况。

在链接的答案中，您可以检查有关如何在应用横幅中显示以引导用户添加到主屏幕的替代选项。 Here 是相同的一些代码示例，它是特定于 iOS 的（查看 #PROTIP 3 下）。

【讨论】：

Apple 应用商店仅在 2017 年就创造了超过 26 亿美元的收入。为用户提供一种将应用程序添加到主屏幕的简单方法将减少其应用程序商店的收入。许多人认为这是他们故意延迟 PWA 支持，尤其是这个安装横幅。即使是对 iOS 的 Service Worker 支持也只是在几个月前才出现，而 Chrome 已经有很长时间了。即使在这个较晚的版本中，发行说明中也没有提到它。出于明显的原因轻描淡写！我可以看到作为开发人员的感受。

此外，由于他们的策展能力较低，因此他们会失去更多的控制权。尽管 PWA 真的应该是未来，但我明白他们为什么拖拖拉拉。

@Anand 我完全看到这个阴谋是真的。我讨厌为 iOS 开发。

苹果讨厌开发者。

虽然链接的 SO 答案通常与 PWA 相关，因此只允许记录指向 iOS 外部解决方案的链接，但这里的这个问题与 iOS-PWA 问题特别相关。因此，您的答案是仅链接的答案，一旦链接的网站离线，您的答案就会变得毫无用处。此答案中应包含解决问题的相关步骤。

【参考方案2】：

目前，Apple 无法让这种“添加到主屏幕”体验变得简单。

不过，对于 IO 用户，您可以向用户提供工具提示说明：

此处详细说明： https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

在部分：PROTIP 3：自己创建一个“添加到主屏幕”弹出窗口！

【参考方案3】：

请注意，Chrome（Android 上）是唯一自动提示用户安装 PWA 的浏览器。您应该手动处理 iOS 和其他 Android 浏览器。 Statistics 说（2021 年更新）排名前 3 位的移动浏览器是 Chrome、Safari 和三星互联网（

您可以使用此代码来帮助您提示：

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