 |
|
   |
|
|
 |
Jack's Hack for the month of April, 2003: Optimizing Image Delivery in the Openwave Mobile Browser This month we'll take a look at how to use a MIME Multipart message to optimise the delivery of images to the Openwave Mobile Browser. If an application uses a large number of images, performance can be degraded if each image needs to be fetched individually. Fortunately, the Openwave Mobile Browser supports MIME Multipart content, and every image that a page, or even an entire application, can be delivered in a singe HTTP Response. While the over all size of the content delivered remains the same, there is a significant savings in terms of network overhead. We'll use Perl to build a mulipart response containing both XHTML and GIF images. This is a slight twist on a topic that we've visited before in the technote 'How to send a Mulitpart Message to an XHMTL Browser'. In that past note we looked at how to replicate the WML feature of a deck. This time we're going to update a library which shipped with the Openwave SDK 4.1 called Digest.pm. The Digest library provided convenience methods to allow developers to construct multiparts with HDML, WML, BMP and WBMP content. We've trimmed down the library, and narrowed the focus to XHTML content and Images. You can download an updated version of the Digest library for XHTML here. The library relies on the MIME module from Perl, so if you don't have it installed on your system already, you may need to visit http://www.cpan.org to get it (If you installed Perl 5.0.x or higher fromActiveState, the MIME library automatically comes with). The digest library itself is very straight forward, consisting of only 2 methods, addHTML and addImage. The addHTML method takes only 2 arguements: an optional URI to use as
the content location, and a string that contains the XHTML code. When
called, the addHTML method will prepend the DTD to the XHTML code, you do
not need to include it manualy. In the sample above, $HTML represents a string containing a complete XHTML page (without a DTD). Please see the code listing for more details The addIMAGE method works on the same pricniple as the addHTML method,
but requires that you specify the MIME type of the image you are adding,
and also accepts an additional arguement of TTL. If a TTL value is
specified, it will be used in setting a cache-control header with a
"max-age" value equal to your TTL. If you do not set a TTL in the images,
they will remain in the cache of the device for upto 30 days.
In the example above, we are adding a content type of image/gif, and setting its location as "/images/cut.gif".When we wish to reference this image in our XHTML code, this is the URI we will specify. We are setting the max-age on this image as 1300 seconds, and we have loaded the gif image into the string $cut. Once this multipart has been loaded into the device, the images can be used by other XHTML pages by simply refering to their URL in the src attribute of the image tag. To see this sample code at work, please enter http://demo.phone.com/samples/all.cgi into the Openwave SDK 6.2. Please note that this code will not render properly on browsers other than the Openwave Mobile Browser (including Internet Explorer and Netscape) |