Offline Web Apps

•

9 likes•5,579 views

Learn about technologies involved in creation an offline web app. Offline storages: web storage, IndexedDB, WebSQL, File API. Application cache: app cache and service workers.

Software

Ofﬂine Web!
Ofﬂine Web Apps!
ARTEM TABALIN!

Why “Ofﬂine Apps”!
No Internet connection!
Poor Internet connection!
Improve performance!

Ofﬂine Apps Includes!
Ofﬂine Storage!
data on client-side!
Application cache!
html, js, css, images!
!

Detect status!
•  onLine property!
•  online event!
•  ofﬂine event!

Ofﬂine Storage!
History. Web Storage. Web SQL. IndexedDB. File API.!
!

Ofﬂine Storage History!
Cookie
Plugins!
HTML5!
Web Storage
IndexedDB Web SQL
Filesystem API
20 x 4KB

Web Storage!
Pros & Cons!
•  Simple!
•  Cross-browser!
•  No transactions!
•  Serialization/Deserialization!
•  Limited space ! 5MB

Web SQL Database!
SQLite in the browser!

Web SQL Database!
Pros & Cons!
•  Relational DB advantages!
•  Browser support!
•  Deprecated!

Indexed Database API!
NoSQL key-value DB with indexing!

Indexed Database API!
Pros & Cons!
•  Transactions support!
•  No size limits (almost)!
•  Cross-browser (almost)!

File API!
Access to sandboxed virtual ﬁle system!

File API!
Pros & Cons
•  Store binary content!
•  Browser support!
•  Non-standard!

Application Cache!
App Cache. Service Workers.!

App Cache!
Manifest deﬁnes resources to be cached!
!

App Cache!
Pros & Cons
•  Cross-browser!
•  Lots of pitfalls!
•  Hard to debug!
•  Deprecated!

Service Workers!
A script is running in the background!
•  Control over requests & responses!
•  Runs even when website is not open!
•  No access to DOM!
•  HTTPS Only!

Service Workers - Register!
1. Register Service Worker!
!

Service Workers – Cache!
2. Cache resources on install event!
!

Service Workers – Fetch!
3. Read from cache in fetch event!
!

Service Workers!
Pros & Cons
•  Flexible & Powerful!
•  Debugging with DevTools!
•  Browser support!

Ofﬂine Web Tools!
•  Ofﬂine.js!
alerts and catches AJAX requests when ofﬂine !
•  localForage!
localStorage-like API for ofﬂine storage !
•  IDBWrapper!
cross-browser IndexedDB API wrapper !
•  PouchDB!
ofﬂine store synchronizing with CouchDB!

Ofﬂine App!
App Cache!
Service Worker!
App Cache & Service Worker!
Ofﬂine Storage!
localForage!
IndexedDB (IDBWrapper)!
Conclusion!

Thank you!!
Your questions, please!!
ARTEM TABALIN!

What's hot

Deep Dive: Oracle WebCenter Content Tips and Traps!Brian Huff

How To Use Host-Named Site CollectionsAndré Vala

Web API BasicsLearnNowOnline

HTML 5Rajan Pal

Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff

Piecing Together the WordPress PuzzleBusiness Vitality LLC

Responsive Websites and Grid-Based Layouts by Gabriel Walt AEM HUB

A Bit of RESTColdFusionConference

REST and ASP.NET Web API (Tunisia)Jef Claes

Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...Brian Huff

The ASP.NET Web API for BeginnersKevin Hazzard

Switching to Oracle Document CloudBrian Huff

RESTful API - Best PracticesTricode (part of Dept)

OWASP Top 10 Security Vulnerabilities, and Securing them with Oracle ADFBrian Huff

Integrating ADF Mobile with WebCenterBrian Huff

Disrupting the application eco system with progressive web applicationsChris Love

Introduction to ASP.NET MVCMayank Srivastava

Creating php cloud applicationsCory Fowler

When dispatcher caching is not enough by Jakub WądołowskiAEM HUB

Introduction to Web ArchitectureChamnap Chhorn

What's hot (20)

