如何为在线和离线应用程序提供相同的 HTML 页面？答案

【问题标题】：How to serve the same HTML page for online and offline applications?如何为在线和离线应用程序提供相同的 HTML 页面？
【发布时间】：2012-12-20 21:47:08
【问题描述】：

我有一个应用程序，我还需要离线使用它。我在客户端上使用 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，当通过 Ajax 请求后续页面时，它会使用完整的head 加载第一页，然后不再使用标题。因此，我正在检查页面是否是通过 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 请求页面时，我只包含 Facebook Open Graph 元数据。这样，如果 Google 请求该页面，该页面就会通过 W3C 验证。

现在挑战...如何使这个静态和离线可用。

我已经考虑了一段时间，并没有真正想出一个好的解决方案。如果我

提供整页 = 我未通过 W3C 验证，在线用户获得每个页面请求 8k 罚款（是的，它已压缩，但仍然如此）
提供没有标题的页面 = 不是一个选项
提供两种版本的页面（一种用于在线，一种用于离线 usage) = 离线页面将被缓存，用户将被 “卡”在缓存中的那个版本，即使他在线。
仅制作带有完整页眉的第一页 = 从第一页以外的页面开始的用户将位于损坏的页面（无页眉）。主页也未能通过验证。

我敢肯定，我不能拥有一切，但我想知道可以采取哪种方法以最好的方式做到这一点。

感谢您的意见！

【问题讨论】：

离线是什么意思？
离线，就像在没有互联网连接的情况下运行。

标签： javascript jquery html offline

【解决方案1】：

您可以设置会话变量来表示已加载标头。然后，在每个页面上检查该变量，如果存在，则仅显示内容；如果不存在，则显示头部 + 内容。

【讨论】：

没问题！ :) 它也应该让你在离线页面上走上正轨。