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
1k
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
110
Say hello to offline first!
zoepage
4
2.2k
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
86
Other Decks in Programming
See All in Programming
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
リハビリmruby
kishima
1
160
小さな開発会社を作った理由
polidog
0
1.9k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
最近追加した型の紹介とその振り返り
aki19035vc
0
180
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Rust.Nagoya #1
codemountains
0
170
유연한 Composable 설계
l2hyunwoo
0
380
【Go言語】golangci-lintの使い方
tomo1227
0
280
Featured
See All Featured
Bash Introduction
62gerente
607
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Infographics Made Easy
chrislema
238
18k
Raft: Consensus for Rubyists
vanstee
134
6.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Why Our Code Smells
bkeepers
PRO
332
56k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Automating Front-end Workflow
addyosmani
1362
200k
Optimizing for Happiness
mojombo
373
69k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing for Performance
lara
604
67k
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! ! !