Блогът на Гонзо

Web Widgets – уеб приложения за инсталиране

От известно време се интересувам от възможностите да се създават приложения за мобилни устройства с помощта на отворени уеб стандарти. Разнообразието от платформи за мобилни устройства е доста по-богато отколкото за настолни системи, което прави създаването на приложения за всички тях доста трудоемко – видях например обява за работа, в която се търсеха програмисти за 5 различни платформи. За това си мисля, че вместо да се хвърля огромен ресурс за създаването на много приложения за различни платформи, в повечето случаи би било много по-добре да се направи едно уеб-приложение, което да работи на всички платформи.

За това след като разучих възможностите на някои JavaScript API-да и HTML5 Offline Storage, реших да пробвам дали ще се справя и с пакетирането на web widget.

W3C Widgets / Opera Widgets

Web widget всъщност представлява zip архив, който съдържа в себе си HTML, JavaScript, CSS и други компоненти на едно уеб-приложение. След като потребителят изтегли пакета на своето устройство, било то мобилен телефон или компютър, приложението се инсталира локално и при зареждане файловете се зареждат от файловата система, а не от мрежата. По този начин дори и да имате нужда от огромни библотеки и още 200k ваш JavaScript, това не е проблем за потребителя, защото той ще ги изтегли гарантирано само веднъж.

W3C Widgets е официалната спецификация и както повечето други спецификации на W3C се развива доста бавно. Това обаче не е пречка пред Vodafone и Opera, който в сътрудничество са създали имплементация на текущото състояние на описанието. Най-лесният начин да пробвате за какво става дума е да отворите Opera и да отидете на http://widgets.opera.com/. Opera отваря .wgt файловете и ви дава възможност да ги инсталирате локално на компютъра, като дори създава връзки за стартиране в менюто с програми. На мобилен телефон нещата стоят малко по-различно. Vodafone предлагат свой мениджър за S60 (предполагам преинсталиран на техните телефони), който включва в себе си runtime компонент от Opera. Освен това можете да инсталирате Opera Widget Manager – наличен е за всички платформи, за които е наличен и Opera Mobile. Така направих и аз – недостатък е, че мениджъра на Opera не слага икони за стартиране в общото меню с приложения, а трябва първо да стартирате мениджъра.

Това, което аз исках да направя, е всъщност доста просто приложение – специфичен хронометър, който да има обратен брояч от 5 минути до 0 и втори обикновен хронометър. Работата е там, че ветроходните регати имат особена стартова процедура, защото няма как яхтите да се подредят на стартовата линия и да чакат стартовия сигнал. Вместо това съдията на регатата подава зрителни и звукови сигнали 5 минути преди старта, 4 минути минути преди старта, 1 минута преди старта и сигнал за самия старт. През това време яхтите се въртят привидно хаотично зад стартовата линия и се стремят така да преценят своята и на съперниците си траектории, та да се окажат с максимална скорост преди стартовата линия и в най-изгодна позиция. За това на шкипера на яхтата му е необходимо да знае точно колко време остава до старта, и да измери за колко време изминава разстоянието от някаква изходна позиция до стартовата линия.

И така, набързо скалъпих един HTML файл със всичкия необходим JavaScript и CSS вътре в него. Няма нищо секси в кода на самия хронометър, важното беше просто да работи. По-интересно ми беше самото пакетиране на web widget-а и дали ще има особености в работата на скрипта.

След като имах „приложението“, дойде ред на пакетирането. Както споменах вече, всичко което трябваше да направя, беше да създам един XML файл с описанието на джаджата, да архивирам файловете и да променя разширението на WGT. Ето моя config.xml:

<?xml version='1.0' encoding='UTF-8'?>
<widget defaultmode="fullscreen" modes="application">
    <widgetname>Sailing Chronometer</widgetname>
    <description>
        Simple chronometer for measuring 
        the start time sequence of sailing races.
    </description>
    <network>public</network>
    <width>360</width>
    <height>480</height>
    <author>
    	<name>Milen Petrinski - Gonzo</name>
    	<link>http://greatgonzo.net</link>
    </author>
    <id>
    	<host>greatgonzo.net</host>
    	<name>sailingchronometer</name>
    </id>
    <icon>icon_128.png</icon>
    <icon>icon_64.png</icon>
    <icon>icon_32.png</icon>
    <icon>icon_16.png</icon>
