Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AYB14 - offline first <3
Search
Ola Gasidlo
October 17, 2014
Programming
2
1.2k
AYB14 - offline first <3
not including notes
Ola Gasidlo
October 17, 2014
Tweet
Share
More Decks by Ola Gasidlo
See All by Ola Gasidlo
AYB14 - offline first <3
zoepage
0
130
Say hello to offline first!
zoepage
4
2.3k
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
99
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
220
XP, Testing and ninja testing
m_seki
3
220
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
970
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
Select API from Kotlin Coroutine
jmatsu
1
190
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Team operations that are not burdened by SRE
kazatohiei
1
270
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
5つのアンチパターンから学ぶLT設計
narihara
1
130
ReadMoreTextView
fornewid
1
490
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
870
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Agile that works and the tools we love
rasmusluckow
329
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Fireside Chat
paigeccino
37
3.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The World Runs on Bad Software
bkeepers
PRO
69
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Code Review Best Practice
trishagee
69
18k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
! Say Hello To Offline First How to build applications
for the real world we <3 AYB
Ola Gasidlo - Javascript for +10 years, full stack -
Core Member of Hood.ie - Organizer of OpenTechSchool Dortmund ! twitter@misprintedtype github@zoepage
Agenda! 1. What & why? 2. Problems 3. New approach
4. Implementation @misprintedtype
What & why? @misprintedtype
The internet turned 25 this year! @misprintedtype
We grew up. @misprintedtype
@misprintedtype
amount of mobile-only web users is out of reach @misprintedtype
Tell me... @misprintedtype
@misprintedtype
None
“WE CAN’T KEEP BUILDING APPS WITH THE DESKTOP MINDSET OF
PERMANENT, FAST CONNECTIVITY, WHERE A TEMPORARY DISCONNECTION OR SLOW SERVICE IS REGARDED AS A PROBLEM AND COMMUNICATED AS AN ERROR.” @misprintedtype
None
Problems @misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
offline > error handling @misprintedtype
inform user @misprintedtype
@misprintedtype
build trust @misprintedtype
http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
organise data @misprintedtype
@misprintedtype
decide @misprintedtype
None
None
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
None
None
None
New Approaches @misprintedtype
! Rethink! (but how?) @misprintedtype
http://hood.ie
None
None
None
None
None
None
None
None
Implementation! @misprintedtype
files data
files data
Manifest @misprintedtype
Manifest ++ offline app usage ++ fast loading ++ full
experience for users @misprintedtype
Manifest <html manifest="example.appcache"> ... </html>! ! ! ! IE8+ /
FF 3.5+ / Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+ @misprintedtype
Manifest AddType text/cache-manifest .appcache ! @misprintedtype
Manifest CACHE MANIFEST # 2013-11-13:v3 ! CACHE index.html ! NETWORK:
* FALLBACK: /online.html /offline.html ! @misprintedtype
App Cache chrome://appcache-internals/ ! @misprintedtype
App Cache is a douchebag! ! http://alistapart.com/article/application-cache-is-a-douchebag
App Manifest ! 1. Files always come from the cache
(also if you are online!) @misprintedtype
App Manifest ! 2. App Cache only updates if manifest
changed @misprintedtype
App Manifest ! 3. App Cache is an additional cache
@misprintedtype
App Manifest ! 4. Never change the manifest URL @misprintedtype
App Manifest ! 5. Non-cached resources will not load @misprintedtype
! App Cache nanny ! ! https://www.npmjs.org/package/appcache-nanny @misprintedtype
Service Worker ! - Additional cache - Deals with all
requests - offline first, push notifications, background sync, performance @misprintedtype
Service Worker ! ! ! https://github.com/slightlyoff/ServiceWorker https://jakearchibald.github.io/isserviceworkerready/ ! https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J @misprintedtype
files data
files data
! Do not harm humans!! (first law of robotics) @misprintedtype
! Do not lose data!! (first law of offline first)
@misprintedtype
! ! ! ! PouchDB + CouchDB = <3 !
@misprintedtype
None
None
CouchDB ! @misprintedtype
@misprintedtype Ruth’s data (share with John) John’s data Ruth’s partial
data (replicated)
PouchDB ! @misprintedtype
PouchDB ! @misprintedtype
PouchDB ! browser storage limitation confirm Firefox IndexedDB unlimited y
Chrome / Opera / Android 4.4+ IndexedDB % of storage y IE 10+ SQLite 250MB n Mobile Safari WebSQL 50MB n Sarafi WebSQL 5MB -> 500MB y Android 4.3 and lower IndexedDB 200MB n
None
! ! hoodie <3 you! @misprintedtype / @hoodiehq! ! !