Software Engineer of SMARTSTUDY

Jay Jin

React Django

Progressive Web App

.

SMARTSTUDY

.

300+

/ / …

… the Hell

, , ! ! 1~2 .

, , ! ! 1~2 .

2 ~

&

&

BOXture !a.k.a

Box + Future

BOXture: Web Application

PC/Mobile

… + ?

… + ?

🤡 “ ! ERP .”

… + ?

🤡

👽

“ ! ERP .”

“ … .

.”

Progressive Web App , !

Progressive Web App , !

? vue.js ? (X)

PWA .

PWA .

, PWA Web App Manifest & Service Worker

What Maketh PWA?

PWA 1.

“ . ! ”

“ . !”

, ,

PWA 2.

/ , , ( ) .

PWA 3. &

PWA 4. PWA

PWA

PWA

1

PWA

1 2

1 .

Why?

Before&After

Why?

Before&After

1. https://boxture. .com 2. 2MB Single Page App

Why?

Before&After

1. url https://boxture. .com 2. 2MB Single Page App

1. 2. ( )

Step1.

Step1.

App Contents , App Shell

? Service Worker!

? Service Worker!

? Service Worker!

? Service Worker!

? Service Worker!

Service Worker?

,

, ?

, ?

Cache-First Strategy

Cache-First Strategy

( )

Cache-First Strategy

( )

Cache-First Strategy

( )

Cache-First Strategy

( )

= main.js

Cache-First StrategyA.

from ServiceWorker( X)

Cache-First StrategyA.

from ServiceWorker( X)

O

Cache-First StrategyA.

from ServiceWorker( X)

O

B.

from ServiceWorker( X)

‘service.worker.js’

‘service.worker.js’

create-react-app registerServiceWorker.js

service-worker.js

service-worker.js

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

sw-precache

sw-precache

sw-precache

sw-precache

CRA SWPrecacheWebpackPlugin build service-worker.js .

!

!

? (disk cache)

vs • First visit . X

• Cleared , ( 19% 1

)

• Purged

• Expired 69% 1

• Revved ,

vs • First visit . X

• Cleared , ( 19% 1

)

• Purged

• Expired 69% 1

• Revved ,

“ ~”

Step2.

Progressive Web App manifest.json

Step2.

Progressive Web App manifest.json

, manifest.json ‘ ’

Step2.

! ?

! ?

1. Webkit Service Worker In Development ( 8 Planned )

https://webkit.org/status/#?search=service%20worker

1. Webkit Service Worker In Development ( 8 Planned )

2. MacOS

https://webkit.org/status/#?search=service%20worker

https://blog.izooto.com/chrome-59-os/

2 . Web Push

Why?

Before&After

Why?

Before&After

. 300 BEFORE

Why?

Before&After

. 300 BEFORE

3000 ‘ ’ , 300 ‘ ’ !AFTER

Firebase Cloud Messaging

• GCM FCM(Firebase Cloud Messaging)

• .

Firebase Cloud Messaging

• GCM FCM(Firebase Cloud Messaging)

• .

Push Service Worker !

firebase.messaging

Web Push

Web Push

/

Web Push

/

Web Push

new Notification(title, options) self.registration.showNotification(title, options)

manifest.json

Progressive Web App FCM

manifest.json .

( 103953800507 )

! cURL

! : Pyfcm

http://olucurious.github.io/PyFCM/

Push

title, body

3000 , 300 send_push

Push Notification !

, PC .

( )

PWA

1

2Done!

PWA,

PWA:

PWA

“ ?”

PWA:

PWA

“ ?”

CRA Service worker manifest

PWA: ,

PWA: ,

?

1

PWA: ,

?

1

It’s not a Bug, It’s a Feature. (Cache-First Strategy)

location.reload() .

1

PWA: ,

?

1

It’s not a Bug, It’s a Feature. (Cache-First Strategy)

location.reload() .

1

sw-precache

main.js ?

2

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

PWA: ,

?

3

PWA: ,

?

3

url . boxture.com/static/main.123.js

url .

3

PWA …

PWA ?

( , …) PWA . .

e.g. Push ? …?

PWA …

,

/ .

, . ( …)

PWA …

/

“ ” “ ” ,

‘ ’ . ( service worker unregister )

.

, PWA is the Future!

Progressive Web App

, !

react django

https://github.com/milooy/react-django-pwa-kit

react-django-pwa-kit

? PWA :)

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