Уведомление "Загрузите наше приложение" на мобильных устройствах
Может кто-нибудь объяснить мне, как работают эти уведомления? Я искал информацию об этом, но не повезло. Не знаю, правильно ли я это назвал. На некоторых страницах есть это всплывающее окно для загрузки мобильного приложения сайта. Он содержит кнопку закрытия X и кнопку "Скачать приложение". Для устройств iOS это всегда выглядит одинаково, поэтому я решил, что это не на заказ. Это приходит как-то из магазина приложений?
Вот изображение: http://oi60.tinypic.com/2dmhymc.jpg
2 ответа
Это называется "Smart App Banner" и может быть легко добавлено на ваш сайт с помощью дополнительного метатега:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
В атрибут содержимого можно включить три параметра, разделенных запятыми:
Требуется идентификатор приложения
Уникальный идентификатор вашего приложения. Чтобы найти идентификатор приложения в iTunes Link Maker, введите имя приложения в поле "Поиск" и выберите соответствующую страну и тип мультимедиа. В результатах найдите свое приложение и выберите ссылку на приложение для iPhone в столбце справа. Идентификатор вашего приложения - это девятизначное число между id и? Mt.
необязательные данные
Ваша аффилированная строка в iTunes, если вы являетесь партнером iTunes. Если нет, узнайте больше о том, как стать партнером iTunes, по адресу http://www.apple.com/itunes/affiliates/.
необязательный аргумент
URL-адрес, который предоставляет контекст для вашего собственного приложения. Если вы включите это, и у пользователя будет установлено ваше приложение, он сможет перейти с вашего веб-сайта на соответствующую позицию в вашем приложении iOS. Как правило, полезно сохранять навигационный контекст, потому что: если пользователь находится глубоко в навигационной иерархии вашего веб-сайта, вы можете передать весь URL-адрес документа, а затем проанализировать его в своем приложении, чтобы перенаправить его в правильное местоположение в вашем приложении. Если пользователь выполняет поиск на вашем веб-сайте, вы можете передать строку запроса, чтобы он мог беспрепятственно продолжить поиск в вашем приложении без необходимости повторного ввода своего запроса. Если пользователь находится в процессе создания контента, вы можете передать идентификатор сеанса, чтобы загрузить состояние веб-сеанса в ваше приложение, чтобы он мог без разрушения возобновить свою работу. Вы можете генерировать аргумент приложения каждой страницы динамически с помощью серверного скрипта. Вы можете отформатировать его по своему усмотрению, если это действительный URL.
Примечание. Баннеры Smart App нельзя отображать внутри рамки. Баннеры не будут появляться в iOS Simulator.
Вот стилизованный выпадающий баннер, который я разработал для обнаружения мобильных платформ.
HTML
<div id="note">
<p>It is recommended that you use landscape mode for a better experience (Turn your phone sideways).</p>
<a id="close">[Dismiss]</a>
Javascript
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
document.getElementById("note").style.visibility = "block";}
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
CSS
#note {
visibility: hidden;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: white;
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #000000;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;}
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }}
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;}
.cssanimations.csstransforms #close {
display: none;}