Adds an HTML5 appcache manifest to speed up your site by storing static assets client-side.

Robert O'Rourke

<p>The plugin adds an iframe to the footer of your website which points to <code>example.com/manifest</code>.</p>
<p>That URL is an empty page that references the generated manifest file at <code>example.com/manifest.appcache</code>.</p>
<p>The manifest itself is built in the following way:</p>
<ol>
<li>adds URLs of all queued scripts and styles</li>
<li>searches theme files and folder for any images or other static assets</li>
<li>if a theme has a 307.php template it is used as an offline fallback</li>
<li>a timestamp of the most recently modified file is added to force appcache to refresh</li>
</ol>
<p>The net result of all this is that your main static files are stored locally on your visitors devices. For mobile this greatly helps to improve download and rendering times.</p>
<h3>Documentation</h3>
<h3>Adding items to the manifest</h3>
<p>Appcache can do more than store static assets. You could cache entire pages, or add fallbacks for when a user is offline.</p>
<p>There are 3 main sections to a manifest:</p>
<h4>CACHE</h4>
<p>The main <code>CACHE</code> section is for URLs that should be explicitly cached.</p>
<pre><code><?php
add_filter( 'appcache_cache', function( $urls ) {
   $urls[] = '/page-available-offline/';
   return $urls;
} );
?>
</code></pre>
<h4>NETWORK</h4>
<p>This section is for specifying URLs that should <em>never</em> be cached.</p>
<pre><code><?php
add_filter( 'appcache_network', function( $urls ) {
   $urls[] = '*';
   $urls[] = '/online-only-page/';
   return $urls;
} );
?>
</code></pre>
<h4>FALLBACK</h4>
<p>The fallback section allows you to set fallback pages or images if the user is offline.</p>
<pre><code><?php
add_filter( 'appcache_fallback', function( $patterns ) {
   $patterns[] = 'wp-content/uploads/ wp-content/uploads/offline.jpg';
   return $patterns;
} );
?>
</code></pre>
<h4>The update header</h4>
<p>Appcaches are refetched when the manifest file content changes so we add a few items as comments at the top of the file.</p>
<ol>
<li>The current theme (and version if available)</li>
<li>The most recent modified time of any files we find the server path for</li>
<li>
<p>The size of all the files that we find a server path for</p>
<p>get_var( “SELECT post_modified FROM $wpdb->posts WHERE post_type = ‘post’ ORDER BY post_modified DESC LIMIT 1” );<br />
   return $headers;<br />
} );<br />
?></li>
</ol>
<h3>More about appcache</h3>
<p>I strongly recommend learning more about what you can do with appcache by reading the following articles:</p>
<ul>
<li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" rel="nofollow ugc">HTML5 Rock’s Introduction to Appcache</a></li>
<li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" rel="nofollow ugc">Application cache is a douchebag</a></li>
</ul>


Alternatives to Appcachify

Top alternatives