我有一个Web应用程序,可以轻松添加到iOS设备的主屏幕,带有花哨的图标.
但是,我注意到,在用户将其添加到主屏幕之前,某些应用程序可以在从Safari查看时加载看似完全独立的页面.
这个“特殊”页面指示用户如何将其添加到主屏幕,当他们这样做时,它是一个不同的页面.
值得注意的是,http://darksky.net在制作实际应用之前曾经这样做过.当您将工作流添加到主屏幕时,Workflows应用程序会执行此操作.见下面的屏幕截图.
我是不是正确理解了什么,或者有没有办法在从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"; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。