configure app cache for the site

- this makes the website offline-enabled - hugely improves time to load - allows us to expire all resources in on go so people don't see stale content or code
angular · May 31, 2011 · 0c33041 · 0c33041
1 parent 3c7639a
commit 0c33041
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 3 deletions.
diff --git a/.htaccess b/.htaccess
@@ -149,15 +149,23 @@ redirect 301 /Validator:ssn http://docs.angularjs.org/#!angular.validator
 redirect 301 /Validator:url http://docs.angularjs.org/#!angular.validator.url
 redirect 301 /Widget http://docs.angularjs.org/#!angular.widget
 
+
 # content-type mappings
 AddType application/javascript .js
+AddType text/cache-manifest .manifest
 
 
 # cache stuff for 60 minutes
 Header set Cache-Control "max-age=120"
 ExpiresActive On
 ExpiresDefault "access plus 120 minutes"
 
+# don't cache manifest at all so that it's easy to reload the appcache
+<FilesMatch "\.manifest$">
+Header set Cache-Control "max-age=0"
+ExpiresDefault "access"
+</FilesMatch>
+
 
 # compression
 SetOutputFilter DEFLATE

diff --git a/appcache.manifest b/appcache.manifest
@@ -0,0 +1,41 @@
+CACHE MANIFEST
+# 2011-05-31:v0
+
+
+# cache all of these
+CACHE:
+
+# js
+js/app.js
+js/doc_widgets.js
+
+# css
+css/angular.css
+css/doc_widgets.css
+
+# images
+img/bullet.png
+img/community_icon.png
+img/download_arrow.png
+img/framework_icon.png
+img/mvc_icon.png
+img/navIcon.png
+img/template_icon.png
+img/texture_1.png
+img/two-way_icon.png
+img/yellow_bkgnd.jpg
+/favicon.ico
+
+# external dependencies
+http://code.angularjs.org/0.9.15/angular-0.9.15.min.js
+http://code.angularjs.org/0.9.15/docs-0.9.15/jquery.min.js
+http://code.angularjs.org/0.9.15/docs-0.9.15/syntaxhighlighter/shCore.js
+http://code.angularjs.org/0.9.15/docs-0.9.15/syntaxhighlighter/shBrushJScript.js
+http://code.angularjs.org/0.9.15/docs-0.9.15/syntaxhighlighter/shBrushXml.js
+http://code.angularjs.org/0.9.15/docs-0.9.15/syntaxhighlighter/shCore.css
+http://code.angularjs.org/0.9.15/docs-0.9.15/syntaxhighlighter/shThemeDefault.css
+
+
+# allow access to google analytics and twitter when we are online
+NETWORK:
+*
diff --git a/dev/server.js b/dev/server.js
@@ -79,7 +79,8 @@ StaticServlet.MimeMap = {
   'jpg': 'image/jpeg',
   'jpeg': 'image/jpeg',
   'gif': 'image/gif',
-  'png': 'image/png'
+  'png': 'image/png',
+  'manifest': 'text/cache-manifest'
 };
 
 StaticServlet.prototype.handleRequest = function(req, res) {

diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html xmlns:ng="http://angularjs.org/"
-      xmlns:doc="http://docs.angularjs.org/">
+      xmlns:doc="http://docs.angularjs.org/"
+      manifest="appcache.manifest">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>&lt;angular/&gt;</title>
@@ -34,8 +35,16 @@
         });
       });
     });
-  </script>
 
+
+    // force page reload when new update is available
+    window.applicationCache && window.applicationCache.addEventListener('updateready', function(e) {
+      if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
+        window.applicationCache.swapCache();
+        window.location.reload();
+      }
+    }, false);
+  </script>
 </head>
 
 <body class="home" ng:controller="AppCtrl">