</widget>

Няма да обясняван значението на всяко поле, ако имате съмнения, най-добре прегледайте документацията на сайта на Opera. Тук е мястото да спомена, че документацията на сайта на Opera всъщност се различава от тази на W3C. Opera развиват технологията с по-бързи темпове, като в последната версия на Opera Mobile за Android имат поддръжка и за някои WAC 2.0 Device APIs.

Освен това трябваше да направя и иконка за джаджата. За това използвах Icon Creator – приложение от Opera, чрез което лесно можете да се създават икони, като се комбинира изображение или някой от вградените символи, и фон със или без преливка и ефект на отблясък. За самата икона използвах изображение на хронометър, лицензирано под GPL. Освен размерите, препоръчани на сайта на Opera, направих и размери като за iPhone, защото нищо не пречи същия HTML файл да се зареди от уеб и да се сложи връзка на началния екран. За целта добавих и manifest файл, за да може файла да се кешира като HTML5 offline приложение. Пробвах го на Android, стана, приложението работи дори и без връзка към мрежата.

Symbian Web Runtime Widgets

Nokia са били така добри да предвидят в Symbian всичко необходимо за създаване на приложения само чрез стандартни уеб технологии. Но естествено са го направили по свой начин. Всъщност техните пакети се различават от тези на W3C / Opera по формата на XML файла и по това, че всички файлове трябва да са поставени в директория със същото име като самия пакет. А, и естествено разширението и mime-типът на файла е различен, нищо, че пак е обикновен zip архив.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" 
    "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>DisplayName</key>
		<string>SailingChronometer</string>
		<key>Identifier</key>
		<string>net.greatgonzo.sailingchronometer</string>
		<key>MainHTML</key>
		<string>index.html</string>
		<key>Version</key>
		<string>0.1</string>
		<key>AllowNetworkAccess</key>
		<false/>
		<key>MiniViewEnabled</key>
		<false/>
	</dict>
</plist>

Nokia са се погрижили разработчиците, ползващи HTML и JavaScript да разполагат съ същите възможности за достъп до системата както и разработчиците на „native“ приложения. За целта те предлагат Nokia Platform Services – набор от API-та за достъп до телефона от WRT widgets.

Но за момента аз нямах нужда да се задълбавам в тази материя, още повече, че ако едно приложение разчита на тези API-та, то става не по-малко native от приложение, написано на Qt.

За да си улесня живота с пакетирането на два различни формата, си написах прост скрипт, с който да автоматизирам малко процеса:

#!/bin/bash

# W3C Widget / Opera Widget
zip sailingchronometer.wgt config.xml index.html icon_*.png

# Nokia Web Runtime Widget
mkdir sailingchronometer
cp info.plist index.html icon.png sailingchronometer/
zip sailingchronometer.wgz sailingchronometer/*
rm -rf sailingchronometer

BlackBerry WebWorks

Съвсем случайно попаднах на страничка, показваща как да се пакетират приложения, използващи HTML, JavaScript и CSS за телефони BlackBerry. От RIM са използвали за основа W3C Widgets, като са разширили XML манифеста с допълнителни неща, които са сметнали за необходими. Това поне на пръв поглед изглежда доста добре, защото би трябвало да посволи едно и също приложение да работи и на телефон BlackBerry (почти) без изменеия. Дали наистина е така не мога още да кажа, защото нямам достъп до такова устройсто, за да тествам резултата.

RIM също като Nokia предлагат доста допълнителни API за достъп до всички ресурси на телефона, което прави възможно разработването на всякакви приложения само с HTML и JavaScript.

Ето и връзки към приложението и пакетите:

Етикети: , , , , , ,

Comments (0)

Leave a comment

XHTML: Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>