如何为iOS Web应用程序创建“添加到主屏幕”说明页

Question

我有一个Web应用程序，可以通过精美的图标轻松添加到iOS设备的主屏幕。

但是，我注意到，在用户将其添加到主屏幕之前，从Safari浏览时，某些应用程序可以加载看起来完全独立的页面。

该“特殊”页面指导用户如何将其添加到主屏幕，并且当他们这样做时，它是另一个页面。

Notibly，http://darksky.net 使用要做到这一点，他们做出了实际应用之前。将工作流添加到主屏幕时，工作流应用程序会执行此操作。请参阅下面的屏幕截图。

我是不是对事情的理解不正确，还是有一种方法可以使从Safari浏览时加载不同的页面，而在将其添加到主屏幕时又加载另一页？

Answer 1

您可以使用一些 JavaScript检测站点访问者是否在 iOS 设备上，然后根据 cookie 显示或隐藏说明：

1. 检查设备是否正在运行 iOS：

   if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }
   

2. 检查当前视图是否已经在 webapp 中：

   if(window.navigator.standalone == true){ return false; }
   

3. 检查您是否已经为此用户创建了 cookie：

   if(document.cookie.search("alreadAsked") >= 0){ return false; }
   

4. 通过在您的页面上显示“添加到主屏幕”元素或重定向到另一个页面来提示用户：

   document.getElementById("hiddenPrompt").style.display = 'inherit';
   

5. 存储 cookie，这样您就不会在用户添加它后询问用户。您还可以在用户单击“完成”按钮后存储 cookie，以便用户收到提示，直到他们将其添加到主屏幕或单击“不再显示”按钮：

   document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
   

现在一起，这个函数将在页面加载时运行：

// On page load
(function() {
  // Check if iOS
  if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }

  // Check if already in webapp
  if(window.navigator.standalone == true){ return false; }

  // Check if you already asked them to add to homescreen
  if(document.cookie.search("alreadAsked") >= 0){ return false; }

  // Ask user to add to homescreen
  document.getElementById("hiddenPrompt").style.display = 'inherit';
});

// After clicking a button to dismiss prompt
function hidePromptInFuture(){
  // Do not show prompt again
  document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
}