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

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

11 голосов
/ 12 января 2012

У меня есть простое приложение со списком контактов 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? Если да, то как мне его активировать?

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

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

1 Ответ

1 голос
/ 19 января 2012

Я не думаю, что вы можете получить это обоими способами.Вы не можете иметь приложение на основе 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 есть отличное руководство: Руководство для начинающих по использованию кэша приложений .

...