O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Progressive Web App (feat. React, Django)

2017 DevFest에서 PWA(Progressive Web App)에 대해 발표한 자료입니다.

  • Entre para ver os comentários

Progressive Web App (feat. React, Django)

  1. 1. Software Engineer of SMARTSTUDY Jay Jin React Django Progressive Web App
  2. 2. .
  3. 3. SMARTSTUDY .
  4. 4. 300+ / / …
  5. 5. … the Hell
  6. 6. , , ! ! 1~2 .
  7. 7. , , ! ! 1~2 . 2 ~
  8. 8. &
  9. 9. & BOXture ! a.k.a Box + Future
  10. 10. BOXture: Web Application PC/Mobile
  11. 11. … + ?
  12. 12. … + ? 🤡 “ ! ERP .”
  13. 13. … + ? 🤡 👽 “ ! ERP .” “ … . .”
  14. 14. Progressive Web App , !
  15. 15. Progressive Web App , ! ? vue.js ? (X)
  16. 16. PWA .
  17. 17. PWA . , PWA Web App Manifest & Service Worker
  18. 18. What Maketh PWA?
  19. 19. PWA 1. “ . ! ” “ . !”
  20. 20. , , PWA 2.
  21. 21. / , , ( ) . PWA 3. &
  22. 22. PWA 4. PWA
  23. 23. PWA
  24. 24. PWA 1
  25. 25. PWA 1 2
  26. 26. 1 .
  27. 27. Why? Before&After
  28. 28. Why? Before&After 1. https://boxture. .com 2. 2MB Single Page App
  29. 29. Why? Before&After 1. url https://boxture. .com 2. 2MB Single Page App 1. 2. ( )
  30. 30. Step1.
  31. 31. Step1. App Contents , App Shell
  32. 32. ? Service Worker!
  33. 33. ? Service Worker!
  34. 34. ? Service Worker!
  35. 35. ? Service Worker!
  36. 36. ? Service Worker!
  37. 37. Service Worker?
  38. 38. , 

  39. 39. , 
 ?
  40. 40. , 
 ? Cache-First Strategy
  41. 41. Cache-First Strategy ( )
  42. 42. Cache-First Strategy ( )
  43. 43. Cache-First Strategy ( )
  44. 44. Cache-First Strategy ( ) = main.js
  45. 45. Cache-First Strategy A. from ServiceWorker( X)
  46. 46. Cache-First Strategy A. from ServiceWorker( X) O
  47. 47. Cache-First Strategy A. from ServiceWorker( X) O B. from ServiceWorker( X)
  48. 48. ‘service.worker.js’
  49. 49. ‘service.worker.js’ create-react-app registerServiceWorker.js
  50. 50. service-worker.js
  51. 51. service-worker.js ( ) create-react-app service-worker.js
  52. 52. sw-precache
  53. 53. sw-precache
  54. 54. sw-precache
  55. 55. sw-precache CRA SWPrecacheWebpackPlugin build service-worker.js .
  56. 56. !
  57. 57. ! ? (disk cache)
  58. 58. vs • First visit . X • Cleared , ( 19% 1 ) • Purged • Expired 69% 1 • Revved ,
  59. 59. vs • First visit . X • Cleared , ( 19% 1 ) • Purged • Expired 69% 1 • Revved , “ ~”
  60. 60. Step2. Progressive Web App manifest.json
  61. 61. Step2. Progressive Web App manifest.json
  62. 62. , manifest.json ‘ ’ Step2.
  63. 63. ! ?
  64. 64. ! ?
  65. 65. 1. Webkit Service Worker In Development ( 8 Planned ) https://webkit.org/status/#?search=service%20worker
  66. 66. 1. Webkit Service Worker In Development ( 8 Planned ) 2. MacOS 
 https://webkit.org/status/#?search=service%20worker https://blog.izooto.com/chrome-59-os/
  67. 67. 2 . Web Push
  68. 68. Why? Before&After
  69. 69. Why? Before&After . 300 BEFORE
  70. 70. Why? Before&After . 300 BEFORE 3000 ‘ ’ , 300 ‘ ’ ! AFTER
  71. 71. Firebase Cloud Messaging • GCM 
 FCM(Firebase Cloud Messaging) • 
 .
  72. 72. Firebase Cloud Messaging • GCM 
 FCM(Firebase Cloud Messaging) • 
 . Push Service Worker !
  73. 73. firebase.messaging
  74. 74. Web Push
  75. 75. Web Push /
  76. 76. Web Push /
  77. 77. Web Push new Notification(title, options) self.registration.showNotification(title, options)
  78. 78. manifest.json 
 Progressive Web App FCM manifest.json . ( 103953800507 )
  79. 79. ! cURL
  80. 80. ! : Pyfcm http://olucurious.github.io/PyFCM/ Push title, body 3000 , 300 send_push
  81. 81. Push Notification ! , PC . ( )
  82. 82. PWA 1 2 Done!
  83. 83. PWA,
  84. 84. PWA: PWA “ ?” 

  85. 85. PWA: PWA “ ?” 
 CRA Service worker manifest
  86. 86. PWA: ,
  87. 87. PWA: , 
 ? 1
  88. 88. PWA: , 
 ? 1 It’s not a Bug, It’s a Feature. (Cache-First Strategy) location.reload() . 1
  89. 89. PWA: , 
 ? 1 It’s not a Bug, It’s a Feature. (Cache-First Strategy) location.reload() . 1 sw-precache main.js ? 2
  90. 90. PWA: , 
 ? 1 It’s not a Bug, It’s a Feature. (Cache-First Strategy) location.reload() . 1 sw-precache main.js ? 2 chart main.js 2.2MB . sw-precache-webpack-plugin 
 2MB . MaximumFileSizeToCacheInBytes . 2
  91. 91. PWA: , ? 3
  92. 92. PWA: , ? 3 url . boxture.com/static/main.123.js url . 3
  93. 93. PWA … PWA ? ( , …) PWA . . e.g. Push ? …?
  94. 94. PWA … , / . , . ( …)
  95. 95. PWA … / “ ” “ ” , ‘ ’ . ( service worker unregister ) .
  96. 96. , PWA is the Future! Progressive Web App , !
  97. 97. react django https://github.com/milooy/react-django-pwa-kit react-django-pwa-kit ? PWA :)
  98. 98. . SMARTSTUDY BOXture ! https://smartstudy.workable.com/j/5F2249F024

×