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
1.2k
2

AYB14 - offline first <3

not including notes

Avatar for Ola Gasidlo

Ola Gasidlo

October 17, 2014

More Decks by Ola Gasidlo

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

Other Decks in Programming

See All in Programming
Strategy for Finding a Problem for OSS: With Real Examples
Avatar for Chikahiro Tokoro kibitan
0
130
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
370
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
260
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
220
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
410
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
200
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
130
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
200
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
180
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
160
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
320
「効かない！」依存性注入（DI）を活用したAPI Platformのエラーハンドリング奮闘記
Avatar for Maki Hayashi mkmk884
0
300

Featured

See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
140
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
420
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
96
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
94

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