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

1. Software Engineer of SMARTSTUDY
Jay Jin
React Django
Progressive Web App

2. .

3. SMARTSTUDY
.

4. 300+
/ / …

5. … the Hell

6. , , !
! 1~2 .

7. , , !
! 1~2 .
2 ~

9. &

10. &
BOXture !
a.k.a
Box + Future

11. BOXture: Web Application
PC/Mobile

12. … + ?

13. … + ?
🤡 “ !
ERP .”

14. … + ?
🤡
👽
“ !
ERP .”
“
… .
.”

15. Progressive Web App ,
!

16. Progressive Web App ,
!
?
vue.js ? (X)

17. PWA .

18. PWA .
,
PWA Web App Manifest & Service Worker

19. What Maketh PWA?

20. PWA 1.
“ . ! ”
“ . !”

21. , ,
PWA 2.

22. / ,
, ( ) .
PWA 3. &

23. PWA 4.
PWA

24. PWA

25. PWA
1

26. PWA
1 2

27. 1 .

28. Why?
Before&After

29. Why?
Before&After
1. https://boxture. .com
2. 2MB Single Page App

30. Why?
Before&After
1. url https://boxture. .com
2. 2MB Single Page App
1.
2. ( )

31. Step1.

32. Step1.
App Contents ,
App Shell

33. ? Service Worker!

34. ? Service Worker!

35. ? Service Worker!

36. ? Service Worker!

37. ? Service Worker!

38. Service Worker?

39. ,

40. ,
?

41. ,
?
Cache-First Strategy

42. Cache-First Strategy
( )

43. Cache-First Strategy
( )

44. Cache-First Strategy
( )

45. Cache-First Strategy
( )
= main.js

46. Cache-First Strategy
A.
from ServiceWorker( X)

47. Cache-First Strategy
A.
from ServiceWorker( X)
O

48. Cache-First Strategy
A.
from ServiceWorker( X)
O
B.
from ServiceWorker( X)

49. ‘service.worker.js’

50. ‘service.worker.js’
create-react-app
registerServiceWorker.js

51. service-worker.js

52. service-worker.js
( ) create-react-app
service-worker.js

53. sw-precache

54. sw-precache

55. sw-precache

56. sw-precache
CRA SWPrecacheWebpackPlugin
build service-worker.js .

57. !

58. !
?
(disk cache)

59. vs
• First visit . X
• Cleared , ( 19% 1
)
• Purged
• Expired 69% 1
• Revved ,

60. vs
• First visit . X
• Cleared , ( 19% 1
)
• Purged
• Expired 69% 1
• Revved ,
“ ~”

61. Step2.
Progressive Web App
manifest.json

62. Step2.
Progressive Web App
manifest.json

63. , manifest.json
‘ ’
Step2.

65. ! ?

66. ! ?

67. 1. Webkit Service Worker
In Development
( 8 Planned )
https://webkit.org/status/#?search=service%20worker

68. 1. Webkit Service Worker
In Development
( 8 Planned )
2. MacOS
https://webkit.org/status/#?search=service%20worker
https://blog.izooto.com/chrome-59-os/

69. 2 . Web Push

70. Why?
Before&After

71. Why?
Before&After
.
300
BEFORE

72. Why?
Before&After
.
300
BEFORE
3000 ‘ ’ ,
300 ‘ ’ !
AFTER

73. Firebase Cloud Messaging
• GCM
FCM(Firebase Cloud Messaging)
•
.

74. Firebase Cloud Messaging
• GCM
FCM(Firebase Cloud Messaging)
•
.
Push
Service Worker !

77. firebase.messaging

80. Web Push

81. Web Push
/

82. Web Push
/

83. Web Push
new Notification(title, options) self.registration.showNotification(title, options)

84. manifest.json
Progressive Web App FCM
manifest.json
.
( 103953800507 )

85. ! cURL

86. ! : Pyfcm
http://olucurious.github.io/PyFCM/
Push
title, body
3000 , 300 send_push

87. Push Notification !
,
PC .
( )

88. PWA
1 2
Done!

89. PWA,

90. PWA:
PWA
“ ?”

91. PWA:
PWA
“ ?”
CRA Service worker manifest

92. PWA: ,

93. PWA: ,
?
1

94. PWA: ,
?
1
It’s not a Bug, It’s a Feature. (Cache-First Strategy)
location.reload() .
1

95. PWA: ,
?
1
It’s not a Bug, It’s a Feature. (Cache-First Strategy)
location.reload() .
1
sw-precache
main.js ?
2

96. 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

97. PWA: ,
?
3

98. PWA: ,
?
3
url .
boxture.com/static/main.123.js
url .
3

100. PWA …
PWA ?
( , …) PWA .
.
e.g. Push ? …?

101. PWA …
,
/
.
, .
( …)

102. PWA …
/
“ ” “ ” ,
‘ ’ .
( service worker unregister )
.

103. , PWA is the Future!
Progressive Web App
, !

104. react django
https://github.com/milooy/react-django-pwa-kit
react-django-pwa-kit
?
PWA :)

105. .
SMARTSTUDY BOXture !
https://smartstudy.workable.com/j/5F2249F024