Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web App (feat. React, Django)

6,046 views

Published on

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

Published in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/us9us4l } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/us9us4l } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/us9us4l } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/us9us4l } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/us9us4l } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/us9us4l } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×