We can manage the browser’s cache to save our website as an app in it.
App cache file
– To config the cache we use something similar to the robots: a txt file listing the urls to cache with some options.
– The file must be served as “text/cache-manifest” mime type. To config it on the server use this extension: .appcache
– We tell the browser where the file is at the <html> tag of our page using a new attribute: manifest=””
<html manifest=”myCache.appcache”>
– You must include the manifest on each page you want to cache resources.
– Without the cache manifest attribute the browser will use the default caching system.
How the file is organized
CACHE MANIFEST <- header
CACHE
The first block contains the URL to the resources to cache including external libraries, stylesheets and images.
NETWORK
This section includes all the urls that should not be cached. If your app has API requirements, include them here. Note that you can use prefixes to set those calls.
FALLBACK
Lists replacements for network URLs to be used when the browser is offline or unavailable.
SETTINGS
Specifies settings for appCache behaviour. Currently only available setting is:
cache mode:
prefer-online (indicates that cache should not be used if browser has access to the Internet.
fast: to use cache even when there’s connection (default).
Note: You can add comments to the manifest using “#”
Important: You can use prefixes to cache a full folder, like “/images/” to set that all images must be cached.
Remember: You need to include the resources included in your stylesheets too.
Generator tools
manifestR: bookmarklet -> bookmark it and then click on it when on the page to generate it.
Confess.js: small script library that uses PhantomJS to analyze WebFiles. It can:
– Generate appcache manifest.
– Performance analysis on page addresses.
– List of CSS properties used.
Manifesto validator
Websites to validate your manifesto:
manifesto.ericdelabar.com
manifest-validator.com
Updating the cache
You just need to update the manifest on the server. The “lastModifiedDate” of the file will change, then, the browser will always request if the manifesto has been updated, the server responds with its last modifiedDate. If newer, the browser will request the “new” manifest and re-cache all the files.
Good practice
Add a comment with the date of the last modifies date into your manifest that gets updated each time any file is so that the manifest is always updated when others do and you make sure that the browser rewuests the new versions.
Also, a build generator that generates the manifesto helps.
Note: You can also clean cache using browser’s dev tools. It won’t cache so to test this you can’t disable caching when using F12.
Cache size limit
Sometimes due to large apps (with videos or games or many images) trying to save too much data in cache the client system may not have enough space to store it. You can though get an error that allows you to display some warning to your user like: “Sorry, due to lack of disk space this page won’t be available offline”.
Note: This is a very exceptional problem, most webpages won’t use so much data.
Quota management API
There is an API to check how much space available there is in the browser: www.w3.org/TR/quota-api/
Checking if I’m online/offline
navigator.onLine; -> true/false
This navigator property allows us to know if the browser is connected to the network. To listen to changes on this property use:
window.addEventListener("online", function(){ ... });
window.addEventListener("offline", function(){ ... });
Important: Just because your browser is connected to the network doesn’t mean you have access to the servers. There may be network problems or the server may be down.
