M A K I N G Y O U R A P P R E S I L I E N T
T O N E T W O R K FA I L U R E S
O F F L I N E - F I R S T
W H O A M I ?
M A K I N G Y O U R A P P R E S I L I E N T
T O N E T W O R K FA I L U R E S
O F F L I N E - F I R S T
M O B I L E W O R L D
W E L I V E I N A N I N C R E A S I N G LY
B E I N G O F F L I N E I S A G I V E N ,
N O T A N E X C E P T I O N .
H O W C A N A P P L I C AT I O N
D E V E L O P E R S H A N D L E T H I S ?
N O T M Y P R O B L E M
N O T I F Y T H E U S E R
E R R O R H A N D L I N G
H A N D L E I T C A S E B Y C A S E
O F F L I N E - F I R S T D E V E L O P M E N T
S E R V I C E W O R K E R S
“A service worker is a script that your browser runs in the
background, separate from a web page, opening the
door to features that don't need a web page or user
interaction.”
S E R V I C E W O R K E R S
“Using service worker you can hijack connections,
fabricate, and filter responses. Powerful stuff.”
https://developers.google.com/web/fundamentals/
getting-started/primers/service-workers
S E R V I C E W O R K E R S
I’m not here to talk about Service Workers..
D ATA S Y N C
I ’ M H E R E T O TA L K A B O U T
C O U C H D B
F E AT U R E S
• Document database
• Versions
• Changes Feed
• Sync
S O M E O P E N - S O U R C E
• POUCH-CLERK
• https://github.com/pgte/pouch-clerk
• Example app
• https://github.com/pgte/pouch-clerk-example-app
D E M O T I M E !
TA K E - A WAY S
• Offline is a given, not an exception
• You should not handle networking errors case-by-case
• Embrace offline-first techniques
• Sync is your friend
T H A N K Y O U ! 

O N S L I D E S H A R E :
bit.ly/2pkU4pQ
Q U E S T I O N S ?
C R E D I T S
• Hans Kylberg - https://www.flickr.com/photos/visulogik/1619008375
• Vodafone UK slide: Jake Archibald, Google I/O
• Machinery: Franz Zajizek, Astronomical Clock Machinery - https://
commons.wikimedia.org/wiki/File:Vienna_-
_Vintage_Franz_Zajizek_Astronomical_Clock_machinery_-_0518.jpg
• HospitalRun images: @ Cure.org
• Monolith: Expo Murten: https://commons.wikimedia.org/wiki/File:
20020719_Expo_Murten_10.JPG

Offline-first: Making your app resilient to network failures

  • 1.
    M A KI N G Y O U R A P P R E S I L I E N T T O N E T W O R K FA I L U R E S O F F L I N E - F I R S T
  • 2.
    W H OA M I ?
  • 4.
    M A KI N G Y O U R A P P R E S I L I E N T T O N E T W O R K FA I L U R E S O F F L I N E - F I R S T
  • 5.
    M O BI L E W O R L D W E L I V E I N A N I N C R E A S I N G LY
  • 7.
    B E IN G O F F L I N E I S A G I V E N , N O T A N E X C E P T I O N .
  • 8.
    H O WC A N A P P L I C AT I O N D E V E L O P E R S H A N D L E T H I S ?
  • 9.
    N O TM Y P R O B L E M
  • 10.
    N O TI F Y T H E U S E R E R R O R H A N D L I N G
  • 11.
    H A ND L E I T C A S E B Y C A S E
  • 13.
    O F FL I N E - F I R S T D E V E L O P M E N T
  • 14.
    S E RV I C E W O R K E R S “A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.”
  • 15.
    S E RV I C E W O R K E R S “Using service worker you can hijack connections, fabricate, and filter responses. Powerful stuff.” https://developers.google.com/web/fundamentals/ getting-started/primers/service-workers
  • 16.
    S E RV I C E W O R K E R S I’m not here to talk about Service Workers..
  • 17.
    D ATA SY N C I ’ M H E R E T O TA L K A B O U T
  • 18.
    C O UC H D B
  • 19.
    F E ATU R E S • Document database • Versions • Changes Feed • Sync
  • 34.
    S O ME O P E N - S O U R C E • POUCH-CLERK • https://github.com/pgte/pouch-clerk • Example app • https://github.com/pgte/pouch-clerk-example-app
  • 35.
    D E MO T I M E !
  • 36.
    TA K E- A WAY S • Offline is a given, not an exception • You should not handle networking errors case-by-case • Embrace offline-first techniques • Sync is your friend
  • 37.
    T H AN K Y O U ! 
 O N S L I D E S H A R E : bit.ly/2pkU4pQ
  • 38.
    Q U ES T I O N S ?
  • 39.
    C R ED I T S • Hans Kylberg - https://www.flickr.com/photos/visulogik/1619008375 • Vodafone UK slide: Jake Archibald, Google I/O • Machinery: Franz Zajizek, Astronomical Clock Machinery - https:// commons.wikimedia.org/wiki/File:Vienna_- _Vintage_Franz_Zajizek_Astronomical_Clock_machinery_-_0518.jpg • HospitalRun images: @ Cure.org • Monolith: Expo Murten: https://commons.wikimedia.org/wiki/File: 20020719_Expo_Murten_10.JPG