MOBILE WEB APPS

Mobile Web App• Applications that look like ‘native’ applications but make

only use of web technologies Idea: use a single activity that shows a webview

• The webview reads .html pages from the local asset

• Apps are written with standard web technology

• Html/CSS pages linked with each other to provide the same look and feel of a native applications, in particular they follow the Single Page Application pattern

• JavaScript embedded in the pages (and any JS library, like jQuery, as well as techniques like AJAX)

A web page is an active program• HTML5

• Content + Structure via a fixed set of tags

• CSS3:• How to display an element (colors, fonts, borders..)• How to layout elements wrt each other • Selector + declaration

• JavaScript: • How to react to an ‘event’

• Changing the style of an element (e.g., onMouseOver)• Trigger some computation• Change the content of the page

• Ajax• Asynchronous interactions over HTTP( e.g. use a web-api)

Browser as a sandboxed VM

• Single thread• Event-driven• Web worker (HMTL5)

Sandbox (restrict device access)Secure mechanism (JS is external, untrusted code…)

Multithreading• Web worker:

• Allows to run parallel JS code• Only one MAIN thread that access to DOM

• Service worker:• Much more flexible

• WebAssemby

Architecture of a Mobile Web App• Idea: just avoid fetching page from the site• Store the web page locally (of course no local web-server!)

OS/Middleware

Starter

Web rendering engine(e.g.,webkit)

Web page

HW

Browser is sand-boxed

1. Run web renderingengine, e.g., androis’swebview

2. Load webpage in the engine

Native code

APPLICATION

The minimalist template

Styling the app: How a web page is displayed?

Rendering processParse HTML Create the DOM tree

DOM = Document Object ModelEach HTML tag (detected via parsing) is mapped to an object (DOM tree)HTML describe only the content (e.g., this is a heading, this is a paragraph, etc..)

Parse CSS Detect CSS rulesDetect layout directives

CSS = Cascade Style SheetsDefine how to display the content (e.g., which font, colors, and many more…) ofHTML elementsRule: which style apply to which element(s) (CSS rules)

hmtl

headbody

h1 p

h1 à {properties}p à {properties}

hmtl

headbody

ph1

CSS properties are ‘attached’ to DOM objectsThe result is a render tree

Layout the render tree• Once the render tree is created, it is rendered according to a

layout process • This process assigns a ‘physical’ position to every render

element• Positions are computed based on the available viewport,

namely the available displaying area on the screen

• Each HTML element is render inside a box (CSS box model)• The dimensions of a box are computed wrt to the parent box

(container)• The topmost container size is the viewport

Media-query• Allows to use different CSS styles, depending on the

’media’

Content

CSS

screen with mìn-width=..

printer.

CSS3 Box model

widthheight eg. 100px, or % wrt container..And much more..

Content

A simple CSS3 example (style)

Layout

CSS allows for define how to layout box.CSS template (from frameworks, e.g., BS 4 , 3WCSS,) are more roboust

Setting the viewport• Most of the broswers support the viewport meta tag• It allows to set the view port for the rendering process• In particular, it allows to pass the real current viewport, so that

redering is done on the real size• A tag as simple as the following one solves the previous problem

Some example of viewports

Credits: mediagenesis See also: https://www.gsmarena.com/320--1280

Dealing with different viewports• At a high level there are two main solutions to deal with

different viewport or media characteristics

1. Create a CSS for every different screen (media). . In general it needs server side processing (used in CMS sw)

2. Define per-screen CSS on the client side: responsive web.

• The proper layout is determined through CSS media query

• One can define its on CSS layout or use a framework

• BS4 framework defines media 4 breakpoitns

Bootstrap 4• It is a framework for mobile-first responsive web design• The main strengths is the use of ‘flex-box’ CSS layout,

which defines how a container adapts to viewport

BS4 Breakpoints

Hybrid app• Android method mapped to JS functions, i.e., available JS

functions can be extended so that..

• Device features can be exported in JavaScript

• And, android code can call JS function

• Also, Apps can be made crossplatform (similar behaviour in other platform)

Binding JavaScript code to Android code• It is possible to create interfaces between JavaScript code

and Android code.

• In other words, JavaScript code can call a method implemented in ‘android’

Binding JavaScript code to Android code

• Public methods are seen as JS function

• The object that is bound to your JavaScript runs in another thread and not in the thread in which it was constructed.

• Only simple data can be passed

• JSON can be useful in this respect

Android Code

HTML + JS..

Android.test()

Add Interface (C,“Android”)

Android.test();

Class Ctest

public method

Example (android side)

Example (JS side)

Example

Injecting JS code in the view• Starting from Api 19 it is possible to asynchronously

injecting javascript code in a loaded page…• So one can call JS functions

Hybrid apps: Cordova

Xmarine (basic idea)

an .apk includes the application, the associated libraries, the content, the Mono runtime, and the required Base Class Library (BCL) assemblies.

ACW = Android Callable WrapperMCW = Mono Callable Wrapper

Xmarine (basic idea)

Xmarine (basic idea)