Enviar pesquisa
Carregar
Peter lubbers-html5-offline-web-apps
•
6 gostaram
•
1,490 visualizações
Skills Matter
Seguir
Tecnologia
Design
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 70
Recomendados
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
robinzimmermann
Html5 Offline Applications
Html5 Offline Applications
Sunny Sharma
HTML5 Offline Web Application
HTML5 Offline Web Application
Allan Huang
Offline Web Apps
Offline Web Apps
Artem Tabalin
01 overview-and-setup
01 overview-and-setup
snopteck
ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
Mike Wilcox
Web Performance First Aid
Web Performance First Aid
Alan Seiden
Local Storage for Web Applications
Local Storage for Web Applications
Markku Laine
Recomendados
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
robinzimmermann
Html5 Offline Applications
Html5 Offline Applications
Sunny Sharma
HTML5 Offline Web Application
HTML5 Offline Web Application
Allan Huang
Offline Web Apps
Offline Web Apps
Artem Tabalin
01 overview-and-setup
01 overview-and-setup
snopteck
ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
Mike Wilcox
Web Performance First Aid
Web Performance First Aid
Alan Seiden
Local Storage for Web Applications
Local Storage for Web Applications
Markku Laine
HTTP/2 Comes to Java
HTTP/2 Comes to Java
David Delabassee
Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
boxuno
WordPress Development Tools and Best Practices
WordPress Development Tools and Best Practices
Danilo Ercoli
Mobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPress
Danilo Ercoli
Improve WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of code
Danilo Ercoli
Top 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud Developers
Brian Huff
HTML 5
HTML 5
Rajan Pal
Codestrong 2012 breakout session introduction to mobile web and best practices
Codestrong 2012 breakout session introduction to mobile web and best practices
Axway Appcelerator
AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013
Andrew Khoury
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
AEM HUB
Challenges of Simple Documents: When Basic isn't so Basic - Cassandra Targett...
Challenges of Simple Documents: When Basic isn't so Basic - Cassandra Targett...
Lucidworks
Switching to Oracle Document Cloud
Switching to Oracle Document Cloud
Brian Huff
Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!
Brian Huff
1 app 2 developers 3 servers
1 app 2 developers 3 servers
Mark Myers
My site is slow
My site is slow
hernanibf
OWA And SharePoint Integration
OWA And SharePoint Integration
jems7
Social Connections 12 - IBM Connections Adminblast
Social Connections 12 - IBM Connections Adminblast
Nico Meisenzahl
Webinar: IBM Connections Adminblast
Webinar: IBM Connections Adminblast
Nico Meisenzahl
The things we found in your website
The things we found in your website
hernanibf
Best and worst practices deploying IBM Connections
Best and worst practices deploying IBM Connections
LetsConnect
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
Commit University
HTML5: the new frontier of the web
HTML5: the new frontier of the web
Ivano Malavolta
Mais conteúdo relacionado
Mais procurados
HTTP/2 Comes to Java
HTTP/2 Comes to Java
David Delabassee
Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
boxuno
WordPress Development Tools and Best Practices
WordPress Development Tools and Best Practices
Danilo Ercoli
Mobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPress
Danilo Ercoli
Improve WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of code
Danilo Ercoli
Top 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud Developers
Brian Huff
HTML 5
HTML 5
Rajan Pal
Codestrong 2012 breakout session introduction to mobile web and best practices
Codestrong 2012 breakout session introduction to mobile web and best practices
Axway Appcelerator
AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013
Andrew Khoury
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
AEM HUB
Challenges of Simple Documents: When Basic isn't so Basic - Cassandra Targett...
Challenges of Simple Documents: When Basic isn't so Basic - Cassandra Targett...
Lucidworks
Switching to Oracle Document Cloud
Switching to Oracle Document Cloud
Brian Huff
Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!
Brian Huff
1 app 2 developers 3 servers
1 app 2 developers 3 servers
Mark Myers
My site is slow
My site is slow
hernanibf
OWA And SharePoint Integration
OWA And SharePoint Integration
jems7
Social Connections 12 - IBM Connections Adminblast
Social Connections 12 - IBM Connections Adminblast
Nico Meisenzahl
Webinar: IBM Connections Adminblast
Webinar: IBM Connections Adminblast
Nico Meisenzahl
The things we found in your website
The things we found in your website
hernanibf
Best and worst practices deploying IBM Connections
Best and worst practices deploying IBM Connections
LetsConnect
Mais procurados
(20)
HTTP/2 Comes to Java
HTTP/2 Comes to Java
Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
WordPress Development Tools and Best Practices
WordPress Development Tools and Best Practices
Mobile Hybrid Development with WordPress
Mobile Hybrid Development with WordPress
Improve WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of code
Top 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud Developers
HTML 5
HTML 5
Codestrong 2012 breakout session introduction to mobile web and best practices
Codestrong 2012 breakout session introduction to mobile web and best practices
AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Challenges of Simple Documents: When Basic isn't so Basic - Cassandra Targett...
Challenges of Simple Documents: When Basic isn't so Basic - Cassandra Targett...
Switching to Oracle Document Cloud
Switching to Oracle Document Cloud
Deep Dive: Oracle WebCenter Content Tips and Traps!
Deep Dive: Oracle WebCenter Content Tips and Traps!
1 app 2 developers 3 servers
1 app 2 developers 3 servers
My site is slow
My site is slow
OWA And SharePoint Integration
OWA And SharePoint Integration
Social Connections 12 - IBM Connections Adminblast
Social Connections 12 - IBM Connections Adminblast
Webinar: IBM Connections Adminblast
Webinar: IBM Connections Adminblast
The things we found in your website
The things we found in your website
Best and worst practices deploying IBM Connections
Best and worst practices deploying IBM Connections
Semelhante a Peter lubbers-html5-offline-web-apps
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
Commit University
HTML5: the new frontier of the web
HTML5: the new frontier of the web
Ivano Malavolta
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
Peter Lubbers
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Peter Lubbers
Html5 Application Security
Html5 Application Security
chuckbt
Joomla
Joomla
Intan Nadhirah
Joomla
Joomla
Intan Nadhirah
Html5
Html5
Zahin Omar Alwa
HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)
robinzimmermann
Apache Camel Introduction
Apache Camel Introduction
Claus Ibsen
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
brent bucci
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
Peter Lubbers
Html5 Flyover
Html5 Flyover
Skills Matter
WebSocket Perspectives and Vision for the Future
WebSocket Perspectives and Vision for the Future
Frank Greco
Datasets, APIs, and Web Scraping
Datasets, APIs, and Web Scraping
Damian T. Gordon
Html5
Html5
Alaa Abdelhamid
2010 code camp rest for the rest of us
2010 code camp rest for the rest of us
Ken Yagen
Share point development 101
Share point development 101
Becky Bertram
E gov security_tut_session_4_lab
E gov security_tut_session_4_lab
Mustafa Jarrar
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
Wesley Hales
Semelhante a Peter lubbers-html5-offline-web-apps
(20)
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
HTML5: the new frontier of the web
HTML5: the new frontier of the web
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Html5 Application Security
Html5 Application Security
Joomla
Joomla
Joomla
Joomla
Html5
Html5
HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)
Apache Camel Introduction
Apache Camel Introduction
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
Html5 Flyover
Html5 Flyover
WebSocket Perspectives and Vision for the Future
WebSocket Perspectives and Vision for the Future
Datasets, APIs, and Web Scraping
Datasets, APIs, and Web Scraping
Html5
Html5
2010 code camp rest for the rest of us
2010 code camp rest for the rest of us
Share point development 101
Share point development 101
E gov security_tut_session_4_lab
E gov security_tut_session_4_lab
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
Mais de Skills Matter
5 things cucumber is bad at by Richard Lawrence
5 things cucumber is bad at by Richard Lawrence
Skills Matter
Patterns for slick database applications
Patterns for slick database applications
Skills Matter
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
Skills Matter
Oscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheim
Skills Matter
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Skills Matter
Cukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc ian dees on elixir, erlang, and cucumberl
Skills Matter
Cukeup nyc peter bell on getting started with cucumber.js
Cukeup nyc peter bell on getting started with cucumber.js
Skills Matter
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Skills Matter
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Skills Matter
Progressive f# tutorials nyc don syme on keynote f# in the open source world
Progressive f# tutorials nyc don syme on keynote f# in the open source world
Skills Matter
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Skills Matter
Dmitry mozorov on code quotations code as-data for f#
Dmitry mozorov on code quotations code as-data for f#
Skills Matter
A poet's guide_to_acceptance_testing
A poet's guide_to_acceptance_testing
Skills Matter
Russ miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-dive
Skills Matter
Serendipity-neo4j
Serendipity-neo4j
Skills Matter
Simon Peyton Jones: Managing parallelism
Simon Peyton Jones: Managing parallelism
Skills Matter
Plug 20110217
Plug 20110217
Skills Matter
Lug presentation
Lug presentation
Skills Matter
I went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_t
Skills Matter
Plug saiku
Plug saiku
Skills Matter
Mais de Skills Matter
(20)
5 things cucumber is bad at by Richard Lawrence
5 things cucumber is bad at by Richard Lawrence
Patterns for slick database applications
Patterns for slick database applications
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
Oscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheim
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Cukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc peter bell on getting started with cucumber.js
Cukeup nyc peter bell on getting started with cucumber.js
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc don syme on keynote f# in the open source world
Progressive f# tutorials nyc don syme on keynote f# in the open source world
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Dmitry mozorov on code quotations code as-data for f#
Dmitry mozorov on code quotations code as-data for f#
A poet's guide_to_acceptance_testing
A poet's guide_to_acceptance_testing
Russ miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-dive
Serendipity-neo4j
Serendipity-neo4j
Simon Peyton Jones: Managing parallelism
Simon Peyton Jones: Managing parallelism
Plug 20110217
Plug 20110217
Lug presentation
Lug presentation
I went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_t
Plug saiku
Plug saiku
Último
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Roshan Dwivedi
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
V3cube
Último
(20)
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
Peter lubbers-html5-offline-web-apps
1.
Peter Lubbers, Kaazing HTML5 Offline
Web Applications
2.
Kaazing • Enterprise-Ready HTML5
WebSocket Gateway enabling massively scalable, real-time web applications • HTML5 and WebSocket Training (Yes, we’re hiring!) Skills Matter (Organization) • Cutting-Edge Open Source Training (London) Apress (Raffle Prizes) • Books for professionals by professionals Copyright © 2010 - Kaazing Corporation. All rights reserved. Thanks to Our Sponsors!
3.
about:peterlubbers Copyright © 2010
- Kaazing Corporation. All rights reserved.
4.
• About Offline
Web Apps • Creating Offline Web Apps • Server Configuration • Tips, Tricks, and Q&A Copyright © 2010 - Kaazing Corporation. All rights reserved.
5.
Offline Web Applications •
New HTML5 Specification • Also known as Application Cache (AppCache) • WHATWG: http://www.whatwg.org/specs/web- apps/current-work/multipage/offline.html#offline • W3C: http://dev.w3.org/html5/spec/offline.html#offline • Spec is primarily aimed at browser developers to ensure interoperability… Copyright © 2010 - Kaazing Corporation. All rights reserved.
6.
Data for the
current section. The format that data lines must take depends on the current section. When the current section is the explicit section, data lines must consist of zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, a valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters. When the current section is the fallback section, data lines must consist of zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, a valid URL identifying a resource other than the manifest itself, one or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, another valid URLidentifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters. When the current section is the online whitelist section, data lines must consist of zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, either a single U+002A ASTERISK character (*) or a valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters… Copyright © 2010 - Kaazing Corporation. All rights reserved. WHATWG spec The Spec…
7.
And the Slightly Simpler
Version… Copyright © 2010 - Kaazing Corporation. All rights reserved. Sweet! I’m offline! How easy was that!
8.
Offline Web Applications •
Allow you to keep using web apps and sites without a network connection (for example, on an airplane or in rural areas and sub Copyright © 2010 - Kaazing Corporation. All rights reserved.
9.
Offline without AppCache Copyright
© 2010 - Kaazing Corporation. All rights reserved. Noooooooo!
10.
Traditional Caching • Cache
duration can be controlled through Web Server’s Cache HTTP headers o For example, in Apache’s .htaccess file (see example on next slide) • Not reliable for offline use • Browser caching settings also apply Copyright © 2010 - Kaazing Corporation. All rights reserved.
11.
<IfModule mod_expires.c> Header set
cache-control: public ExpiresActive on # your document html ExpiresByType text/html "access" # rss feed ExpiresByType application/rss+xml "access plus 1 hour" # favicon (cannot be renamed) ExpiresByType image/vnd.microsoft.icon "access plus 1 week" # media: images, video, audio ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" # webfonts ExpiresByType font/ttf "access plus 1 month" ExpiresByType font/woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" # css and javascript ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" </IfModule> Copyright © 2010 - Kaazing Corporation. All rights reserved. .htaccess File Web Server Caching Settings Source: Paul Irish & Divya Manian http://html5boilerplate.com/
12.
Offline Web Applications •
Allow you to cache pages that have not been visited • Browsers cache data in an Application Cache • Once resources are cached, you can access them very quickly (without a network request) • HTML5 also allows online and offline detection • Using offline mechanism allows you to easily prefetch site resources (speeds up pages, but uses bandwidth) • Pages served using TLS (SSL) can also be included to work offline Copyright © 2010 - Kaazing Corporation. All rights reserved.
13.
DemoCopyright © 2010
- Kaazing Corporation. All rights reserved. Files: http://bit.ly/9pJ1Zq or: ech.kaazing.com/training/offline/peter-lubbers-html5-offline-web-apps-presentation-code.zip
14.
Browser Support for Offline
Web Applications Copyright © 2010 - Kaazing Corporation. All rights reserved. Source: http://caniuse.com/ (the best site for checking browser support for HTML5 features) Hi-res browser logos: http://paulirish.com/2010/high-res-browser-icons/
15.
Offline Emulation • HTML5
Gears Project by Brad Neuberg, Google: http://code.google.com/p/html5-gears/ Copyright © 2010 - Kaazing Corporation. All rights reserved.
16.
Developing Offline Web Applications Copyright
© 2010 - Kaazing Corporation. All rights reserved.
17.
CACHE MANIFEST # manifest
version 1.0.1 # Files to cache index.html cache.html html5.css image1.jpg img/foo.gif http://www.example.com/styles.css # Use from network if available NETWORK: network.html # Fallback content FALLBACK: / fallback.html Copyright © 2010 - Kaazing Corporation. All rights reserved. Manifest File The Manifest File
18.
<!DOCTYPE html> <html manifest="offline.manifest"> <head> <title>HTML5
Application Cache</title> Copyright © 2010 - Kaazing Corporation. All rights reserved. HTML Using a Manifest File in HTML • Reference the manifest file: o <name>.manifest – it must match the name of the manifest file o Add as attribute to HTML element
19.
Browser Notification • Users
may have to opt in (similar to Geolocation) • Configurable and not default in all browsers Copyright © 2010 - Kaazing Corporation. All rights reserved.
20.
The Manifest File •
Manifest file has three sections: o CACHE: o NETWORK: o FALLBACK: • Multiple sections (of the same kind) are allowed • First line must be CACHE MANIFEST • Comments start with # (don’t use inline comments) • An application cache is created using the manifest’s complete URL (you can have multiple manifest files in a site) Copyright © 2010 - Kaazing Corporation. All rights reserved.
21.
CACHE: Section • To
cache files in the AppCache, include them in the CACHE: section or list files directly under CACHE MANIFEST (default is to cache files) • Add one file per line (full name required) • Files can contain path information or even be an absolute URL • Application caches can’t include fragment identifiers (#) or wildcards • Case sensitive • Files that reference the manifest file will automatically be cached Copyright © 2010 - Kaazing Corporation. All rights reserved.
22.
NETWORK: Section • Also
called the online whitelist • Files listed in this section listed will not be loaded from the cache, but retrieved over the network (from the server) if online • You can specify “*” o Sets the online whitelist wildcard flag to “open” o Access to resources on other origins will not be blocked Copyright © 2010 - Kaazing Corporation. All rights reserved.
23.
FALLBACK: Section • Provides
a way to fall back if resources cannot be found • Specify a fallback namespace and a fallback page for that namespace: / fallback.html • You can only list one fallback namespace Copyright © 2010 - Kaazing Corporation. All rights reserved.
24.
Initial Cache Sequence 1.
Access the page (with the manifest attribute) 2. Page is loaded and page’s resources are loaded (from the server) 3. Manifest is encountered and parsed, all files flagged for caching are loaded in the background 4. Go offline (regular caching is also in effect, so watch for false positives) 5. Access a CACHE: resource (loads from cache) 6. Access a NETWORK resource (FALLBACK content is served, files will be available if you go back online) Copyright © 2010 - Kaazing Corporation. All rights reserved.
25.
Step 1: First
Page Load Copyright © 2010 - Kaazing Corporation. All rights reserved.
26.
Step 2: Going
Offline Copyright © 2010 - Kaazing Corporation. All rights reserved.
27.
Step 3: Offline
Web Page Copyright © 2010 - Kaazing Corporation. All rights reserved.
28.
Step 4: Network
Page Copyright © 2010 - Kaazing Corporation. All rights reserved.
29.
Consecutive Load Sequence
1 1. Go back to online mode 2. Change the cache.html page on the server 3. Reload the cache.html page in the browser 4. The (old) page loads from the application cache (The changes do not appear!) 5. The browser checks to see if the referenced manifest file has been updated and does nothing since it has not been modified Copyright © 2010 - Kaazing Corporation. All rights reserved.
30.
Consecutive Load Sequence
2 6. Update the manifest file (make a trivial change, like a version number comment update) 7. Reload the cache page in the browser 8. The (old) page loads from the application cache (This is always the first action from the browser, so the changes still don’t appear!) 9. The browser checks to see if the referenced manifest has been updated and since it has, it downloads all the files flagged to be cached 10.The new files are now in the application cache, reload the page once more to see the latest changes Copyright © 2010 - Kaazing Corporation. All rights reserved.
31.
// Simple method if(window.applicationCache)
{ // this browser supports offline web apps } //Or just use Modernizr (source: http://www.modernizr.com/) if (Modernizr.applicationcache){ // We have offline web app support! Continue operation, // indicating to the user that the app will sync up once they get back online } else { // No offline support, show errors if the user goes offline } Copyright © 2010 - Kaazing Corporation. All rights reserved. JavaScript Checking for Browser Support
32.
Copyright © 2010
- Kaazing Corporation. All rights reserved. Checking for Online and Offline Events window.addEventListener("online", function(e) { log("Application is now online"); }, true); window.addEventListener("offline", function(e) { log("Application is now offline"); }, true); JavaScript
33.
Using Web Pages
Offline • Test offline pages using the “Work Offline” feature if available (Not in Chrome and Safari) • Disconnect your computer (does not work for localhost) • Watch out for false positives (regular browser caching) Copyright © 2010 - Kaazing Corporation. All rights reserved. Opera Firefox
34.
Working Offline Browser Work
Offline Chrome Disconnect from the network Firefox File > Work Offline Safari Disconnect from the network Opera File > Work Offline Internet Explorer N/A (Does not support App Cache) Copyright © 2010 - Kaazing Corporation. All rights reserved.
35.
ApplicationCache Events • The
window.applicationCache object fires several events related to the state of the cache • window.applicationCache.status is a numerical property indicating the state of the cache o 0 UNCACHED o 1 IDLE o 2 CHECKING o 3 DOWNLOADING o 4 UPDATEREADY o 5 OBSOLETE Copyright © 2010 - Kaazing Corporation. All rights reserved.
36.
Event Callback Attributes Copyright
© 2010 - Kaazing Corporation. All rights reserved. Callback Attribute Event onchecking CHECKING ondownloading DOWNLOADING onupdateready UPDATEREADY onobsolete OBSOLETE oncached CACHED onerror ERROR onnoupdateready NOUPDATE onprogress PROGRESS
37.
Copyright © 2010
- Kaazing Corporation. All rights reserved. Checking App Cache Status window.applicationCache.onchecking = function(e) { log("Checking for application update"); } window.applicationCache.onnoupdate = function(e) { log("No application update found"); } window.applicationCache.onupdateready = function(e) { log("Application update ready"); window.applicationCache.swapCache(); } window.applicationCache.onobsolete = function(e) { log("Application obsolete"); } JavaScript Forces correct behavior in some browsers
38.
Copyright © 2010
- Kaazing Corporation. All rights reserved. Checking App Cache Status window.applicationCache.ondownloading = function(e) { log("Downloading application update"); } window.applicationCache.oncached = function(e) { log("Application cached"); } window.applicationCache.onerror = function(e) { log("Application cache error"); } window.applicationCache.onprogress = function(e) { log("Application Cache progress"); } JavaScript
39.
Copyright © 2010
- Kaazing Corporation. All rights reserved.
40.
Serving the Manifest
File • Manifest files have the MIME type text/cache-manifest • Most web servers need to be configured to serve the manifest files correctly o Served correctly by default by Python's SimpleHTTPServer on Ubuntu Linux o For Python on Windows/Mac OS X or Apache, update the configuration files with the MIME type • Verify how the manifest file is served by using network or curl –I http://offline.example.com/offline.manifest Copyright © 2010 - Kaazing Corporation. All rights reserved. Source: Introducing HTML5, Offline Chapter, Bruce Lawson and Remy Sharp
41.
# Apache mimetype
configuration # APACHE_HOME/conf/mime.types text/cache-manifest manifest Copyright © 2010 - Kaazing Corporation. All rights reserved. mime.types File Apache Configuration # Apache mimetype configuration AddType text/cache-manifest .manifest .htaccess File Or:
42.
# Cache settings
for the manifest file <IfModule mod_expires.c> Header set cache-control: public ExpiresActive on . . . # Prevent receiving a cached manifest ExpiresByType text/cache-manifest "access plus 0 seconds" . . . </IfModule> Copyright © 2010 - Kaazing Corporation. All rights reserved. .htaccess File Apache Configuration Source: Introducing HTML5, Offline Chapter, Bruce Lawson and Remy Sharp
43.
Copyright © 2010
- Kaazing Corporation. All rights reserved. mimetypes.py File Python Configuration Windows: PYTHON_HOME/Lib/mimetypes.py, for example: C:Python26Libmimetypes.py Mac: PYTHON_HOME/Lib/mimetypes.py, for example: /System/Library/Frameworks/Python.framework/Versions/2.6/lib/ python2.6/mimetypes.py Important: If you do not have a mimetypes.py file, you can use mimetypes.py from the offline/ mac-config-file example folder. If you already have a compiled mimetypes.pyc file in the same directory, ensure that the permissions on this file are changed to read/write. When you start Python with the new file, Python compiles it and generates or overwrites the mimetypes.pyc. # Python SimpleHTTPServer mimetype Configuration # python –m SimpleHTTPServer 9999) '.manifest' : 'text/cache-manifest',
44.
Copyright © 2010
- Kaazing Corporation. All rights reserved. Microsoft IIS Configuration
45.
Copyright © 2010
- Kaazing Corporation. All rights reserved. Offline Web Applications Tips and Tricks
46.
Debugging Offline Cache Copyright
© 2010 - Kaazing Corporation. All rights reserved. Chrome: Chrome Developer Tools > Storage Note: Not available in Safari Web Inspector yet…
47.
Accessing Offline Resources Copyright ©
2010 - Kaazing Corporation. All rights reserved.
48.
Accessing the Offline
Cache Copyright © 2010 - Kaazing Corporation. All rights reserved. Firefox: about:cache
49.
Accessing the Offline
Cache Copyright © 2010 - Kaazing Corporation. All rights reserved. Firefox SQLite Manager Add-on: https://addons.mozilla.org/en-US/firefox/addon/5817/
50.
Accessing the Offline
Cache Copyright © 2010 - Kaazing Corporation. All rights reserved. File System Access
51.
Browser Offline Cache Settings and Clearing
the Cache Copyright © 2010 - Kaazing Corporation. All rights reserved.
52.
Offline Cache Settings Copyright
© 2010 - Kaazing Corporation. All rights reserved. Firefox: Tools > Options (Preferences on Mac OS X) > Advanced > Network
53.
Offline Cache Settings Copyright
© 2010 - Kaazing Corporation. All rights reserved. Opera: opera:config
54.
Clearing the Cache Copyright
© 2010 - Kaazing Corporation. All rights reserved. Chrome: Settings Menu > Tools > Clear Browsing Data Opera: Tools > Preferences > Storage
55.
Clearing the Cache Copyright
© 2010 - Kaazing Corporation. All rights reserved. Firefox: Tools > Clear Recent History Safari: Settings Menu > Reset Safari
56.
Clearing the Cache Browser
Steps to Clear the Cache Chrome Settings Menu > Tools > Clear Browsing Data Firefox Tools > Clear Recent History (and Tools > Options (Preferences on Mac OS X) > Advanced > Network > Remove for app cache) Safari Settings Menu > Reset Safari Opera Tools > Preferences > Storage (+ Tools > Clear Private Data) Internet Explorer Coming soon… Copyright © 2010 - Kaazing Corporation. All rights reserved. Note: Close any offline pages before you do this to avoid problems
57.
Private Browsing • Most
private browsing modes prevent writing to application cache o For example, Safari’s Private Browsing mode, and Chrome’s Incognito Mode Copyright © 2010 - Kaazing Corporation. All rights reserved.
58.
Security Considerations • Others
browsing the same site (on the same machine in the same browser) can potentially access your cached data (data is cached based on the manifest file URL) • Do not store sensitive, personal data in the application cache Copyright © 2010 - Kaazing Corporation. All rights reserved.
59.
Best Practices • Manifest
errors are fatal (case sensitive entries) • If you are adding and removing (lots of files) files, remember to update the manifest file o Use a predeployment script o Use a version Comment in the manifest file • Host your site on different domain names o You can do this on your local machine by hacking the hosts file (see example on the next slide) o Windows:WINDOWSsystem32driversetchos ts o UNIX: /etc/hosts • To see if files are requested, watch the server log Copyright © 2010 - Kaazing Corporation. All rights reserved.
60.
Checking Server Access Copyright
© 2010 - Kaazing Corporation. All rights reserved.
61.
# For example 127.0.0.1
localhost 127.0.0.1 offline0.example.com 127.0.0.1 offline1.example.com Copyright © 2010 - Kaazing Corporation. All rights reserved. hosts file hosts File for Testing
62.
Disk Quota • Don’t
assume success and check for errors o Example in Chrome: Application Cache Error event: Failed to commit new cache to storage, would exceed quota • In the future, browsers will hopefully have graceful quota upgrade mechanisms like Opera’s for Local Storage Copyright © 2010 - Kaazing Corporation. All rights reserved.
63.
Copyright © 2010
- Kaazing Corporation. All rights reserved. Works Well With HTML5 Web Storage… if (navigator.onLine) { //Send updates to server } else { window.localStorage.myLocalKey = ‘Some Data'; } } JavaScript
64.
CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * Copyright
© 2010 - Kaazing Corporation. All rights reserved. Manifest File Cache-As-You-Go • If you add the manifest attribute, files will be added to the cache implicitly • Subresources and dependencies may not be loaded properly (CSS, JS, etc.)
65.
This work is
licensed under a Creative Commons Attribution 3.0 License.
66.
Kaazing Jobs: http://www.kaazing.com/about/careers.html E-mail: peter.lubbers@kaazing.com Twitter:
@peterlubbers LinkedIN: Peter Lubbers COUPON: SKILLSMATTERNZHN Copyright © 2010 - Kaazing Corporation. All rights reserved.
67.
Resources • WHATWG Offline
Web Apps spec: http://www.whatwg.org/specs/web-apps/current- work/multipage/offline.html#offline • W3C Offline Web Apps spec: http://dev.w3.org/html5/spec/offline.html#offline • Offline example source files: http://bit.ly/9pJ1Zq • Pro HTML5 Programming, Offline chapter, Peter Lubbers, Brian Albers, and Frank Salim • Introducing HTML5, Offline chapter, Bruce Lawson and Remy Sharp Copyright © 2010 - Kaazing Corporation. All rights reserved.
68.
HTML5 Training Discount Copyright
© 2010 - Kaazing Corporation. All rights reserved. E-mail: training@kaazing.com
69.
Copyright © 2010
Kaazing Corporation, All rights reserved. All materials, including labs and other handouts are property of Kaazing Corporation. Except when expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any part of this training material, in any form, or by any means. Copyright © 2010 - Kaazing Corporation. All rights reserved.