ios - 如何为 iOS 网络应用程序创建 "Add to Home Screen"说明页面

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. 检查当前 View 是否已经在 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";
}