WebApp в iOS - это приложение, работающее внутри браузера, т.е. программа на html/css/javascript. Как его соорудить? Довольно-таки просто) Понадобится веб-сервер с возможностью менять заголовки(headers) страниц. - Для apache создаем в корневой директории сайта файл .htaccess
- Вбиваем в него правило для замены заголовков: AddType 'text/cache-manifest' .manifest
- Сохраняем.
Создаем страничку с нужным содержимым <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" manifest="cache.manifest"> <!-- основа магии webapp именно в manifest -->
<head>
<title>Название проекта</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- кодировка документа -->
<meta name="viewport" content="width = device-width,user-scalable = no" /><!-- width растягивает документ на весь экран, будь то альбомная или портретная ориентация, user-scalable отвечает за возможность изменять масштаб страницы пользователем-->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- включает fullscreen для режима webapp, больше информации об этом на девцентре аппла -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- ставим фон статусбара (тот, на котором инфо об операторе, уровень заряда) для полноэкранного режима -->
<link rel="apple-touch-icon" href="s/dv.png" /> <-- иконка для рабочего стола 47*47 для iPad, больше информации об этом на девцентре аппла -->
<link rel="apple-touch-startup-image" href="s/dv.jpg" /> <-- логотип при загрузке, больше информации об этом на девцентре аппла -->
<style>
header, nav, section, article, aside, footer {width:100%;display:block;} <!-- стиль для хтмл5-элементов, они по умолчанию инлайновые -->
article {clear:both;float:left;}
</style>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>
<body>
<header>
Офлайн-апп </header>
<nav>Меню 1 / Меню 2</nav>
<section>
<article class="a">
<img src="i/sm/1.jpg" alt="" /></a>
Ном: 123AD, Цена: 23, Примеч: discription 1 </article>
</section>
<footer>
<span id="refresh">Обновить страницу</span>
</footer>
<script>
function updateIndicator() {
alert("Online? "+navigator.onLine)
}
$(document).ready(function(){
$("nav").click(function(){
alert("Fullscreen? "+window.navigator.standalone);
})
$("#refresh").click(function(){
location.reload();
})
updateIndicator()
})
</script>
</body>
</html>
Создание cache.manifest подробнее тут
Создадим рядом с файлом .htacces файл cache.manifest Туда пишем правила кэширования: CACHE MANIFEST
js/jquery-1.4.4.min.js
i/1.jpg
Этим самым мы поручаем браузеру сохранить файлы jquery-1.4.4.min.js и 1.jpg в локальном хранилище. Все готово. Теперь зайдите на вашу страницу через Safari на iPad или другом iOS устройстве, нажмите "добавить на экран home". Должно появиться окошко с иконкой (из apple-touch-icon) и названием приложения. Если картинка подгрузилась, то страница сформирована верно, жмите ок. На домашний экран добавилась иконка Вашего приложения. Теперь Вы можете посмотреть сайт даже при отлюченном интернете
Очень хорошо описано все это на английском языке тут.
|