SlideShare a Scribd company logo
HTML5Offline Web Applications Wilson Chen
Agenda Introduction Browser Support Browser - applicationCache API Checking for Browser Support Offline/Online Manifest Files applicationCache
Introduction What is Offline Application? offline cache Why is it important?
Advantages Offline browsing Speed Reduce loading on server
Browser support http://caniuse.com/#search=offline
How to check? Check if window.applictionCache exists or not if(window.applicationCache){ 	// the browser supports } else { 	// it doesn’t }
Offline / Online Navigator.onLine is a boolean property to indicate online or not online/offline events of window object
Manifest file manifest lists resoures which browsers will cache for offline use Content-type is text/cache-manifest
Manifest file CACHE MANIFEST CACHE Serve these files from applicationCache, even if online NETWORK Alway fetch these files from internet FALLBACK Alternate paths to replace resources that can’t fetched
applicationCache API applicationCache.update() Trigger cache update applicationCache.status
applicationCache API applicationCache event
applicationCache API- checking event Dispatched when the user agent is checking for an updatem or attempting to donwload the manifst for the first time. This is always the first event in the sequence
applicationCache API- downloading event Dispatched when the user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.
applicationCache API- updateready event Dispatched when The resources listed in the manifest have been newly redownloaded. swapCache() to swith to the new cache
applicationCache API- obsolete event Dispatched when The manifest was found to have become a 404 page or 410 page, so the application cache is being deleted
applicationCache API- cached event Dispatched when the resources listed in the manifest have been downloaded, and the application is now cached.
applicationCache API- error event Dispatched when The manifest was a 404 or 410 page, so the attempt to cache the appliction has been absorted The manifest hadn’t changed, but the page referencing the manifest failed to download properly A fatal error occurred while fetching the resources listed in the manifest
applicationCache API- noupdate event Dispatched when the manifest hadn’t changed
applicationCache API- progress event Dispatched when the user agent is downloading resources listed by the manifest
Q&A

More Related Content

What's hot

Asp.net event handler
Asp.net event handlerAsp.net event handler
Asp.net event handler
Sireesh K
 
Asp.net page lifecycle
Asp.net page lifecycleAsp.net page lifecycle
Asp.net page lifecycle
KhademulBasher
 
ASP.Net Presentation Part1
ASP.Net Presentation Part1ASP.Net Presentation Part1
ASP.Net Presentation Part1
Neeraj Mathur
 
Http pipeline
Http pipelineHttp pipeline
Http pipeline
icubesystem
 
Http pipeline
Http pipelineHttp pipeline
Http pipeline
vrluckyin
 
Page life cycle IN ASP.NET
Page life cycle IN ASP.NETPage life cycle IN ASP.NET
Page life cycle IN ASP.NET
Sireesh K
 
Service objects in Rails tests - factory_girl replacement
Service objects in Rails tests - factory_girl replacementService objects in Rails tests - factory_girl replacement
Service objects in Rails tests - factory_girl replacement
Andrzej Krzywda
 
Cloud Networking
Cloud NetworkingCloud Networking
Cloud Networking
Kirthana Palaniswamy
 
Dev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life CycleDev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life Cycle
Jay Harris
 
Web Quick Start: Exploring the Web Tier
Web Quick Start: Exploring the Web TierWeb Quick Start: Exploring the Web Tier
Web Quick Start: Exploring the Web Tier
Alfresco Software
 
ASP.NET Page Life Cycle
ASP.NET Page Life CycleASP.NET Page Life Cycle
ASP.NET Page Life Cycle
Abhishek Sur
 
HTBYOOFIYRHT RubyConf
HTBYOOFIYRHT RubyConfHTBYOOFIYRHT RubyConf
HTBYOOFIYRHT RubyConf
Sandy Vanderbleek
 
Java spring mysql without hibernate(2) (1)
Java spring mysql without hibernate(2) (1)Java spring mysql without hibernate(2) (1)
Java spring mysql without hibernate(2) (1)
AmedJacobReza
 
The New & Improved Confluence Server and Data Center
The New & Improved Confluence Server and Data CenterThe New & Improved Confluence Server and Data Center
The New & Improved Confluence Server and Data Center
Atlassian
 
Laravel 5.4
Laravel 5.4 Laravel 5.4
Laravel 5.4
Nisha Patel
 

What's hot (15)

Asp.net event handler
Asp.net event handlerAsp.net event handler
Asp.net event handler
 
Asp.net page lifecycle
Asp.net page lifecycleAsp.net page lifecycle
Asp.net page lifecycle
 
ASP.Net Presentation Part1
ASP.Net Presentation Part1ASP.Net Presentation Part1
ASP.Net Presentation Part1
 
Http pipeline
Http pipelineHttp pipeline
Http pipeline
 
Http pipeline
Http pipelineHttp pipeline
Http pipeline
 
Page life cycle IN ASP.NET
Page life cycle IN ASP.NETPage life cycle IN ASP.NET
Page life cycle IN ASP.NET
 
Service objects in Rails tests - factory_girl replacement
Service objects in Rails tests - factory_girl replacementService objects in Rails tests - factory_girl replacement
Service objects in Rails tests - factory_girl replacement
 
Cloud Networking
Cloud NetworkingCloud Networking
Cloud Networking
 
Dev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life CycleDev Basics: The ASP.NET Page Life Cycle
Dev Basics: The ASP.NET Page Life Cycle
 
Web Quick Start: Exploring the Web Tier
Web Quick Start: Exploring the Web TierWeb Quick Start: Exploring the Web Tier
Web Quick Start: Exploring the Web Tier
 
ASP.NET Page Life Cycle
ASP.NET Page Life CycleASP.NET Page Life Cycle
ASP.NET Page Life Cycle
 
HTBYOOFIYRHT RubyConf
HTBYOOFIYRHT RubyConfHTBYOOFIYRHT RubyConf
HTBYOOFIYRHT RubyConf
 
Java spring mysql without hibernate(2) (1)
Java spring mysql without hibernate(2) (1)Java spring mysql without hibernate(2) (1)
Java spring mysql without hibernate(2) (1)
 
The New & Improved Confluence Server and Data Center
The New & Improved Confluence Server and Data CenterThe New & Improved Confluence Server and Data Center
The New & Improved Confluence Server and Data Center
 
Laravel 5.4
Laravel 5.4 Laravel 5.4
Laravel 5.4
 

Similar to Html5 offline

Html5 cache mechanism & local storage
Html5 cache mechanism & local storageHtml5 cache mechanism & local storage
Html5 cache mechanism & local storage
Sendhil Kumar Kannan
 
Taking Web Applications Offline
Taking Web Applications OfflineTaking Web Applications Offline
Taking Web Applications Offline
Matt Casto
 
Offline First with Service Worker
Offline First with Service WorkerOffline First with Service Worker
Offline First with Service Worker
Muhammad Samu
 
Using html5 to build offline applications
Using html5 to build offline applicationsUsing html5 to build offline applications
Using html5 to build offline applications
Woody Pewitt
 
M S Ajax Client Life Cycle Events
M S  Ajax  Client  Life  Cycle  EventsM S  Ajax  Client  Life  Cycle  Events
M S Ajax Client Life Cycle Events
51 lecture
 
HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web Application
Allan Huang
 
WordCamp Bucharest 2017
WordCamp Bucharest 2017WordCamp Bucharest 2017
WordCamp Bucharest 2017
Alexandra Anghel
 
MidwestPHP 2016 - Adventures in Laravel 5
MidwestPHP 2016 - Adventures in Laravel 5 MidwestPHP 2016 - Adventures in Laravel 5
MidwestPHP 2016 - Adventures in Laravel 5
Joe Ferguson
 
Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...
Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...
Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...
Amazon Web Services
 
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Maxime Czetwertynski
 
A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...
jason clark
 
2310 b 15
2310 b 152310 b 15
2310 b 15
Krazy Koder
 
2310 b 15
2310 b 152310 b 15
2310 b 15
Krazy Koder
 
AWS Tech Summit - Berlin 2011 - Running Java Applications on AWS
AWS Tech Summit - Berlin 2011 - Running Java Applications on AWSAWS Tech Summit - Berlin 2011 - Running Java Applications on AWS
AWS Tech Summit - Berlin 2011 - Running Java Applications on AWS
Amazon Web Services
 
Laravel 5 New Features
Laravel 5 New FeaturesLaravel 5 New Features
Laravel 5 New Features
Joe Ferguson
 
Progressive Web Applications - The Next Gen Web Technologies
Progressive Web Applications - The Next Gen Web TechnologiesProgressive Web Applications - The Next Gen Web Technologies
Progressive Web Applications - The Next Gen Web Technologies
GeekNightHyderabad
 
Charla desarrollo de apps con sharepoint y office 365
Charla   desarrollo de apps con sharepoint y office 365Charla   desarrollo de apps con sharepoint y office 365
Charla desarrollo de apps con sharepoint y office 365
Luis Valencia
 
Running Microservices on AWS Elastic Beanstalk
Running Microservices on AWS Elastic BeanstalkRunning Microservices on AWS Elastic Beanstalk
Running Microservices on AWS Elastic Beanstalk
Amazon Web Services
 
Progressive Web Apps 101
Progressive Web Apps 101Progressive Web Apps 101
Progressive Web Apps 101
Muhammad Samu
 
Spring RestFul Web Services - CRUD Operations Example
Spring RestFul Web Services - CRUD Operations ExampleSpring RestFul Web Services - CRUD Operations Example
Spring RestFul Web Services - CRUD Operations Example
Nikhil Bhalwankar
 

Similar to Html5 offline (20)

Html5 cache mechanism & local storage
Html5 cache mechanism & local storageHtml5 cache mechanism & local storage
Html5 cache mechanism & local storage
 
Taking Web Applications Offline
Taking Web Applications OfflineTaking Web Applications Offline
Taking Web Applications Offline
 
Offline First with Service Worker
Offline First with Service WorkerOffline First with Service Worker
Offline First with Service Worker
 
Using html5 to build offline applications
Using html5 to build offline applicationsUsing html5 to build offline applications
Using html5 to build offline applications
 
M S Ajax Client Life Cycle Events
M S  Ajax  Client  Life  Cycle  EventsM S  Ajax  Client  Life  Cycle  Events
M S Ajax Client Life Cycle Events
 
HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web Application
 
WordCamp Bucharest 2017
WordCamp Bucharest 2017WordCamp Bucharest 2017
WordCamp Bucharest 2017
 
MidwestPHP 2016 - Adventures in Laravel 5
MidwestPHP 2016 - Adventures in Laravel 5 MidwestPHP 2016 - Adventures in Laravel 5
MidwestPHP 2016 - Adventures in Laravel 5
 
Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...
Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...
Running Microservices and Docker on AWS Elastic Beanstalk - August 2016 Month...
 
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
 
A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...
 
2310 b 15
2310 b 152310 b 15
2310 b 15
 
2310 b 15
2310 b 152310 b 15
2310 b 15
 
AWS Tech Summit - Berlin 2011 - Running Java Applications on AWS
AWS Tech Summit - Berlin 2011 - Running Java Applications on AWSAWS Tech Summit - Berlin 2011 - Running Java Applications on AWS
AWS Tech Summit - Berlin 2011 - Running Java Applications on AWS
 
Laravel 5 New Features
Laravel 5 New FeaturesLaravel 5 New Features
Laravel 5 New Features
 
Progressive Web Applications - The Next Gen Web Technologies
Progressive Web Applications - The Next Gen Web TechnologiesProgressive Web Applications - The Next Gen Web Technologies
Progressive Web Applications - The Next Gen Web Technologies
 
Charla desarrollo de apps con sharepoint y office 365
Charla   desarrollo de apps con sharepoint y office 365Charla   desarrollo de apps con sharepoint y office 365
Charla desarrollo de apps con sharepoint y office 365
 
Running Microservices on AWS Elastic Beanstalk
Running Microservices on AWS Elastic BeanstalkRunning Microservices on AWS Elastic Beanstalk
Running Microservices on AWS Elastic Beanstalk
 
Progressive Web Apps 101
Progressive Web Apps 101Progressive Web Apps 101
Progressive Web Apps 101
 
Spring RestFul Web Services - CRUD Operations Example
Spring RestFul Web Services - CRUD Operations ExampleSpring RestFul Web Services - CRUD Operations Example
Spring RestFul Web Services - CRUD Operations Example
 

Html5 offline