Post on 11-Nov-2014
description
Технологии для создания мобильных web приложений
Константин Жандов
Устройства с web-kit браузерами
iPhone like UI
Layout приложения
Один HTML файл
Загрузка контента1. Все данные сразу2. AJAX3. Часть данных сразу + AJAX
Загрузка контента1. Все данные сразу2. AJAX3. Часть данных сразу + AJAX
Загрузка контента1. Все данные сразу2. AJAX3. Часть данных сразу + AJAX
Загрузка контента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
Cache manifestCACHE:
stylesheet.css
NETWORK:
only_online.js
FALLBACK:images/ offline_image.png
Cache manifestCACHE:
stylesheet.css
NETWORK:
only_online.js
FALLBACK:images/ offline_image.png
Cache manifestCACHE:
stylesheet.css
NETWORK:
only_online.js
FALLBACK:images/ offline_image.png
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 приложений
Константин Жандов