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

Question

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

但是，我注意到，在用户将其添加到主屏幕之前，从 Safari 中查看时，某些应用程序可能会加载看似完全独立的页面。

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

值得注意的是，http://darksky.net使用在他们制作实际应用程序之前完成了这项工作。当您将工作流添加到主屏幕时，工作流应用程序会执行此操作。请参阅下面的屏幕截图。

我是否理解不正确，或者有没有办法在从 Safari 中查看时加载不同的页面，而在添加到主屏幕时加载另一个页面？

Answer 1

您可以使用some 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";
}