SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Andere mochten auch

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
 

Andere mochten auch (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
 

Kürzlich hochgeladen

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
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...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
 
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
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 

Kürzlich hochgeladen (20)

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 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...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...
 
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
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

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

Hinweis der Redaktion

  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