[英]How do I create an “Add to Home Screen” instruction page for iOS web apps
I have a web app that can be easily added to the Home Screen of an iOS device, with a fancy icon. 我有一个Web应用程序,可以轻松添加到iOS设备的主屏幕,带有花哨的图标。
However, I've noticed that some applications can load what seems like a completely separate page when viewed from Safari before the user adds it to the Home Screen. 但是,我注意到,在用户将其添加到主屏幕之前,某些应用程序可以在从Safari查看时加载看似完全独立的页面。
This "special" page instructs the user on how to add it to the Home Screen, and when they do, it's a different page. 这个“特殊”页面指示用户如何将其添加到主屏幕,当他们这样做时,它是一个不同的页面。
Notibly, http://darksky.net used to do this before they made an actual app. 值得注意的是, http: //darksky.net 曾经在他们制作一个真正的应用程序之前这样做。 The Workflows app does this when you add a Workflow to your Home Screen. 当您将工作流添加到主屏幕时,Workflows应用程序会执行此操作。 See screen shot below. 见下面的屏幕截图。
Am I not understanding things correctly, or is there a way to have a different page load when viewed from Safari and another one when it's added to the Home Screen? 我是不是正确理解了什么,或者有没有办法在从Safari查看时有不同的页面加载,而另一个加载到主屏幕时?
You can detect if the site visitor is on an iOS device with some JavaScript then either show or hide the instructions based on a cookie: 您可以使用某些JavaScript检测网站访问者是否在iOS设备上,然后根据Cookie显示或隐藏说明:
Check if device is running iOS: 检查设备是否正在运行iOS:
if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }
Check if current view is already in webapp: 检查当前视图是否已在webapp中:
if(window.navigator.standalone == true){ return false; }
Check if you have created a cookie for this user already: 检查您是否已为此用户创建了Cookie:
if(document.cookie.search("alreadAsked") >= 0){ return false; }
Prompt user by displaying an "Add to Homescreen" element on your page or redirecting to another page: 通过在页面上显示“添加到主屏幕”元素或重定向到其他页面来提示用户:
document.getElementById("hiddenPrompt").style.display = 'inherit';
Store a cookie so you will not ask the user after they have added it. 存储cookie,这样您就不会在用户添加后询问用户。 You can also store the cookie after the user clicks a "done" button instead so the user will be prompted until they add it to the home screen or click a "do not show this again" button: 您也可以在用户单击“完成”按钮后存储cookie,这样用户将被提示,直到他们将其添加到主屏幕或单击“不再显示此按钮”按钮:
document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
All together now, this function will run on page load: 现在一起,这个函数将在页面加载时运行:
// 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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.