Offline interactive websites

Most offline websites (excluding PWAs) don't bother with interactivity, favouring just simple clunky pages, which is fine and does the job in a practical sense. But it's actually not that big a deal to build an interactive offline website if you already have an SPA written in Active CSS and want to make a version that works properly when Charlton Heston dusts off and boots up your computer in 400 years.

This is NOT the PWA method. PWA's are synchronised to live websites and this is not the same thing. The method described on this page allows for an interactive yet fully standalone offline website.

This method would be used to create an interactive offline website under "file://". Local HTML files running in your browser cannot perform local ajax calls. It's a security feature in the browser. You are simply not allowed to run ajax (XHR) commands on offline websites that run under "file://".

This method was created so we could make the downloadable Active CSS documentation fully interactive.

All page content (ie. all the HTML files - not the images) needs to be stored in one massive HTML file for this method to work, which even for a large website like this one shouldn't be more than a few megabytes. In most cases, HTML files are actually pretty tiny. Once the file is loaded, it should respond as quickly as a live website.

You should not use this method for a live website on https unless you only have a few pages, otherwise it might be a bit slow loading.

All the pages are bookmarkable, just like a live website. It uses a hash method to store page location in the URL. But even so, it also works with bookmarkable hash pages. It's pretty cool.

Inner page content is stored in template tags in a single HTML file.

Let's get to it

Check out the Regular ajax websites example to get to grips with the basic concept of SPAs. Then come back.

So now you're back, let's have a look at a link:

<a href="/blog/version_250_release.html">Check out the version 2.5.0 release</a>

The config to handle this, for an offline website, would look something like this:

@pages {
    "/blog/version_250_release.html": class="myPage" data-title="Blog";
    ... other pages
}

.myPage:click {
    url-change: "#{@href}" "{@data-title}";
    load-as-ajax: template[data-ref="{@href}"];
}

.myPage:afterLoadAsAjax {
    #contentArea {
        render: {$STRING};
    }
}

Where is the ".myPage" class in the "a" tag? It's not needed. It comes from the URL in @pages - the URL is the key. You hover over the tag, ACSS looks up the href in @pages and takes it from there. This means that your user could create the tag via tinyMCE or something like that, and not worry about any other setups for the tag. Cool, huh?

It's actually not that hard to understand, but you may need to read the bit below and then re-read it.

The changes are in the url-change command (now starts with a "#"), the load-as-ajax command replaces the ajax command, which now relies on an attribute in the template tag in the HTML from the page itself. The "afterLoadAsAjax" event replaces the "afterAjax" event. And we no longer need a data-ajax attribute in @pages.

Internally, Active CSS recognises when the page is on "file://" and handles the rest automatically.

So your starting HTML file would essentially be your starting page, with all the header elements you need to get it working offline. Like just a regular page.

Then after you've got your front-page working, you would create your template tags containing all of your inner content, including the starting page, and place these template tags inside the front-page HTML, near the bottom of the page or wherever you want.

For example:

<template data-ref="/blog/version_250_release.html">
    <h1>Blog</h1>
    <h2><a class="" href="/blog/version_250_release.html">Version 2.5.0 release</a></h2>
    ...etc.
    <style>page specific CSS styles can go here</style>
    <style type="text/acss">page specific embedded ACSS events can go here</style>
</template>

And just keep adding templates in that contain your page content, and additional @pages entries to match the URL in the template tag attribute (in this example, the data-ref attribute).

That's basically it. Downloading the offline docs for this site and inspecting the templates tags from Devtools can give you more of an idea of the concept if you want to see a working copy of what you are trying to produce.

Tip to Senior Developers: If you can write vanilla scripts on the back-end, you can generate the offline site HTML page and ACSS config automatically. Static site generation is actually very easy to do - you just need to give it some thought as to how you would go about it, and the rest is relatively simple. An intermediate developer in a vanilla back-end language should be able to work it out.