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
140
Say hello to offline first!
zoepage
4
2.3k
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
110
Other Decks in Programming
See All in Programming
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
200
CSC305 Lecture 06
javiergs
PRO
0
240
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
140
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
430
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
180
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
CSC509 Lecture 04
javiergs
PRO
0
300
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
590
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
A better future with KSS
kneath
239
18k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Bash Introduction
62gerente
615
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Mobile First: as difficult as doing things right
swwweet
224
10k
How STYLIGHT went responsive
nonsquared
100
5.8k
Writing Fast Ruby
sferik
629
62k
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! ! !