44 | 47 |
ApplicationCache Under the Hood
48 |
49 |
50 |
51 |
52 |
53 |
44 | 47 |
44 | 
62 | 
62 | 
63 | 
62 | The application cache is a poorly understood part of the HTML5 specification with a lot of potential. Let's get rid of 117 | some of the confusion and make the web a faster place.
118 | 119 |text/cache-manifest.
123 | The suggested file extension for manifests is .appcache.
CACHE, NETWORK, FALLBACK, and SETTINGS.
129 | The CACHE section lists all resources that should be downloaded and stored locally. The browser will
131 | begin downloading these in the background as soon as the page has loaded. If any are already in the browser's cache,
132 | they will not be downloaded again separately.
The NETWORK section lists all URLs that may be loaded over the Internet. If your application includes
134 | any API calls, make sure to enumerate them here. Note that this is a list of URL prefixes, so if
135 | all of your network calls begin with http://example.com/api/, that's all you need to include.
If you want to allow arbitrary URLs to be accessed (scripts, stylesheets, API calls, anything), include *, http://* and https://* in this section. (Chrome and Safari respect the *; Firefox needs the http://* and https://*.)
The FALLBACK section lists replacements for network URLs to be used when the browser is offline or the
138 | remote server is unavailable.
The SETTINGS specifies settings for appcache behaviour. Currently, the only available setting is cache mode.
prefer-online, which indicates that cached data should not be used when the browser has an active internet connection (supported in Firefox 14+ and Opera 12+). The default is fast, which uses the cache even when the browser has an active internet conncetion.
That is, all paths must be relative, or point to resources on the same host and port as the current page.
147 |The exception is Google Chrome, which doesn't follow the specification in this regard. Over SSL, Chrome will load resources from different origins so long as they are still served over SSL.
148 |If your resources are going to be located at the same URL even when you upload a new version of them, 153 | add a comment to the manifest file with a changing version number in it.
154 |CACHE MANIFEST 155 | # version 1 156 | CACHE 157 | /logo.png 158 | ...159 |
Any line that starts with a # is a comment and will be ignored, but is sufficient to trigger an update when it changes.
touched the manifest file, the browser won't bother to re-check the assets — the contents of the manifest file must change somehow. Modifying a comment is good enough, which is why we recommend having a # version line.
165 | This is because once the page has been appcached, it is immediately served from that 171 | cache the next time the user returns. The browser then checks the manifest for any changes 172 | and downloads any required files in the background. The newest version will be available 173 | on the next load of the page.
174 |If you'd like, you can listen for the updateready event to detect this and prompt the
175 | user to reload the page:
if (window.applicationCache) {
177 | applicationCache.addEventListener('updateready', function() {
178 | if (confirm('An update is available. Reload now?')) {
179 | window.location.reload();
180 | }
181 | });
182 | }
183 | For most applications, however, temporarily using the previous version of the code is probably acceptable.
184 |CACHE section can't be retrieved, the entire cache will be disregarded.
188 | All resources must successfully return. If any do not — returning a 404 or 500, for example — the entire cache will be ignored.
190 |The next time the browser returns to your page, it will try to use the manifest again as if it was the first time it 191 | encountered it.
192 |chrome://appcache-internals/. This allows you to see which sites have appcached, when they were last modified, and how much space they're using. You can also remove appcaches here.Cache-control: no-store will not be cached, even if they're explicitly included in the manifest.These resources have been invaluable while working with the appcache:
205 |
42 |
43 | 
54 |
55 | Peter Lubbers, Program Manager, Google Chrome
56 | 57 |
58 | 
+Peter Lubbers
59 |
61 | 
@peterlubbers
62 |
76 |
77 | Pay attention, win prizes!
94 |
95 | 
106 |
107 | 
118 | 
164 |
165 | 
174 |
175 | 
185 |
186 | 
198 |
199 | ApplicationCache Basics205 |
217 | CACHE MANIFEST 218 | # version 2011-07-012 06:06:44 219 | 220 | CACHE: 221 | # html files 222 | cache.html 223 | index.html 224 | # css files 225 | css/style.css 226 | # image files 227 | apple-touch-icon.png 228 | favicon.ico 229 | img/fallback.png 230 | 231 | FALLBACK: 232 | / /demo/fallback.html 233 | 234 | NETWORK: 235 | * 236 | 237 | # Although it was removed from the spec, some browsers still require server configuration (mime type for *.appcache) 238 |239 |
257 | <doctype html> 258 | <html class="no-js" lang="en" manifest="manifest.appcache"> 259 |260 |
267 | ApplicationCache is a Douchebag. 268 |269 | 273 |
309 | // log each of the events fired by window.applicationCache
310 | window.applicationCache.onchecking = function(e) {log("Checking for updates");}
311 | window.applicationCache.onnoupdate = function(e) {log("No updates");}
312 | window.applicationCache.onupdateready = function(e) {log("Update ready");}
313 | window.applicationCache.onobsolete = function(e) {log("Obsolete");}
314 | window.applicationCache.ondownloading = function(e) {log("Downloading");}
315 | window.applicationCache.oncached = function(e) {log("Cached");}
316 | window.applicationCache.onerror = function(e) {log("Error");}
317 |
318 | //Log each file
319 | window.applicationCache.onprogress = function(e) {log("checking");}
320 | appCacheLog("Progress: downloaded file " + counter);
321 | counter++;
322 | }
323 |
324 |
335 | //Online and Offline status detection
336 | window.addEventListener("online", function(e) {
337 | log("You are online");
338 | }, true);
339 | window.addEventListener("offline", function(e) {
340 | log("You are offline");
341 | }, true);
342 |
343 | It's demo time!352 |
361 |
362 | 
398 |
399 | Questions?420 |
432 | 433 |
434 |
442 |