Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AYB14 - offline first <3

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

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
130
Say hello to offline first!
Avatar for Ola Gasidlo zoepage
4
2.3k
Coding the dream
Avatar for Ola Gasidlo zoepage
1
1.1k
offline first
Avatar for Ola Gasidlo zoepage
1
94

Other Decks in Programming

See All in Programming
Blueskyのプラグインを作ってみた
Avatar for Hakkadaikon hakkadaikon
1
290
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
Avatar for TVer Inc. techtver
PRO
0
710
DevDay2025-OracleDatabase-kernel-addressing-history
Avatar for oracle4engineer oracle4engineer
PRO
7
1.6k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
Avatar for suzuki masayuki suzukimar
0
190
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
Avatar for yoshiyoshifujii yoshiyoshifujii
0
160
【TSkaigi 2025】これは型破り？型安全？ 真実はいつもひとつ！（じゃないかもしれない）TypeScript クイズ〜〜〜〜！！！！！
Avatar for Kimita Shoichi kimitashoichi
1
300
iOSアプリ開発もLLMで自動運転する
Avatar for Yuya Hirayama hiragram
6
2.2k
事業戦略を理解してソフトウェアを設計する
Avatar for 増田 亨 masuda220
PRO
7
1.2k
External SecretsのさくらProvider初期実装を担当しています
Avatar for logica / Takuto Nagami logica0419
0
240
Cursor Meetup Tokyo ゲノミクスとCursor： 進化と制約のあいだ
Avatar for Masaru Koido koido
1
310
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
220
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
Avatar for Yohei Yasukawa yasulab
PRO
1
130

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
660
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
178
9.7k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k

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! ! !