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
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
300
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Cache Me If You Can
ryunen344
2
740
概念モデル→論理モデルで気をつけていること
sunnyone
2
190
Swift Updates - Learn Languages 2025
koher
2
480
RDoc meets YARD
okuramasafumi
4
170
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
🔨 小さなビルドシステムを作る
momeemt
4
680
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Documentation Writing (for coders)
carmenintech
74
5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Code Reviewing Like a Champion
maltzj
525
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Ace a Technical Interview
jacobian
279
23k
Automating Front-end Workflow
addyosmani
1370
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
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! ! !