SlideShare una empresa de Scribd logo
1 de 9
Making web site
available in offline
      mode

         @MehdiKhalili
      www.mehdi-Khalili.com
That is two fold:




1. Use offline cache to get the browser
   to cache your website
2. Use client-side storage to let users
   change data in offline mode
Offline cache (AKA AppCache)

• Communicated through a manifest “file”:
   • set in the html tag’s manifest attribute
   • extension should be ‘appcache’
   • mime type should be ‘text/cache-manifest’
• The manifest does not have to be static
Some tips on AppCache

• AppCache does NOT expire: so somehow version your manifest
• Checkout out your cache entries on chrome://appcache-internals/
Client side storage

Web Storage               Indexed Database

• Great browser support   • Relatively good browser support
• Poor performance        • Great performance
• Simple to use           • Rather complex API
• A good choice ATM       • All in all a good choice
Web SQL - Deprecated!!

• Good browser support (except IE and FF)
• Good performance
• Transactional
• Familiar SQL
• Perhaps not such a great choice
Some tips on offline persistence

• Store user changes in client storage in offline mode
• Sync up as soon as you go online to avoid data loss
• navigator.isOnline is broken. Don’t use it
   • Don’t use AJAX to check connectivity
   • Use AppCache events
much more information on my blog



http://www.mehdi-khalili.com/presentations/wdyk-offline-web




                      @MehdiKhalili

Más contenido relacionado

Destacado

Microservices: lessons from the trenches
Microservices: lessons from the trenchesMicroservices: lessons from the trenches
Microservices: lessons from the trenchesMehdi Khalili
 
Cross platform dotnet development using dotnet core
Cross platform dotnet development using dotnet coreCross platform dotnet development using dotnet core
Cross platform dotnet development using dotnet coreSwaminathan Vetri
 
Getting Started .NET Core
Getting Started .NET CoreGetting Started .NET Core
Getting Started .NET CoreYuta Matsumura
 
Powershell For Developers
Powershell For DevelopersPowershell For Developers
Powershell For DevelopersIdo Flatow
 
Automated UI testing done right (DDDSydney)
Automated UI testing done right (DDDSydney)Automated UI testing done right (DDDSydney)
Automated UI testing done right (DDDSydney)Mehdi Khalili
 
Docker for .NET Developers
Docker for .NET DevelopersDocker for .NET Developers
Docker for .NET DevelopersTaswar Bhatti
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2Ido Flatow
 
Debugging the Web with Fiddler
Debugging the Web with FiddlerDebugging the Web with Fiddler
Debugging the Web with FiddlerIdo Flatow
 
Lessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containersLessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containersBen Hall
 
The How and Why of Windows containers
The How and Why of Windows containersThe How and Why of Windows containers
The How and Why of Windows containersBen Hall
 
From VMs to Containers: Introducing Docker Containers for Linux and Windows S...
From VMs to Containers: Introducing Docker Containers for Linux and Windows S...From VMs to Containers: Introducing Docker Containers for Linux and Windows S...
From VMs to Containers: Introducing Docker Containers for Linux and Windows S...Ido Flatow
 
Production debugging web applications
Production debugging web applicationsProduction debugging web applications
Production debugging web applicationsIdo Flatow
 
Real World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and ProductionReal World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and ProductionBen Hall
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0Ido Flatow
 
Application Lifecycle Management with TFS
Application Lifecycle Management with TFSApplication Lifecycle Management with TFS
Application Lifecycle Management with TFSMehdi Khalili
 
Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Ido Flatow
 

Destacado (19)

Microservices: lessons from the trenches
Microservices: lessons from the trenchesMicroservices: lessons from the trenches
Microservices: lessons from the trenches
 
Cross platform dotnet development using dotnet core
Cross platform dotnet development using dotnet coreCross platform dotnet development using dotnet core
Cross platform dotnet development using dotnet core
 
Cobertura
CoberturaCobertura
Cobertura
 
Getting Started .NET Core
Getting Started .NET CoreGetting Started .NET Core
Getting Started .NET Core
 
Powershell For Developers
Powershell For DevelopersPowershell For Developers
Powershell For Developers
 
Automated UI testing done right (DDDSydney)
Automated UI testing done right (DDDSydney)Automated UI testing done right (DDDSydney)
Automated UI testing done right (DDDSydney)
 
Docker for .NET Developers
Docker for .NET DevelopersDocker for .NET Developers
Docker for .NET Developers
 
Introduction to HTTP/2
Introduction to HTTP/2Introduction to HTTP/2
Introduction to HTTP/2
 
Debugging the Web with Fiddler
Debugging the Web with FiddlerDebugging the Web with Fiddler
Debugging the Web with Fiddler
 
Next .NET and C#
Next .NET and C#Next .NET and C#
Next .NET and C#
 
Lessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containersLessons from running potentially malicious code inside containers
Lessons from running potentially malicious code inside containers
 
The How and Why of Windows containers
The How and Why of Windows containersThe How and Why of Windows containers
The How and Why of Windows containers
 
From VMs to Containers: Introducing Docker Containers for Linux and Windows S...
From VMs to Containers: Introducing Docker Containers for Linux and Windows S...From VMs to Containers: Introducing Docker Containers for Linux and Windows S...
From VMs to Containers: Introducing Docker Containers for Linux and Windows S...
 
Production debugging web applications
Production debugging web applicationsProduction debugging web applications
Production debugging web applications
 
Real World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and ProductionReal World Experience of Running Docker in Development and Production
Real World Experience of Running Docker in Development and Production
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0
 
.Net Core
.Net Core.Net Core
.Net Core
 
Application Lifecycle Management with TFS
Application Lifecycle Management with TFSApplication Lifecycle Management with TFS
Application Lifecycle Management with TFS
 
Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015
 

Último

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 

Último (20)

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Offline web applications

  • 1. Making web site available in offline mode @MehdiKhalili www.mehdi-Khalili.com
  • 2. That is two fold: 1. Use offline cache to get the browser to cache your website 2. Use client-side storage to let users change data in offline mode
  • 3. Offline cache (AKA AppCache) • Communicated through a manifest “file”: • set in the html tag’s manifest attribute • extension should be ‘appcache’ • mime type should be ‘text/cache-manifest’ • The manifest does not have to be static
  • 4.
  • 5. Some tips on AppCache • AppCache does NOT expire: so somehow version your manifest • Checkout out your cache entries on chrome://appcache-internals/
  • 6. Client side storage Web Storage Indexed Database • Great browser support • Relatively good browser support • Poor performance • Great performance • Simple to use • Rather complex API • A good choice ATM • All in all a good choice
  • 7. Web SQL - Deprecated!! • Good browser support (except IE and FF) • Good performance • Transactional • Familiar SQL • Perhaps not such a great choice
  • 8. Some tips on offline persistence • Store user changes in client storage in offline mode • Sync up as soon as you go online to avoid data loss • navigator.isOnline is broken. Don’t use it • Don’t use AJAX to check connectivity • Use AppCache events
  • 9. much more information on my blog http://www.mehdi-khalili.com/presentations/wdyk-offline-web @MehdiKhalili

Notas del editor

  1. offline cache (also know as appcache) is the bit that makes some of the pages available in offline mode Client storage allows you to store data while in offline mode
  2. Show demos from the application