Портирование приложений HTML5 в Windows 8* Store

Содержание

1. Введение
2. Алгоритм портирования приложений
3. Создание приложения HTML5 в Visual Studio 2012*
4. Необходимые файлы
5. Выбор возможностей устройства, необходимых для приложений HTML5
6. Структура каталогов и тестирование приложений HTML5 в Visual Studio 2012
7. Обнаруженные проблемы

Введение

Эта статья предназначена для начинающих разработчиков HTML5. В ней описывается процесс портирования приложений HTML5, входящих в состав среды разработки Intel(R) HTML5. Тем, кто никогда не работал с HTML5, можно для начала ознакомиться со следующими материалами: http://software.intel.com/en-us/html5.
Мы портировали следующие приложения HTML5 для Windows 8* Store:

• Counting Beads
• RPN Calculator
• Towers of Hanoi
• jQM Springboard Nav

На момент написания этой статьи приложение PhoneGap Build* не поддерживало размещение в Windows 8 Store.

Алгоритм портирования приложений

Портирование приложений HTML5 для Windows 8* Store несложно, если приложения уже были преобразованы для Internet Explorer* 10 (IE10). Впрочем, может потребоваться немало времени, чтобы добиться работоспособности приложения во всех браузерах. Мы реализуем следующие шаги:

1. Сначала нужно преобразовать приложение для IE10
   Проверьте, какие функции поддерживаются в IE10, открыв ссылку http://html5test.com/в IE10. Узнайте, какие проблемы могут возникнуть.
   Встреченные нами проблемы перечислены в разделе советов.
2. Создание пустого приложения JavaScript в Visual Studio 2012*
   Мы использовали Visual Studio 2012 Express Edition на компьютере с Windows 8. Подробные описания использованных средств см. в разделе Microsoft MSDN Get the tools (Windows Store apps).
3. Добавление файлов в пустой проект JavaScript
4. Выбор нужных функций устройства
5. Тестирование

Создание приложения HTML5 в Visual Studio 2012

Приложение HTML5 в Windows 8 может быть создано следующим образом:

1. Создайте новый проект JavaScript — BlankApp
   Будет создан проект JavaScript с пустым содержимым и множеством файлов по умолчанию.
2. Переименуйте default.html в index.html.
   Файл default.html — это начальная страница, создаваемая по умолчанию. Чтобы переименовать файл, щелкните его правой кнопкой мыши и выберите команду «Переименовать».
3. Установите файл index.html в качестве начальной страницы пакета.
   Дважды щелкните файл package.appxmanifest. Он будет открыт в редакторе манифеста. Измените значение свойства «Начальная страница» с default.html на index.hmtl:
   
4. Переименуйте папку images в win8-images и обновите следующие изображения образца приложения HTML5
   • logo.png
   • smalllogo.png
   • storelogo.png
   • splashscreen.png
5. Удалите ненужные файлы: default.css и default.js.
6. Скопируйте файлы из образца приложения HTML5 в корневую папку проекта.
7. Добавьте файлы из образца приложения HTML5.
   Это может занять некоторое время, поскольку для правильной упаковки приложения нужно добавить все папки и файлы.
8. Щелкните «Run on Local Machine» или «Run on Simulator».

При этом вам может пригодиться информация со следующей страницы MSDN: Create your first Windows Store app using JavaScript .

Необходимые файлы

При создании приложений Windows 8 Store следует соблюдать ряд требований. Полный контрольный список для отправки приложений находится на странице MSDN.

При разработке и тестировании требуются 4 файла с логотипом:

Если выбрать один из готовых типов проектов в Visual Studio 2012, нужные файлы изображений будут по умолчанию созданы с нужным размером.

Выбор возможностей устройства, необходимых для приложений HTML5

Функции устройств для приложений Windows 8 Store объявляются в файле манифеста package.appxmanifest. Этот файл создается по умолчанию в Visual Studio 2012. Функции устройств в приложениях Windows 8 Store отличаются от функций устройств в приложениях PhoneGap. Поэтому нужно аккуратно перенести их из файла config.xml приложения PhoneGap в файл package.appxmanifest.
На следующем рисунке показан список функций устройств в Visual Studio 2012.

