HTML5 Offline Applications

1. HTML5 Offline
Applications
C# Corner – 13 Sep’14 Sunny Kumar

2. Agenda
• Application Cache
• Anatomy of an Offline Application
• Cache Manifest
• Application Cache Event Life Cycle

3. Application Cache
The AppCache API facilitates caching of specified
files locally based on manifest url- resulting in:
 Offline Browsing
 Speed
 Reduced Server Load
 Resilience
 No Storage Limit *
 Event Driven API

4. Anatomy of HTML Offline
Applications

5. Web Applications without
offline mechanism

6. Offline Browser Support
Reference: http://caniuse.com/#feat=offline-apps

7. The Cache “manifest”
 Is a simple text file which tells the browser what to
Cache
 Is a list of all the resources intended for offline
accessibility
 can be located anywhere on your web server
 must be served with content type
“text/cache-manifest”
 the first line of manifest file is always
”CACHE MANIFEST”

8. The Cache “manifest”
Sample Manifest File
CACHE MANIFEST
/myStyles.css
/myScript.js
/centerImage.jpg
Suggested extension is “.appcache”

9. The Cache “manifest”
CACHE
NETWORK
FALLBACK
SETTINGS

10. The Cache “manifest”
1. CACHE
CACHE MANIFEST
# This is a comment
CACHE:
/css/main.css
/js/main.js
/img/logo.png
explicitly cached resources

11. The Cache “manifest”
2. NETWORK
CACHE MANIFEST
# This is a comment
CACHE:
/css/main.css
/js/main.js
/img/logo.png
NETWORK:
*
usually just "*“. Allow to access files through network if not
available in cache.

12. The Cache “manifest”
3. FALLBACK
CACHE MANIFEST
# This is a comment
CACHE:
/css/main.css
/js/main.js
/img/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html
Resource to load, if requested resource is not available offline
and network is not available.

13. The Cache “manifest”
4. SETTINGS
CACHE MANIFEST
# This is a comment
CACHE:
/css/main.css
/js/main.js
/img/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html
SETTINGS:
prefer-online | fast
Prefer-online:
Prefer access resources from
network when online
Fast:
Access files from cache if
available even when online.

14. The Cache “manifest”
CACHE MANIFEST
# This is a comment
CACHE: Default Section
/css/main.css
/js/main.js
/img/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html
SETTINGS:
prefer-online | fast
Four Sections of Cache Manifest

15. AppCache Events
obsolete
checking
downloading
noupdate
cached
progress
updateready
error

16. Demo Time 
http://www.spritecow.com/

17. My Credentials
• C# Corner MVP / Author / Speaker
• Microsoft Certified Professional
• Developer - .NET Stack
• twitter: @sunny_delhi
• email: sunnyk_sharma@outlook.com
• facebook: bit.ly/sunnykumar
Sunny Kumar

18. Do you have a
feedback?
http://goo.gl/bb83DL

19. Thank
You!