如何创建＆＃34;添加到主屏幕＆＃34; iOS网络应用程序的说明页面

Question

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

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

这＆＃34;特别＆＃34;页面指​​示用户如何将其添加到主屏幕，当他们这样做时，它是一个不同的页面。

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

我是不是正确理解了什么，或者是否有办法在从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";
}