1 of 21

Browser Database for offline application use

19/12/2022

2 of 21

WHO AM I?

  • Youssef HAMLILI
  • Tech Lead @Nimbleways
  • ​
  • ​

3 of 21

AGENDA

Introduction

Offline-first

What? Why? How?

Example

IndexedDB demo

Challenges

Online/offline status & Sync with remote DB …

Q&A

Question & Answers

4 of 21

Introduction

5 of 21

Hi Youssef! We have to make our application work as well without internet connection.

Without internet connection??

6 of 21

Offline-first

7 of 21

“Offline-first is a development paradigm whereby developers ensure that the app will work as well offline as it does online, and it is not affected by a complete lack of or poor quality of network connection”

8 of 21

VS

9 of 21

UX

Performance

Usable all the time

10 of 21

Static

Dynamic

Page assets

CSS/JS/Images/Fonts/Documents …

​

Service worker

Browser cache

App cache

Dynamic data

API calls/XHR …

​

Web storage

Web SQL*

IndexedDB

11 of 21

Web Storage

5Mb

12 of 21

IndexedDB

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs

13 of 21

IndexedDB

Transactional

14 of 21

Example

15 of 21

Challenges

16 of 21

IndexedDB: Complex API

17 of 21

What about sync?

Is it our responsibility?

18 of 21

How to detect offline / online status?

API call - XHR

*Opera mini: ✗ Not supported

Navigator event: navigator.onLine*

19 of 21

  • Offline-first
  • Static & dynamic data
  • IndexedDB
  • Challenges: complex API, Sync …

20 of 21

Question & Answers

21 of 21

Feel free to get in touch with me. Let's talk about everything!