appcache

Documentation of Meteor's appcache package.

The appcache package stores the static parts of a Meteor application(the client side Javascript, HTML, CSS, and images) in the browser’sapplication cache. To enablecaching simply add the appcache package to your project.

  • Once a user has visited a Meteor application for the first time andthe application has been cached, on subsequent visits the web pageloads faster because the browser can load the application out of thecache without contacting the server first.

  • Hot code pushes are loaded by the browser in the background while theapp continues to run. Once the new code has been fully loaded thebrowser is able to switch over to the new code quickly.

  • The application cache allows the application to be loaded even whenthe browser doesn’t have an Internet connection, and so enables usingthe app offline.

(Note however that the appcache package by itself doesn’t makedata available offline: in an application loaded offline, a MeteorCollection will appear to be empty in the client until the Internetbecomes available and the browser is able to establish a DDPconnection).

To turn AppCache off for specific browsers use:

  1. Meteor.AppCache.config({
  2.   chrome: false,
  3.   firefox: false
  4. });

The supported browsers that can be enabled or disabled include, but arenot limited to, android, chrome, chromium, chromeMobileIOS,firefox, ie, mobileSafari and safari.

Browsers limit the amount of data they will put in the applicationcache, which can vary due to factors such as how much disk space isfree. Unfortunately if your application goes over the limit ratherthan disabling the application cache altogether and running theapplication online, the browser will instead fail that particularupdate of the cache, leaving your users running old code.

Thus it’s best to keep the size of the cache below 5MB. Theappcache package will print a warning on the Meteor server consoleif the total size of the resources being cached is over 5MB.

If you have files too large to fit in the cache you can disablecaching by URL prefix. For example,

  1. Meteor.AppCache.config({ onlineOnly: ['/online/'] });

causes files in your public/online directory to not be cached, andso they will only be available online. You can then move your largefiles into that directory and refer to them at the new URL:

  1. <img src="/online/bigimage.jpg">

If you’d prefer not to move your files, you can use the file namesthemselves as the URL prefix:

  1. Meteor.AppCache.config({
  2.   onlineOnly: [
  3.     '/bigimage.jpg',
  4.     '/largedata.json'
  5.   ]
  6. });

though keep in mind that since the exclusion is by prefix (this is alimitation of the application cache manifest), excluding/largedata.json will also exclude such URLs as/largedata.json.orig and /largedata.json/file1.

For more information about how Meteor interacts with the applicationcache, see theAppCache pagein the Meteor wiki.