Ниже перечислены все функции устройств, использованные в файле "config.xml"приложения PhoneGap's :

<!-- If you do not want any permissions to be added to your app, add the
    following tag to your config.xml; you will still have the INTERNET
    permission on your app, which PhoneGap requires. -->
<preference name="permissions" value="none"/>

<!-- to enable individual permissions use the following examples -->
<feature name="http://api.phonegap.com/1.0/battery"/>
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/contacts"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/notification"/>

Например, для приложения HTML5, записывающего и воспроизводящего звук, файл package.appxmanifest должен содержать следующие функции:

• Микрофон
• Библиотека музыки

Для файла config.xml приложения PhoneGap требуется только следующее:

• <feature name="http://api.phonegap.com/1.0/media"/>

Структура каталогов и тестирование приложений HTML5 в Visual Studio 2012

Добавление всех необходимых папок и файлов в проекты занимает немало времени. Поэтому для вашего удобства мы включили файлы проектов Visual Studio 2012* в образцы приложений HTML5, преобразованных для Windows 8 Store. Структура папок выглядит следующим образом:

Сборка приложения в Visual Studio 2012 для магазина Windows 8:

1. Скопируйте файлы проекта из win8-proj в корневую папку
2. Загрузите JSPPROJ-файл в Visual Studio 2012 и запустите его в среде разработки

Обнаруженные проблемы

1. При преобразовании приложений для IE10 большая часть обнаруженных проблем была связана с градиентом в каскадных таблицах стилей, например, при добавлении -ms-linear-gradient в следующем случае:
   

       background: -moz-linear-gradient(top,#7A987E 0%,#000000);
       background: -webkit-gradient(linear, left top, left bottom, from(#7A987E),to(#000000));
       background: -ms-linear-gradient(top, #7A987E, #000000);  /* IE10 */
   
   

2. 3. Следующая проблема относится к jQuery-1.8.x.js. При использовании обычного компонента jQuery со страницы "http://jquery.com/download/"появится следующая ошибка Visual Studio 2012:
   "HTML1701: Unable to add dynamic content". Сценарий попытался внедрить динамическое содержимое или элементы, которые ранее изменялись динамически, что может быть небезопасно. Например, использование свойства innerHTML или метода document.write для добавления элемента сценария вызовет это исключение. Используйте метод toStaticHTML для фильтрации динамического содержимого или явным образом создайте элементы и атрибуты таким методом как createElement. Дополнительные сведения см. по ссылке "http://go.microsoft.com/fwlink/?LinkID=247104".
   
   Мы столкнулись с этой проблемой в jqm-springboard-nav. Версию jQuery для приложений Windows 8 Store можно загрузить по адресу "https://github.com/appendto/jquery-win8". В приложении jqm-springboard-nav мы использовали следующий код:
   

   <script>
       function includeJavaScript( url ){
           var tag = document.createElement( 'script' );
           tag.type = "text/javascript";
           tag.src = url;
   
           // Insert it to the <head>
           document.getElementsByTagName("head")[0].appendChild( tag );
       }
       </script>
   
       <!-- note: use jquery-1.8.0.min.js & jquery.mobile-1.1.1.min.js for production -->
       <script>
   	if (deviceCheck.windows8) {
   	    includeJavaScript("vendor/jquery/jquery-1.8.2-win8-1.0.js");
   	}
   	else {
   	    includeJavaScript("vendor/jquery/jquery-1.8.0.js");
   	}
       setTimeout(function(){
       	includeJavaScript("vendor/jquery.mobile/jquery.mobile-1.1.1.js");
   		includeJavaScript("app/springboard.js");
           }, 100);
       </script>
   
   

Но при преобразовании приложения HTML5 Counting Beads возникли более серьезные проблемы, поскольку это приложение изначально работает только в Chrome. Подробные сведения о преобразовании образца приложения Counting Beads приведены в этой статье.