Как кэшировать и сохранять последнюю посещенную страницу в приложении jQuery Mobile при повторном открытии с домашнего экрана iPhone?

У меня есть простое приложение со списком контактов jQuery Mobile. Он предлагает пользователям возможность добавить их на свой домашний экран. Когда они это сделают, щелкнув номер телефона, чтобы начать разговор, и открытие приложения снова помещает их на первую страницу приложения. Чтобы предотвратить это поведение, я добавил следующее:

$(function () {
    //if I am at the start page
    if ($.mobile.activePage.attr('data-url') === '/') {
        var storedPage = localStorage.getItem('jqmPage');
        //and I have a stored link
        if (storedPage !== null) {
            //change the page to the stored link
            $.mobile.changePage(storedPage);
        }
    }
    $(document).bind('pagecreate', function (e) {
        var url = !!e
            ? $(e.target).attr("data-url")
            : location.pathname + location.search;
        //there can be dialog pages - we don't want to return to them
        if (url.indexOf('/') !== 0) {
            return;
        }
        localStorage.setItem('jqmPage', url);
    });
});

Однако, когда пользователи возвращаются к приложению, кеш страницы теряется, и все данные на этой странице, которые обычно должны оставаться открытыми, перезагружаются с сервера (см. $.mobile.changePage(storedPage))., Есть ли способ предотвратить это? Есть ли также элегантный способ достижения такого же эффекта? Должен ли я просто хранить активную HTML-страницу на localStorage? Если да, то как его активировать?

Спасибо за помощь.

изменить: Возможно, я был недостаточно ясен. Я уже могу хранить данные на localStorage. Насколько я могу сказать, использование файлов cookie для хранения фрагментов HTML, которые будут переданы на сервер по каждому запросу, будет просто смешно. Мой вопрос не в том, как хранить данные. Я действительно спрашиваю, просто сохраняя $( ". Active-page-class" ). Html() и вернув его на страницу, когда его там нет, я хочу подражать кешированию на стороне клиента, который iPhone не предоставлять на мобильных устройствах jQuery на основе ajax. Это касается jQuery Mobile для приложений, к которым осуществляется доступ через домашний экран iPhone, поскольку теги и вопрос уже заявлены.

Ответы

Ответ 1

Я не думаю, что вы можете иметь это в обоих направлениях. Вы не можете иметь приложение на основе URL и хранить свой HTML в кеше. Как только вы скажете "перейдите по этому URL-адресу", браузер (даже бескаркасный веб-приложение) берет верх. Вы не можете сказать это, но вместо этого используйте этот HTML-код.

Теперь, если ваше приложение было более управляемым Javascript и динамически созданным (что я рекомендую для мобильных веб-приложений), это легко, потому что изменение страниц не связано с изменением URL-адреса. Вы можете использовать шаблон, например:

$( function () {
    var lastPageName = window.localStorage.getItem( 'lastPageName' ),
        lastPageData = window.localStorage.getItem( 'lastPageData' );

    if ( lastPageName ) {
        loadPage( lastPageName, lastPageData );
    } else {
        loadPage( "home" );
    };
} );

function loadPage( name, data ) {
    var pageData;

    if( data ) {
        pageData = data;
    } else {
        pageData = loadPageData( name );
        window.localStorage.setItem( 'lastPageName', name );
        window.localStorage.setItem( 'lastPageData', pageData );
    };

    //build page using name and pageData
};

С помощью мобильных приложений на основе URL-адресов единственный способ заставить браузер не перезагружать страницу с сервера, когда вы говорите "перейдите по этому URL-адресу", должен использовать файл манифеста.

Добавьте это в свой элемент <html>:

<html manifest="app.manifest">

Убедитесь, что ваш веб-сервер обслуживает файлы с расширением .manifest с типом text/cache-manifest mime.

Затем создайте файл с именем app.manifest:

CACHE MANIFEST
#version 1.0

#files to cache here
CACHE:
home.html

#files to refresh every time
NETWORK:
login.html

После того, как страница будет кеширована, она не будет обновляться до появления нового файла манифеста. Это просто означает, что файл каким-либо образом изменился, включая комментарии (что-нибудь после #). Строка версии (которая является просто комментарием и не имеет особого значения для файла) позволяет обновлять только с изменением номера версии.

Существует также и API, чтобы идти вместе с манифестом кэша, используя объект window.applicationCache. Там есть большой учебник по HTML5 Rocks: Руководство для начинающих по использованию кэша приложений.