Home/ Questions/Q 9025053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T06:10:37+00:00

I have an application, which I need to also make available offline. I have

  • 0

I have an application, which I need to also make available offline. I have no problem building dynamic content on the client with Javascript/Jquery vs doing it on the server, but I’m stuck with the basic page layout.

Right now my server-only pages are structured like this (I’m using 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 --->

I’m using Jquery Mobile, which loads the first page with full head and then never uses the header again, when requesting subsequent pages via Ajax. I’m therefore checking whether the page is requested via Ajax and if so, I skip sending 8k of header to the client on subsequent page requests, because they are not used by JQM.

Also, my header template includes a lot of conditional content like this:

<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>

So I only include the Facebook Open Graph meta, when the page is requested by Facebook. This way the page if requested by Google passes W3C validation.

Challenge now… how to make this static and available offline.

I have been thinking about it for a while and not really come up with a good solution. If I

  1. Serve the full page = I fail W3C validation and online users get
    8k penalty (yes, it’s gzipped, but still) on every page request
  2. Serve the page without header = not really an option
  3. Serve two versions of the page (one for online, one for offline
    usage) = the offline page will be cached and the user will be
    “stuck” with that version from cache, even if he is online.
  4. Only make the first page with full header = users starting on pages other than the first will be on a broken page (no header). Main page also fails validation.

I’m sure, I can’t have it all, but I would like to know which approach can be taken to do this the best way possible.

Thanks for inputs!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can set a session variable to denote that the header is loaded. Then, on each page check for that variable, and if it’s there, show only the content; and if it’s not there, show the head + content.

    • 0