Как обслуживать одну и ту же HTML-страницу для онлайн-и оффлайн-приложений?

У меня есть приложение, которое мне также нужно сделать доступным в автономном режиме. У меня нет проблем с созданием динамического контента на клиенте с помощью Javascript/Jquery против выполнения его на сервере, но я застрял с базовым макетом страницы.

Прямо сейчас мои страницы server-only структурированы следующим образом (я использую Coldfusion):

<cfsavecontent variable="renderedResults">
    <!--- Doctype --->
    <cfinclude template="../templates/tmp_pagetop.cfm">
    <cfoutput><head></cfoutput>
    <cfif NOT isAjaxRequest()>
        <!--- page header with all meta/js/css/icons... --->
        <cfinclude template="../templates/tmp_pageheader.cfm">
    </cfif>
    <cfoutput>
            <title>#variables.title# | #tx_select_title#</title>
        </head>
        <body>
        // page
        </body>
    </html>
    </cfoutput>
</cfsavecontent>

<!--- COMPRESS --->
<cfscript>
    compressedHTML = reReplace(renderedResults, ">s+<", "> <", "ALL");
    compressedHTML = reReplace(compressedHTML, "s{2,}", chr(13), "ALL");
    compressedHTML = reReplace(compressedHTML, "s{2,}", chr(09), "ALL");
    variables.alredayBinary = "false";
</cfscript>
<!--- GZIP --->
<!--- SET HEADER --->
<!--- SEND BACK --->

Я использую Jquery Mobile, который загружает первую страницу с полным head, а затем никогда не использует заголовок снова, запрашивая последующие страницы через Ajax. Поэтому я проверяю, есть ли страница запрашивается через Ajax, и если это так, я пропускаю отправку 8K заголовка клиенту на последующих запросах страницы, потому что они не используются JQM.

Кроме того, мой шаблон заголовка содержит много условного содержимого, например: 

<cfif structKeyExists(cgi, "HTTP_USER_AGENT" ) AND findNoCase("facebook", cgi.http_user_agent) NEQ 0>
    <cfoutput>
        <meta property="og:title" content="#variables.title#"/>
        <meta property="og:type" content="website"/>
        <meta property="og:url" content="#variables.base#" />
        <meta property="og:site_name" content="#variables.user_firma#"/>
        <meta property="og:description" content="#variables.user_fbds#"/>
        <meta property="fb:admins" content="#variables.user_fbadmin#" >
    </cfoutput>
</cfif>
Поэтому Facebook Open Graph meta включается только тогда, когда Facebook запрашивает страницу. Таким образом, страница по запросу Google проходит проверку W3C.

Вызов теперь... как сделать это статичным и доступным в автономном режиме.

У меня есть я думал об этом некоторое время и не нашел хорошего решения. Если Я

  1. обслуживайте всю страницу = Я проваливаю проверку W3C и онлайн-пользователи получают 8K штраф (да, это gzipped, но все же) на каждой странице запроса
  2. обслуживать страницу без заголовка = не совсем вариант
  3. служат две версии страницы (одна для онлайн, одна для оффлайн использование) = автономная страница будет кэширована, и пользователь будет "застрял" с этой версией из кэша, даже если он есть онлайн.
  4. только сделайте первую страницу с полным заголовком = пользователи, начинающие на страницах, отличных от первой, будут на сломанной странице (без заголовка). Главная страница также не проходит проверку.
Я уверен, что у меня не может быть всего этого, но я хотел бы знать, какой подход можно использовать, чтобы сделать это наилучшим образом.

Спасибо за информацию!

1 3
javascript html jquery html5 offline

1 ответ:

Можно задать переменную сеанса для обозначения того, что заголовок загружен. Затем на каждой странице проверьте наличие этой переменной, и если она есть, покажите только содержимое; а если ее нет, покажите заголовок + содержимое.

3