Делаю web-приложение. Должно кешироваться в мобильном телефоне (если нет сети). Браузер — iPhone, Android, Firefox. Возможно IE который в windows mobile-7. Ещё возможно другие, старые, телефоны, ну там как повезёт.
Общий принцип работы такой: вначале загружается index.html, в котором надпись мол «ваш браузер устарел blablabla». И внутри index.html имеется <script> с ссылкой на javascript код собственно, в котором программа. Программа отображает несколько окон/экранов пользователю, где элементы управления. Ну тут всё понятно. Загрузка экрана ведётся из отдельного HTML-файла — шаблона через XMLHttpRequest(). После загрузки отдельные поля в шаблоне (находятся через id) заменяются как нужно, либо, если это списки, размножаются с отрыванием id и заполнением данными. Ну а далее пользователь жмёт кнопки. Загрузка делается так, что когда загрузили, то делается просто document.documentElement.innerHTML=req.responseText.
В момент загрузки шаблона показывается элемент (DOM node) с надписью «please wait, loaging...» Если загрузка неуспешна, то «load error: blablabla». Также есть window.onerror который тоже показывает текст ошибки пользователю. Всё это делается так: в index.html имеется три вставки <script id=«error_или_loading» language=«text»>ШАБЛОН В HTML</script>. Эти три вставки сразу после запуска JS извлекаются по id и копируются в переменные. Потом при загрузке, при ошибках они просто в document.documentElement.innerHTML=variable вставляются (тоже как шаблон, в них тоже по id заменяются надписи если надо). Принципиально, что эти вставки идут до <script> с javascript (иначе он их не найдёт, ибо запустится раньше). А когда javascript загрузился, то он проверяет наличие XMLHttpRequest(), если ок, то после onload загружает сам уже шаблон с заглавной страницей.
Для хранения постоянных данных используется localStorage. Видимо, следует использовать cookies для старых браузеров.
Во-первых имею проблему в андроиде (версии разные... не существенно, 4.1 например). Иногда загружается шаблон первой страницы (200), она отображается, потом onreadystatechange вызывается ещё раз с кодом status 0. Бывает сразу 0. Если сделать запрос синхронным, то NETWORK_ERR: XMLHttpRequest Exception 101. А иногда работает. Чертовщина. Причём не работает когда есть <html manifest=«cache.manifest» lang=«ru»>. Если cache.manifest убрать, то всё ок.
Во-вторых перезагрузить страницу после изменения тяжело. Особенно в андроиде. cache.manifest каждый раз меняю. Без толку. Непонятные пляски с бубном и после 10-го раза перезагружается. На десктопе в firefox всё ок. В chrome тоже. Вроде, помогает, открытие манифеста вручную в браузере (андроида), не понял.
Во-третьих в андроиде не работает такое: <audio autoplay=«autoplay»><source type=«audio/wav» src=«sounds/warn.wav» /></audio> И из javascript, без autoplay, тоже.
Что я могу делать принципиально неправильно? Ниже код загрузки:
function load(page, callback) {
log("loading '"+page+"'");
document.documentElement.innerHTML=Loading;
var statechange=function() {
log("req:", page, "state: ", req.readyState);
switch(req.readyState) {
case 1:
document.getElementById("loading1").style.display="inline";
break;
case 2:
document.getElementById("loading2").style.display="inline";
break;
case 3:
document.getElementById("loading3").style.display="inline";
break;
case 4:
clearTimeout(timeout);
log("req status: ", req.status);
switch (req.status) {
case 200:
document.documentElement.innerHTML=req.responseText;
//log("calling: ", callback/*.toString().match(/function ([^\(]+)/)[1]*/);
callback();
break;
case 0:
document.documentElement.innerHTML=LoadFail;
document.getElementById("errcode").innerHTML="XMLHttpRequest() failed: "+req.responseText;
break;
default:
document.documentElement.innerHTML=LoadFail;
document.getElementById("errcode").innerHTML=req.status;
}
break;
default:
document.getElementById("loading1").style.display="none";
document.getElementById("loading2").style.display="none";
document.getElementById("loading3").style.display="none";
}
};
var timeout=setTimeout(function () {
document.documentElement.innerHTML=LoadFail;
document.getElementById("errcode").innerHTML="Timeout!";
}, 8000);
try {
var req=new XMLHttpRequest();
req.onreadystatechange=statechange;
req.open("GET", page, true);
req.send(null);
}
catch (err) {
document.documentElement.innerHTML=LoadFail;
document.getElementById("errcode").innerHTML=err;
return;
}
}
Используется так: load("pattern.html", function() { что сделать после загрузки.. });
