AYB14 - offline first <3

Cb5e0122cf03f4abd8062ba7ab44cf33?s=47 Ola Gasidlo
October 17, 2014
Programming
2
430

AYB14 - offline first <3

not including notes

Cb5e0122cf03f4abd8062ba7ab44cf33?s=128

Ola Gasidlo

October 17, 2014
Tweet

Want more?

Cb5e0122cf03f4abd8062ba7ab44cf33?s=48 zoepage
0
70
Cb5e0122cf03f4abd8062ba7ab44cf33?s=48 zoepage
4
1.4k
Cb5e0122cf03f4abd8062ba7ab44cf33?s=48 zoepage
1
1k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
12
690
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
3
360
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
230
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
470
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
8
270
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
330
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
750
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
190
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
270

Transcript

  1. 1.

    ! Say Hello To Offline First How to build applications

    for the real world we <3 AYB
  2. 2.

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

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

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

    4. Implementation @misprintedtype
  4. 4.

    What & why? @misprintedtype

  5. 5.

    The internet turned 25 this year! @misprintedtype

  6. 6.

    We grew up. @misprintedtype

  7. 7.

    @misprintedtype

  8. 8.

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

  9. 9.

    Tell me... @misprintedtype

  10. 10.

    @misprintedtype

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

    Problems @misprintedtype

  15. 15.

    @misprintedtype

  16. 16.

    @misprintedtype

  17. 17.

    @misprintedtype

  18. 18.

    offline > error handling @misprintedtype

  19. 19.

    inform user @misprintedtype

  20. 20.

    @misprintedtype

  21. 21.

    build trust @misprintedtype

  22. 22.

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

  23. 23.

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

  24. 24.

    organise data @misprintedtype

  25. 25.

    @misprintedtype

  26. 26.

    decide @misprintedtype

  27. 27.
    None
  28. 28.
    None
  29. 29.

    @misprintedtype

  30. 30.

    @misprintedtype

  31. 31.

    @misprintedtype

  32. 32.

    @misprintedtype

  33. 33.

    @misprintedtype

  34. 34.
    None
  35. 35.
    None
  36. 36.
    None
  37. 37.

    New Approaches @misprintedtype

  38. 38.

    ! Rethink! (but how?) @misprintedtype

  39. 39.

    http://hood.ie

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

    Implementation! @misprintedtype

  49. 49.

    files data

  50. 50.

    files data

  51. 51.

    Manifest @misprintedtype

  52. 52.

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

    experience for users @misprintedtype
  53. 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. 54.

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

  55. 55.

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

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

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

  57. 57.

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

  58. 58.

    App Manifest ! 1. Files always come from the cache

    (also if you are online!) @misprintedtype
  59. 59.

    App Manifest ! 2. App Cache only updates if manifest

    changed @misprintedtype
  60. 60.

    App Manifest ! 3. App Cache is an additional cache

    @misprintedtype
  61. 61.

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

  62. 62.

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

  63. 63.

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

  64. 64.

    Service Worker ! - Additional cache - Deals with all

    requests - offline first, push notifications, background sync, performance @misprintedtype
  65. 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. 66.

    files data

  67. 67.

    files data

  68. 68.

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

  69. 69.

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

    @misprintedtype
  70. 70.

    ! ! ! ! PouchDB + CouchDB = <3 !

    @misprintedtype
  71. 71.
    None
  72. 72.
    None
  73. 73.

    CouchDB ! @misprintedtype

  74. 74.

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

    data (replicated)
  75. 75.

    PouchDB ! @misprintedtype

  76. 76.

    PouchDB ! @misprintedtype

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

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