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.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
120
Say hello to offline first!
zoepage
4
2.3k
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
88
Other Decks in Programming
See All in Programming
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
4.3k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
38
13k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
510
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
WebDriver BiDiとは何なのか
yotahada3
1
130
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
ARA Ansible for the teams
kksat
0
130
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.2k
技術を根付かせる / How to make technology take root
kubode
1
230
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
9
1.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Gamification - CAS2011
davidbonilla
80
5.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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! ! !