$30 off During Our Annual Pro Sale. View Details »

AYB14 - offline first <3

Avatar for Ola Gasidlo Ola Gasidlo
October 17, 2014
Programming
2
1.2k

AYB14 - offline first <3

not including notes

Avatar for Ola Gasidlo

Ola Gasidlo

October 17, 2014
Tweet

More Decks by Ola Gasidlo

See All by Ola Gasidlo
AYB14 - offline first <3
Avatar for Ola Gasidlo zoepage
0
140
Say hello to offline first!
Avatar for Ola Gasidlo zoepage
4
2.4k
Coding the dream
Avatar for Ola Gasidlo zoepage
1
1.1k
offline first
Avatar for Ola Gasidlo zoepage
1
110

Other Decks in Programming

See All in Programming
仕様がそのままテストになる！Javaで始める振る舞い駆動開発
Avatar for uutan1108 ohmori_yusuke
8
4.7k
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
11
6.2k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
260
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
Avatar for Rodrigo Ramirez xpromx
0
210
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
Avatar for Marco Roth marcoroth
0
210
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
Avatar for hkws kwahiro
12
7.4k
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
Avatar for Maple fuuki12
0
150
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
390
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
Avatar for s.konishi hasibirok0
0
160
Micro Frontendsで築いた 共通基盤と運用の試行錯誤 / Building a Shared Platform with Micro Frontends: Operational Learnings
Avatar for Yuto Kaneko kyntk
1
1.6k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
25k
Google Antigravity and Vibe Coding: Agentic Development Guide
Avatar for MIKIO KUBO mickey_kubo
2
100

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
67k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
11
950
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

Transcript

  1. ! Say Hello To Offline First How to build applications

    for the real world we <3 AYB

  2. Ola Gasidlo - Javascript for +10 years, full stack -

    Core Member of Hood.ie - Organizer of OpenTechSchool Dortmund ! twitter@misprintedtype github@zoepage

  3. Agenda! 1. What & why? 2. Problems 3. New approach

    4. Implementation @misprintedtype

  4. What & why? @misprintedtype

  5. The internet turned 25 this year! @misprintedtype

  6. We grew up. @misprintedtype

  7. @misprintedtype

  8. amount of mobile-only web users is out of reach @misprintedtype

  9. Tell me... @misprintedtype

  10. @misprintedtype

  11. None

  12. “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
  13. None

  14. Problems @misprintedtype

  15. @misprintedtype

  16. @misprintedtype

  17. @misprintedtype

  18. offline > error handling @misprintedtype

  19. inform user @misprintedtype

  20. @misprintedtype

  21. build trust @misprintedtype

  22. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

  23. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

  24. organise data @misprintedtype

  25. @misprintedtype

  26. decide @misprintedtype

  27. None
  28. None

  29. @misprintedtype

  30. @misprintedtype

  31. @misprintedtype

  32. @misprintedtype

  33. @misprintedtype

  34. None
  35. None
  36. None

  37. New Approaches @misprintedtype

  38. ! Rethink! (but how?) @misprintedtype

  39. http://hood.ie

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None

  48. Implementation! @misprintedtype

  49. files data

  50. files data

  51. Manifest @misprintedtype

  52. Manifest ++ offline app usage ++ fast loading ++ full

    experience for users @misprintedtype

  53. 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

  54. Manifest AddType text/cache-manifest .appcache ! @misprintedtype

  55. Manifest CACHE MANIFEST # 2013-11-13:v3 ! CACHE index.html ! NETWORK:

    * 
 FALLBACK: /online.html /offline.html ! @misprintedtype

  56. App Cache chrome://appcache-internals/ ! @misprintedtype

  57. App Cache is a douchebag! ! http://alistapart.com/article/application-cache-is-a-douchebag

  58. App Manifest ! 1. Files always come from the cache

    (also if you are online!) @misprintedtype

  59. App Manifest ! 2. App Cache only updates if manifest

    changed @misprintedtype

  60. App Manifest ! 3. App Cache is an additional cache

    @misprintedtype

  61. App Manifest ! 4. Never change the manifest URL @misprintedtype

  62. App Manifest ! 5. Non-cached resources will not load @misprintedtype

  63. ! App Cache nanny ! ! https://www.npmjs.org/package/appcache-nanny @misprintedtype

  64. Service Worker ! - Additional cache - Deals with all

    requests - offline first, push notifications, background sync, performance @misprintedtype

  65. Service Worker ! ! ! https://github.com/slightlyoff/ServiceWorker https://jakearchibald.github.io/isserviceworkerready/ ! https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J @misprintedtype

  66. files data

  67. files data

  68. ! Do not harm humans!! (first law of robotics) @misprintedtype

  69. ! Do not lose data!! (first law of offline first)

    @misprintedtype

  70. ! ! ! ! PouchDB + CouchDB = <3 !

    @misprintedtype
  71. None
  72. None

  73. CouchDB ! @misprintedtype

  74. @misprintedtype Ruth’s data
 (share with John) John’s data Ruth’s partial

    data (replicated)

  75. PouchDB ! @misprintedtype

  76. PouchDB ! @misprintedtype

  77. 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
  78. None

  79. ! ! hoodie <3 you! @misprintedtype / @hoodiehq! ! !