Konstantin Zhandov Presentation

Технологии для создания мобильных web приложений

Константин Жандов

Устройства с web-kit браузерами

iPhone like UI

Layout приложения

Один HTML файл

Загрузка контента1. Все данные сразу2. AJAX3. Часть данных сразу + AJAX




Кэшируем ресурсы1. CSS2. Javascript3. Images

Cache manifest#Cache v 1.0

CAHCE MANIFEST

index.html

stylesheet.css

scripts.js

image.png

Cache manifestCACHE:

stylesheet.css

NETWORK:

only_online.js

FALLBACK:images/ offline_image.png


stylesheet.css

NETWORK:

only_online.js



stylesheet.css

NETWORK:

only_online.js



stylesheet.css

NETWORK:

only_online.js


Cache manifest#Cache v 1.0

CAHCE MANIFEST

index.html

stylesheet.css

scripts.js

image.png

Подключение manifest файла

<!DOCTYPE html>

<html manifest="cache.manifest">

# MIME type

text/cache-manifest manifest

Online или offline?

if (navigator.onLine == false)

{

// Блокируем бессмысленные действия

}

Локальное хранение данных

•Web Storage• Web SQL Database

Web Storage

• Session Storage• Local Storage

Web Storage API• setItem• getItem• removeItem• clear• length

Web Storage APIlocalStorage.setItem('username', 'SomeUser');

var username = localStorage.getItem('username');

localStorage.removeItem('username');

var storageCount = localStorage.length;

localStorage.clear();

Web SQL Database

• openDatabase• transaction• exequteSql

openDatabase

var db = openDatabase("someDb", "1.0", "Some local database", 5242880);

transaction

db.transaction(function(tx){ // Some sql})

exequteSql

db.transaction(function(tx){

tx.exequteSql(query, [parameters], function(tx, result){}, function(tx, error){})

})

Geolocation

Geolocation APIif (navigator.geolocation)navigator.geolocation.getCurrentPosition(showResult);

function showResult (position){ var latitude = position.coords.latitude;

var longitude = position.coords.longitude;}

Технологии для создания мобильных web приложений

Константин Жандов

Konstantin Zhandov Presentation

Documents

cache manifest cache v1

cache manifestcache

0cahce manifestindex

images offline image

web

htmlstylesheet

cssscripts

only online