Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 01:56, 13 May 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

An Introduction to Nokia Asha web apps

From Wiki
Jump to: navigation, search
Article Metadata
Tested withCompatibility
Platform(s): Series 40
Device(s): Must have Nokia OVI Browser
Keywords: Introduction
Created: somnathbanik (22 Jun 2015)
Last edited: hamishwillee (13 May 2013)



This article provides a comprehensive introduction to Nokia Asha Web Apps.

According to W3C widget specification, Widgets are client-side applications that are authored using Web standards, but whose content can also be embedded into Web documents. Series 40 web apps are based on the W3C Widget specification. Nokia has a set of tools for Series 40 web apps development and are targeted to be run on Series 40 mobile phones.

Tools Required

  • For development and simulation of Nokia Asha Web Apps download and install Nokia Web Tools.
  • To deploy Nokia Asha Web Apps on device download Bluetooth Launcher and install it on device. Follow this article to run Series 40 web apps on device.
  • Device supported Series 40 web apps.

Nokia Asha Web Apps and Web Page

Though Nokia Asha Web Apps are developed maintaining web standards but Nokia Asha Web Apps are not the same as web pages. It behaves like a standalone application. The look and feel is customized according to the mobile device. More specifically we can say that Nokia Asha Web Apps follows Symbian WRT Widget standards with some major difference. Although Symbian WRT Widget and Nokia Asha Web Apps both supports HTML, JavaScript and CSS, but the main difference is that Nokia Asha Web Apps has its own set the JavaScript Library (MWL) and needs Nokia Browser for Series 40 to run on the device.

  • Nokia Browser for Series 40 : Most of the Nokia Asha devices doesn’t have enough CPU/RAM to run a full web browser, so it introduce a lighter-weight client side browser called the Nokia Browser for Series 40 Client. User can browser and run the web app from the Web App Server through the Nokia Browser for Series 40 Client.

Below figure shows how the Nokia Browser for Series 40 proxy hosts the web app client and acts as a proxy between Nokia Browser for Series 40 Client and Web App Server.

Nokia Browser for Series 40

For more information see Nokia Asha Web Apps Best Practices Guide

  • Mobile Web Library (MWL) : Regular JavaScript are executed by the Nokia Browser for Series 40 Proxy Sever. But there is a special kind of library called Mobile Web Library which execute fully on Nokia Browser for Series 40 Client and is used via a namespace called mwl. MWL supports simple CSS transitions/animations, handling gestures (swipe, long press) . For more information see Nokia Asha Web Apps Developers Guide and API Reference

Nokia Asha Web Apps Project Description

In this section we will create a basic project and will explain each file in the project.

Step 1 : Creating a New Project

  • Open -> File -> New -> Series 40 Web App (wgt)
  • Select Basic web app project from the Series 40 web apps template and then click Next
  • Give a name to project in the Project Name section and then click Next. Here the project name used is MyWebApp
  • In the Empty project settings dialog change the information according to you and then click Finish. In this case we leave it as it is. You will see the MyWebApp project is created in the Project Explorer.
  • Click on the + sign to the left of the project to expand it.
  • MyWebApp is the root folder of the project
  • basic.css is the CSS file for style information , we can add one or more CSS file in the project.
  • basic.js is the javascript file for application logic, we can add one or more JS file in the project.
  • config.xml is the configuration document file. The main information that it contains is the starting point of the application .
  • icon.png is the default icon of the application, we can also change it according to our choice also.
  • index.html is the default entry point file according the W3C .

Step 2: To run the app on simulator

  • Right click on the project (MyWebApp) in the project explorer and then click on Preview Web app. This will launch the application in the simulator.

step 3: Packaging the application :

  • Right click on the project (MyWebApp) in the project explorer and then click on Package Web app. This will create the wgt file (MyWebApp.wgt in this case)

Step 4: Deploy the application on S40 Device

Editing the Default Project

Once the project is created in the project explorer , double click the index.html file and open it. Under <body> tag lets add Hello Series 40 Web App, save it and run the preview. This will display Hello Series 40 Web App on the simulator in the application screen. The <body onload="javascript:init();"> tag calls the init() function of basic.js file when the <body> tag of index.html file loads . We can add application logic in init() function of basic.js file.

Tips and Tricks

Now we are able to create application. lets note down some points that we need to keep in mind while developing Series 40 web apps.

  • handling large amount of data.
  • Working with animation and its performance.
  • Difference between regular web app and web app designed for Series 40 device using Nokia Browser for Series 40.


Series 40 web apps are standalone web app for Nokia Asha devices and runs using Nokia Browser for Series 40. Nokia Browser for Series 40 is a Light-weight, cloud assisted web runtime, client side browser, provided for a better browsing experience on Nokia Asha devices. Regular JavaScript executed at Nokia Browser for Series 40 Proxy server. MWL available for certain client side operation such as UI implementation and effects.


Related Articles

This page was last modified on 13 May 2013, at 01:56.
98 page views in the last 30 days.