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

2019年7月28日 397次阅读

我有一个Web应用程序,可以轻松添加到iOS设备的主屏幕,带有花哨的图标.

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

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

值得注意的是,http://darksky.net在制作实际应用之前曾经这样做过.当您将工作流添加到主屏幕时,Workflows应用程序会执行此操作.见下面的屏幕截图.

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

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

最佳答案 您可以检测网站访问者是否在具有
some JavaScript的iOS设备上,然后根据cookie显示或隐藏说明：

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

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

>检查当前视图是否已在webapp中：

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

>检查您是否已为此用户创建了Cookie：

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

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

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

>存储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";
}
点赞