Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks for Cache”
Offline Application Cache
-
Upload
jonathan-stark -
Category
Technology
-
view
3.596 -
download
0
Transcript of Offline Application Cache
![Page 1: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/1.jpg)
Offline Application CacheJonathan Stark
1
![Page 2: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/2.jpg)
What is AppCache?
2
![Page 3: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/3.jpg)
The Basics
3
![Page 4: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/4.jpg)
Manifest File
• A simple text document
• Hosted on your web server
• Contains a list of static resources
4
![Page 5: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/5.jpg)
demo.manifest
CACHE MANIFEST
index.html
logo.jpg
scripts/demo.js
styles/screen.css
5
![Page 6: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/6.jpg)
index.html
<html manifest="demo.manifest">
6
![Page 7: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/7.jpg)
.htaccess
AddType text/cache-manifest .manifest
7
![Page 8: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/8.jpg)
It Works!
• User loads index.html normally
• Listed files download in the background
• User can now go offline
8
![Page 9: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/9.jpg)
What About Updates?
• Update your content (HTML, CSS, JS, IMG)
• Update your manifest
• All files re-download next time
9
![Page 10: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/10.jpg)
Online Whitelist
10
![Page 11: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/11.jpg)
demo.manifest
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
NETWORK:
logo.jpg
11
![Page 12: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/12.jpg)
Offline Fallbacks
12
![Page 13: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/13.jpg)
demo.manifest
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
FALLBACK:
logo.jpg offline.jpg
13
![Page 14: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/14.jpg)
demo.manifest
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
FALLBACK:
images/ images/offline.jpg
14
![Page 15: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/15.jpg)
Dynamic Manifest
15
![Page 16: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/16.jpg)
manifest.php<?phpecho "CACHE MANIFEST\n";$dir = new RecursiveDirectoryIterator(".");foreach(new RecursiveIteratorIterator($dir) as $file) { if ($file->IsFile() and $file != "./manifest.php" and substr($file->getFilename(), 0, 1) != ".") { echo $file . "\n"; }}
16
![Page 17: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/17.jpg)
Debugging
17
![Page 18: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/18.jpg)
access_log
tail -f /var/log/apache2/access_log
18
![Page 19: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/19.jpg)
JavaScript API// Convenience array of status valuesvar cacheStatusValues = [];cacheStatusValues[0] = 'uncached';cacheStatusValues[1] = 'idle';cacheStatusValues[2] = 'checking';cacheStatusValues[3] = 'downloading';cacheStatusValues[4] = 'updateready';cacheStatusValues[5] = 'obsolete';
19
![Page 20: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/20.jpg)
JavaScript API// Listeners for all possible eventsvar cache = window.applicationCache;cache.addEventListener('cached', logEvent, false);cache.addEventListener('checking', logEvent, false);cache.addEventListener('downloading', logEvent, false);cache.addEventListener('error', logEvent, false);cache.addEventListener('noupdate', logEvent, false);cache.addEventListener('obsolete', logEvent, false);cache.addEventListener('progress', logEvent, false);cache.addEventListener('updateready', logEvent, false);
20
![Page 21: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/21.jpg)
JavaScript API// Log every event to the consolefunction logEvent(e) { var online, status, type, message; online = (navigator.onLine) ? 'yes' : 'no'; status = cacheStatusValues[cache.status]; type = e.type; message = 'online: ' + online; message+= ', event: ' + type; message+= ', status: ' + status; if (type == 'error' && navigator.onLine) { message+= ' (prolly a syntax error in manifest)'; } console.log(message);}
21
![Page 22: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/22.jpg)
JavaScript API// Check for manifest changes every 10 secondssetInterval(function(){cache.update()}, 10000);
22
![Page 23: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/23.jpg)
Demo!
23
![Page 24: Offline Application Cache](https://reader034.fdocuments.net/reader034/viewer/2022050613/54b6b1fe4a7959ad7b8b466f/html5/thumbnails/24.jpg)
More Info
• http://jonathanstark.com/books
• http://jonathanstark.com/contact
• http://jonathanstark.com/e4h
24