ios iPhone：如果未安装应用程序，则重定向到移动 Safari 上的应用程序商店
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5679918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone: redirect to app store on mobile safari if app is not installed
提问by randombits
I have two links on an optimized mobile Safari web site. One is a link to the App Store to download my application. The other is a Launch App button which uses the registered app:// protocol to open the application. The problem is that mobile Safari chokes when the user clicks the Launch App button if the application is not installed. Is it possible to detect if the registered protocol is available, and if it isn't, change the Launch App button with an appropriate URL, such as the download app URL, so that the user doesn't get a nasty popup?
我在优化的移动 Safari 网站上有两个链接。一个是指向 App Store 的链接，用于下载我的应用程序。另一个是 Launch App 按钮，它使用注册的 app:// 协议打开应用程序。问题在于，如果应用程序未安装，当用户单击“启动应用程序”按钮时，移动 Safari 会卡住。是否可以检测注册的协议是否可用，如果不可用，请使用适当的 URL（例如下载应用程序 URL）更改 Launch App 按钮，以便用户不会看到讨厌的弹出窗口？
采纳答案by Tommy
This is broadly similar to this question; the most relevant suggestions there are to have a single button that attempts to launch the app, simultaneously creating a timer that'll fire if the app isn't installed on the grounds that if it were then Safari would have exited before the timer fires.
这与这个问题大致相似；最相关的建议是有一个尝试启动应用程序的单个按钮，同时创建一个计时器，如果未安装应用程序，该计时器将触发，因为如果安装了，则 Safari 将在计时器触发之前退出。
回答by q0rban
If you add an iframeon your web page with the srcset to custom scheme for your App, iOS will automatically redirect to that location in the App. If the app is not installed, nothing will happen. This allows you to deep link into the App if it is installed, or redirect to the App Store if it is not installed.
如果您iframe在网页上src为应用添加自定义方案，iOS 将自动重定向到应用中的该位置。如果未安装该应用程序，则不会发生任何事情。如果已安装，这允许您深入链接到应用程序，或者如果未安装，则重定向到 App Store。
For example, if you have the twitter app installed, and navigate to a webpage containing the following markup, you would be immediately directed to the app. If you did not have the Twitter app installed, you would see the text "The Twitter App is not installed."
例如，如果您安装了 twitter 应用程序，并导航到包含以下标记的网页，您将立即被定向到该应用程序。如果您没有安装 Twitter 应用程序，您将看到文本“未安装 Twitter 应用程序”。
<!DOCTYPE html>
<html>
<head>
<title>iOS Automatic Deep Linking</title>
</head>
<body>
<iframe src="twitter://" width="0" height="0"></iframe>
<p>The Twitter App is not installed</p>
</body>
</html>
This means that you could have a single button that directs to a web page with markup similar to this:
这意味着您可以有一个按钮指向带有类似于以下标记的网页：
<!DOCTYPE html>
<html>
<head>
<title>iOS Automatic Deep Linking</title>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
<script>
(function ($, MobileEsp) {
// On document ready, redirect to the App on the App store.
$(function () {
if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
// Add an iframe to twitter://, and then an iframe for the app store
// link. If the first fails to redirect to the Twitter app, the
// second will redirect to the app on the App Store. We use jQuery
// to add this after the document is fully loaded, so if the user
// comes back to the browser, they see the content they expect.
$('body').append('<iframe class="twitter-detect" src="twitter://" />')
.append('<iframe class="twitter-detect" src="itms-apps://itunes.com/apps/twitter" />');
}
});
})(jQuery, MobileEsp);
</script>
<style type="text/css">
.twitter-detect {
display: none;
}
</style>
</head>
<body>
<p>Website content.</p>
</body>
</html>
回答by amit_saxena
Below is a code snippet that works, but is not perfect. You still see the safari popup, but everything else works as expected:
下面是一个有效的代码片段，但并不完美。您仍然会看到 safari 弹出窗口，但其他一切都按预期工作：
<script type="text/javascript">
var timer;
var heartbeat;
var lastInterval;
function clearTimers() {
clearTimeout(timer);
clearTimeout(heartbeat);
}
window.addEventListener("pageshow", function(evt){
clearTimers();
}, false);
window.addEventListener("pagehide", function(evt){
clearTimers();
}, false);
function getTime() {
return (new Date()).getTime();
}
// For all other browsers except Safari (which do not support pageshow and pagehide properly)
function intervalHeartbeat() {
var now = getTime();
var diff = now - lastInterval - 200;
lastInterval = now;
if(diff > 1000) { // don't trigger on small stutters less than 1000ms
clearTimers();
}
}
function launch_app_or_alt_url(el) {
lastInterval = getTime();
heartbeat = setInterval(intervalHeartbeat, 200);
document.location = 'myapp://customurl';
timer = setTimeout(function () {
document.location = 'http://alternate.url.com';
}, 2000);
}
$(".source_url").click(function(event) {
launch_app_or_alt_url($(this));
event.preventDefault();
});
</script>
I have blogged about the details here: http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world
我在这里写了关于细节的博客：http: //aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world