Deep Dive: Oracle WebCenter Content Tips and Traps!

How To Use Host-Named Site Collections

Web API Basics

HTML 5

Top 10 HTML5 Features for Oracle Cloud Developers

Piecing Together the WordPress Puzzle

Responsive Websites and Grid-Based Layouts by Gabriel Walt

A Bit of REST

REST and ASP.NET Web API (Tunisia)

Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...

The ASP.NET Web API for Beginners

Switching to Oracle Document Cloud

RESTful API - Best Practices

OWASP Top 10 Security Vulnerabilities, and Securing them with Oracle ADF

Integrating ADF Mobile with WebCenter

Disrupting the application eco system with progressive web applications

Introduction to ASP.NET MVC

Creating php cloud applications

When dispatcher caching is not enough by Jakub Wądołowski

Introduction to Web Architecture

Viewers also liked

Perfect Styling - How to write better CSSArtem Tabalin

Software PatternsArtem Tabalin

Offline of web applicationsFDConf

Html5 offlineWei-Hsiung Chen

RefactoringArtem Tabalin

Perfect CodeArtem Tabalin

eXtreme ProgrammingArtem Tabalin

HTML5/JavaScriptで作るAndroidアプリ開発seminarkujirahand kujira

Viewers also liked (8)

Perfect Styling - How to write better CSS

Software Patterns

Offline of web applications

Html5 offline

Refactoring

Perfect Code

eXtreme Programming

HTML5/JavaScriptで作るAndroidアプリ開発seminar

Similar to Offline Web Apps

Aduivo – the intuitive CMSPeter Steen Høgenhaug

Extreme Web Performance for Mobile DevicesMaximiliano Firtman

Inside Wordnik's ArchitectureTony Tam

Basics of Backbone.jsAvishekh Bharati

Next Generation Web Development Techniques with Cloud FoundryMalachi Smith

WCM-7 Surfing with CMISAlfresco Software

In-browser storage and meJason Casden

Scaling with swaggerTony Tam

Single page applications the basicsChris Love

Asp.netNur Aqilah Ahmad Khairi

Week01 jan19 introductionto_phpJeanho Chu

Web DesigningBALUJAINSTITUTE

SharePoint 2013i SharePoint OnlineDragan Panjkov

PLAT-7 Spring Web Scripts and Spring SurfAlfresco Software

RIA with Flex & PHP - Tulsa TechFest 2009Jason Ragsdale

HTML5: IntroductionGuillermo Paz

State of the WebDmitry Buzdin

Boost the Performance of SharePoint Today!Brian Culver

Synapse india reviews on share point developmentsaritasingh19866

Similar to Offline Web Apps (20)

Aduivo – the intuitive CMS

Extreme Web Performance for Mobile Devices

Inside Wordnik's Architecture

Basics of Backbone.js

Next Generation Web Development Techniques with Cloud Foundry

WCM-7 Surfing with CMIS

In-browser storage and me

Scaling with swagger

Single page applications the basics

Asp.net

Week01 jan19 introductionto_php

Web Designing

SharePoint 2013i SharePoint Online

PLAT-7 Spring Web Scripts and Spring Surf

RIA with Flex & PHP - Tulsa TechFest 2009

HTML5: Introduction

State of the Web

Boost the Performance of SharePoint Today!

Synapse india reviews on share point development

Recently uploaded

WSO2CON 2024 - How to Run a Security ProgramWSO2

WSO2Con2024 - Facilitating Broadband Switching Services for UK Telecoms Provi...WSO2

Driving Innovation: Scania's API Revolution with WSO2WSO2

WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open SourceWSO2

WSO2CON 2024 - Does Open Source Still Matter?WSO2

WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...WSO2

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Bert Jan Schrijver

WSO2CON 2024 Slides - Open Source to SaaSWSO2

WSO2Con2024 - Unleashing the Financial Potential of 13 Million PeopleWSO2

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024VictoriaMetrics

AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdfryanfarris8

%in Soweto+277-882-255-28 abortion pills for sale in sowetomasabamasaba

Evolving Data Governance for the Real-time Streaming and AI Eraconfluent

WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of TransformationWSO2

OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...Shane Coughlan

WSO2CON 2024 - Lessons from the Field: Legacy Platforms – It's Time to Let Go...WSO2

WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...WSO2

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg

Architecture decision records - How not to get lost in the pastPapp Krisztián

WSO2Con2024 - Software Delivery in Hybrid EnvironmentsWSO2

Recently uploaded (20)

WSO2CON 2024 - How to Run a Security Program

WSO2Con2024 - Facilitating Broadband Switching Services for UK Telecoms Provi...

Driving Innovation: Scania's API Revolution with WSO2

WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source

WSO2CON 2024 - Does Open Source Still Matter?

WSO2Con2024 - Navigating the Digital Landscape: Transforming Healthcare with ...

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...

WSO2CON 2024 Slides - Open Source to SaaS

WSO2Con2024 - Unleashing the Financial Potential of 13 Million People

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024

AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf

%in Soweto+277-882-255-28 abortion pills for sale in soweto

Evolving Data Governance for the Real-time Streaming and AI Era

WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation

OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...

WSO2CON 2024 - Lessons from the Field: Legacy Platforms – It's Time to Let Go...

WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...

Architecture decision records - How not to get lost in the past

WSO2Con2024 - Software Delivery in Hybrid Environments

Offline Web Apps

1. Ofﬂine Web! Ofﬂine Web Apps! ARTEM TABALIN!

2. Why “Ofﬂine Apps”! No Internet connection! Poor Internet connection! Improve performance!

3. Ofﬂine Apps Includes! Ofﬂine Storage! data on client-side! Application cache! html, js, css, images! !

4. Detect status! •  onLine property! •  online event! •  ofﬂine event!

5. Ofﬂine Storage! History. Web Storage. Web SQL. IndexedDB. File API.! !

6. Ofﬂine Storage History! Cookie Plugins! HTML5! Web Storage IndexedDB Web SQL Filesystem API 20 x 4KB

7. Web Storage! Key-value pair storage!

8. Web Storage! Pros & Cons! •  Simple! •  Cross-browser! •  No transactions! •  Serialization/Deserialization! •  Limited space ! 5MB

9. Web SQL Database! SQLite in the browser!

10. Web SQL Database! Pros & Cons! •  Relational DB advantages! •  Browser support! •  Deprecated!

11. Indexed Database API! NoSQL key-value DB with indexing!

12. Indexed Database API! Pros & Cons! •  Transactions support! •  No size limits (almost)! •  Cross-browser (almost)!

13. File API! Access to sandboxed virtual ﬁle system!

14. File API! Pros & Cons •  Store binary content! •  Browser support! •  Non-standard!

15. Application Cache! App Cache. Service Workers.!

16. App Cache! Manifest deﬁnes resources to be cached! !

17. App Cache! Pros & Cons •  Cross-browser! •  Lots of pitfalls! •  Hard to debug! •  Deprecated!

18. Service Workers! A script is running in the background! •  Control over requests & responses! •  Runs even when website is not open! •  No access to DOM! •  HTTPS Only!

19. Service Workers - Register! 1. Register Service Worker! !

20. Service Workers – Cache! 2. Cache resources on install event! !

21. Service Workers – Fetch! 3. Read from cache in fetch event! !

22. Service Workers! Pros & Cons •  Flexible & Powerful! •  Debugging with DevTools! •  Browser support!

23. Ofﬂine Web Tools!

24. Offline Web Tools! •  Offline.js! alerts and catches AJAX requests when offline ! •  localForage! localStorage-like API for offline storage ! •  IDBWrapper! cross-browser IndexedDB API wrapper ! •  PouchDB! offline store synchronizing with CouchDB!

25. Ofﬂine App! App Cache! Service Worker! App Cache & Service Worker! Ofﬂine Storage! localForage! IndexedDB (IDBWrapper)! Conclusion!

26. Thank you!! Your questions, please!! ARTEM TABALIN!

Offline Web Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Offline Web Apps

Similar to Offline Web Apps (20)

Recently uploaded

Recently uploaded (20)

Offline Web Apps