The plugin adds an iframe to the footer of your website which points to example.com/manifest
.
That URL is an empty page that references the generated manifest file at example.com/manifest.appcache
.
The manifest itself is built in the following way:
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.
Appcache can do more than store static assets. You could cache entire pages, or add fallbacks for when a user is offline.
There are 3 main sections to a manifest:
The main CACHE
section is for URLs that should be explicitly cached.
<?php
add_filter( 'appcache_cache', function( $urls ) {
$urls[] = '/page-available-offline/';
return $urls;
} );
?>
This section is for specifying URLs that should never be cached.
<?php
add_filter( 'appcache_network', function( $urls ) {
$urls[] = '*';
$urls[] = '/online-only-page/';
return $urls;
} );
?>
The fallback section allows you to set fallback pages or images if the user is offline.
<?php
add_filter( 'appcache_fallback', function( $patterns ) {
$patterns[] = 'wp-content/uploads/ wp-content/uploads/offline.jpg';
return $patterns;
} );
?>
Appcaches are refetched when the manifest file content changes so we add a few items as comments at the top of the file.
The size of all the files that we find a server path for
get_var( “SELECT post_modified FROM $wpdb->posts WHERE post_type = ‘post’ ORDER BY post_modified DESC LIMIT 1” );
return $headers;
} );
?>
I strongly recommend learning more about what you can do with appcache by reading the following articles: