Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going Offline with HTML5

Eric DeLabar
October 01, 2011
Programming
8
1.2k

Going Offline with HTML5

An overview of the new offline and client-side storage mechanisms in HTML5 given at jQuery Conference 2011: Boston.

HTML5 introduces and standardizes a number of client-side caching and data storage mechanisms, specifically cache manifest, indexed database, and web storage. We'll take a tour of the available JavaScript APIs and explore their use in building on and offline web applications, increasing in-browser performance of online-only apps, and dealing with the inconsistent network connections common to mobile devices. We'll also cover diagnosing and debugging some common pitfalls, and of course dealing with browsers that don't support the new functionality.

Eric DeLabar

October 01, 2011
Tweet

Other Decks in Programming

See All in Programming
Ruby Function Composition
bkuhlmann
1
330
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
Git Rebase
bkuhlmann
11
1.6k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
"config" ってなんだ？ / What is "config"?
okashoi
0
240
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
雑に思考を整理する技術と効能
konifar
60
29k
Snowflakeで眠ったデータを起こそう！
estie
0
120
Let's learn code review
riofujimon
2
410
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
23
15k

Featured

See All Featured
GitHub's CSS Performance
jonrohan
1025
450k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Fireside Chat
paigeccino
21
2.6k
Happy Clients
brianwarren
92
6.4k
Embracing the Ebb and Flow
colly
80
4.1k
Faster Mobile Websites
deanohume
299
30k
GraphQLとの向き合い方2022年版
quramy
32
12k
A Modern Web Designer's Workflow
chriscoyier
689
190k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Statistics for Hackers
jakevdp
789
220k

Transcript

  1. Going Offline with HTML5 Eric DeLabar Trifecta Technologies, Inc. www.trifecta.com

    Saturday, October 1, 2011

  2. Offline Technologies Offline web applications (cache manifest) Web Storage API

    IndexedDB vs. Web SQL Database Saturday, October 1, 2011

  3. Offline Web Applications A.k.a Cache Manifest or App Cache Allows

    for long-term download and storage of site content for “offline” use. Cached files explicitly specified in a manifest file referenced in an HTML file. Cache is cleared and re-downloaded if manifest file changes. Saturday, October 1, 2011

  4. Manifest File Must start with CACHE MANIFEST All files must

    be specified or wildcarded NETWORK, CACHE, and FALLBACK sections specify how to handle files that require connectivity, should be cached, and can be replaced respectively Saturday, October 1, 2011

  5. manifest.appcache Sections CACHE: - default, specified files should be cached.

    NETWORK: - specified files should not be cached. FALLBACK: - specified files can be replaced with the specified file if the specified file is not or cannot be cached. Saturday, October 1, 2011

  6. Example manifest.appcache CACHE MANIFEST #version 123 /scripts.js /style.css NETWORK: /post.cgi

    FALLBACK: /dynamic-image.jpg /not-available.jpg Saturday, October 1, 2011

  7. HTML manifest attribute <!DOCTYPE HTML> <html manifest=”/manifest.appcache”> <body> ... </body>

    </html> Make sure your manifest file is being served with the correct content type: “text/cache-manifest” Saturday, October 1, 2011

  8. JavaScript Events checking - when the manifest file is found

    in the html noupdate - if a known manifest file has not changed downloading - if files will be downloaded or redownloaded. progress - fired periodically while files are downloading. cached - fired when all files are downloaded the first time. updateready - fired when all files are redownloaded and the cache can be swapped manually using window.applicationCache.swapCache(). error - fired if something (anything) went wrong. Saturday, October 1, 2011

  9. Debugging/Tools Manifesto (shameless plug): http:/ /manifesto.ericdelabar.com/ Cache Manifest Validator: http:/

    /manifest-validator.com/ Safari and Chrome’s developer tools list cached files in the “Resources” tab. ManifestR: http:/ /westciv.com/tools/manifestR/ Saturday, October 1, 2011

  10. Performance Trick CACHE MANIFEST #version 123 /scripts.js /style.css FALLBACK: /

    /offline.html NETWORK: * Saturday, October 1, 2011

  11. Browser Support IE 10 Firefox 4+ Safari 4+ Chrome 11+

    Opera 10.6+ iOS Safari 3.2+ Opera Mobile 11+ Android Browser 2.1+ Source: http:/ /caniuse.com Saturday, October 1, 2011

  12. Web Storage API Provides key-value mapping for long-term or session-length

    storage. Only works with string-to-string mappings Use JSON.stringify to store structured data in JSON format. Safari and Chrome’s developer tools allow you to browse the contents of your session and local storage. Saturday, October 1, 2011

  13. Session vs. Local Storage Session Storage data is available to

    any page from the same site in the same window and browser session. Local Storage data is available to any page from the same site in any window and across browser sessions. Saturday, October 1, 2011

  14. Shared API localStorage.setItem(“key”, “value”); var value = localStorage.getItem(“key”); localStorage.removeItem(“key”); localStorage.clear();

    localStorage[“key”] = “value”; var value = localStorage[“key”]; Saturday, October 1, 2011

  15. Feature Check Both sessionStorage and localStorage should be feature detected

    before use: if( window.sessionStorage ) {} if( window.localStorage ) {} Modernizr also supports detection: if( Modernizr.localstorage ) {} Saturday, October 1, 2011

  16. Performance Tricks Google and Bing store string representations of script

    and style blocks in local storage, the use a cookie to specify they’ve been downloaded and shouldn’t be re-downloaded. Subsequent downloads simply add the JavaScript and CSS to the DOM without the need to redownload. Saturday, October 1, 2011

  17. Browser Support IE 8+ Firefox 4+ Safari 4+ Chrome 11+

    Opera 10.6+ iOS Safari 3.2+ Opera Mobile 11+ Android Browser 2.1+ Source: http:/ /caniuse.com Saturday, October 1, 2011

  18. IndexedDB & Web SQL Database Two attempts to provide a

    searchable/indexable offline storage solution. Web SQL Database exposes a SQLite database to JavaScript. IndexedDB is essentially an indexed hash. IndexedDB API provides functionality with the necessity of a new language (SQL). Web SQL Database Spec is no longer maintained. Saturday, October 1, 2011

  19. Why Care About Web SQL Database? Currently works in Safari

    3.2+, Chrome 11+, Opera 10.6+, iOS Safari 3.2+, Opera Mobile 11+, Android Browser 2.1+. IndexedDB only works in Firefox 4+, Chrome 11+, and IE 10. If we really need it indexable storage, we can write to both APIs! (But that’s another talk....) Saturday, October 1, 2011

  20. Spearheaded by Mozilla. Provides in-order key retreival, efficient value searching,

    storage of duplicate values for a key. Often implemented with persistant B-tree data structures. Supports asynchronous and synchronous APIs. The Future is IndexedDB Saturday, October 1, 2011

  21. API - Open & Create DB var db; var oReq

    = window.indexedDB.open(“myDB”); oReq.onsuccess = function(event) { db = event.target.result; var vReq = db.setVersion(“1.0”); / / Only change structure in setVersion transaction vReq.onsuccess = function(e) { cReq = db.createObjectStore(“store”, “myKey”, true); } } https:/ /gist.github.com/1253537 Saturday, October 1, 2011

  22. API - Write Data var myObject = {...}; / /

    Some object var trans = db.transaction([“store”], IDBTransaction.READ_WRITE, 0 ); var store = trans.objectStore(“store”); var request = store.put(myObject); request.onsuccess = function(e) { console.log(“Successfully inserted!”); } https:/ /gist.github.com/1253537 Saturday, October 1, 2011

  23. API - Read Data var trans = db.transaction([“store”], IDBTransaction.READ_WRITE, 0

    ); var store = trans.objectStore(“store”); var keyRange = IDBKeyRange.lowerBound(0); var cursorRequest = store.openCursor(keyRange); request.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; console.log(“Object: ”,result.value); result.continue(); } https:/ /gist.github.com/1253537 Saturday, October 1, 2011

  24. Debugging? Good luck. Minor API differences between implementations. (e.g. event.result

    vs. event.target.result) Vendor Prefixes for some browser versions: mozIndexedDB webkitIndexedDB Saturday, October 1, 2011

  25. Final Thoughts... Start using now: Offline Web Apps Web Storage

    API (sessionStore, localStore) Give it some time: indexedDB Saturday, October 1, 2011

  26. Questions? Comments? Email: [email protected] Twitter: @edelabar Google Plus: Eric DeLabar

    Please rate my talk: http:/ /spkr8.com/t/8477 Saturday, October 1, 2011