Как кэшировать javascript на iPhone Safari с помощью HTML5 localStorage?

Да, вы можете. (извините за ответ на мой собственный вопрос, я думал, что это интересное решение)

Я нашел контур примера кода здесь, на слайде #12.

http://www.slideshare.net/jedisct1/abusing-javascript-to-speedup-mobile-web-sites

я реализовал это на http://m.bbref.com/ (все еще в бета-версии)

вы должны использовать управление версиями url-адреса скрипта, чтобы очистить кэш, когда новая версия создано, но это работает для страниц с localStorage, а также будет работать, когда localStorage недоступен. Я добавил некоторый отладочный код в нижний колонтитул, чтобы показать вам, откуда загружается js.

Я разделил это на скрипт для верхнего и нижнего колонтитулов. Они выглядят встроенными.

в заголовке (я поместил его здесь, поскольку мы используем modernizr для добавления некоторых классов в HTML-тег, и я хочу, чтобы они были там как можно быстрее для рендеринга. Можно переместить в нижняя сноска.

<script type="text/javascript">
// .001 is the current js version
// this script assumes it is in the root web directory.
var js_file = "site_lib.001.js";
// vars to store where the file is loaded from.
var _mob_load_js = false;
var _mob_ajax_load_js = false;
{
    // if we have localStorage and the files exists there get it.
    if(window.localStorage && window.localStorage[js_file]) {
            // eval the js file.
            try{
                window.eval(window.localStorage[js_file]);

                // successfully eval'ed the code, so 
                // we don't need to download it later.
            _mob_load_js = true;
            } catch (e) { _mob_load_js = false; }
    }
    else if (window.localStorage) {
        // We have localStorage, but no cached file, so we 
        // load the file via ajax, eval it and then store 
        // the file in localStorage

        // To remove previous versions, I remove all of our localStorage,
        // This is extreme if we store other vars there.
        window.localStorage.clear();
        // standard ajax request.
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            // eval the js
            try {
                window.eval(xhr.responseText);
                // successfully eval'ed the code, so 
                // we don't need to download it later.
            _mob_ajax_load_js = true;
            } catch (e) { _mob_ajax_load_js = false; }

        try {
                // store the js.
            window.localStorage[js_file] = xhr.responseText;
        } catch (e) {}
        }
        else {
        return;   
        }
    };
    xhr.open("GET",js_file,true);
    xhr.send();
    }
};
</script>

и в нижнем колонтитуле (по соображениям производительности). Я размещаю стандартный метод загрузки. Обратите внимание, что браузеры, которые используют эту ветку все кэш правильно, пока у вас есть истекает набор заголовков.

<div id="sr_external_script"></div>
<script type="text/javascript">   
// We haven't loaded the js yet, so we create a script 
// tag and get the script the old fashioned way
if (!_mob_load_js && !_mob_ajax_load_js) {
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src=js_file;
    document.getElementById("sr_external_script").appendChild(script);
    // add a note to the footer
    document.write('<div>loaded from server and not stored</div>');
}
else if (!_mob_load_js) {
    // add a note to the footer
    document.write('<div>loaded via ajax and stored in localStorage</div>');
}
else {
    // add a note to the footer
    document.write('<div>loaded from localStorage</div>');
}
</script>

Я подтвердил в chrome и safari, что js загружается из localStorage, и функциональность сайта работает так, как ожидалось, и нет запроса на сервер. И я подтвердил, что при запуске в IE или firefox он загружает скрипт как нашел в футере.

Примечание: я добавил код, чтобы обернуть evals в try catch, так как у меня была проблема в firefox.