PWA 파헤치기! 2019 Google Devfest 발표자료입니다. https://devfest-94093.firebaseapp.com/

1. 파헤치기
GDG Daejeon / Satrec Initiative
이상훈
PWA가 무엇이고 왜 중요한지, 또 어떻게 구현하는지 알아봅니다.

2. 발표 순서
● PWA 등장 히스토리
● FIRE!!
○ 웹앱 매니페스트
○ 서비스워커
○ 캐싱 전략
● PWA 적용 가이드
● LightHouse 소개
● 프론트엔드 3대장으로 적용하기

3. 더 나은 사용자 경험을 위해!
PWA의 등장
히스토리

4. Ajax를 통한 정적페이지에서
동적페이지 구축이 가능해짐
빠르게 발전한 웹 환경

5. 모바일 사용량의 증가
https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics

6. 모바일 웹 vs 모바일 앱
https://www.intellectsoft.net/blog/mobile-app-vs-mobile-website/

7. 모바일 웹 vs 모바일 앱
https://mindsea.com/app-stats/
https://www.statista.com/chart/3835/top-10-app-usage/

8. Capability and Reach
Capability
Reach
app
web

9. “사용자 경험을 획기적으로 증가시키는 것,
이것이 PWA의 핵심 모토이다.”

10. Fast
Integrated
Reliable
Engaging

11. Fast
시간은 돈이다!
● 53%의 사용자가 3초
로드가 걸리면 서비스를
포기하고 이탈한다.
https://wordpressmaintenancetips.tk/wp-experts/wordpress-multisite-velocity-overview-at-philadelphia/

12. Integrated
● 모바일 앱 사용자 경험
● 결제, 로그인, 미디어 재생 등이 사용자의
기기에서 자연스럽게 느낄 수 있어야 한다.

13. ● 웹 앱 매니페스트는 사용자가 앱을
볼 것으로 예상되는 영역에 어떻게
보이게 할 것인가를 개발자가
제어할 수 있는 JSON 파일
Web App Manifest

14. Web App Manifest
● name: icon에 표시되는 이름
● start_url: 실행 시 시작되는 url 주소
● display: 앱이 어떻게 실행될지 정하는
속성
○ fullscreen, standalone, browser 등
● orientation: 웹 앱의 화면 방향
○ any, landscape, portrait
● icon: 아이콘 이미지 및 크기

15. Payment Request API
● 브라우저가 판매자, 사용자, 결제 방법 사이에서
중재자 역할을 하도록 지원
● 결제 커뮤니케이션 흐름을 최대한 표준화
● 다양한 보안 결제 방법을 원활하게 지원
● 모든 브라우저, 기기 또는 플랫폼에서 작동

16. Payment Request API
● 지불 방법
○ 신용카드, android pay …
● 트랜젝션 정보
○ 거래 금액, 통화액
● 옵션
○ 배송 방법, 배송지

17. // Payment 방법
let paymentMethods = [
{
supportedMehods: ['basic-card'],
data: { supportedMehods: ['visa', 'mastercard', '...'] }
},
{
supportedMehods: ['https://android.pay/pay'],
data: { merchantID: '12345' }
}
]
// 트랜젝션 정보
let txInfo = {
total: {
label: 'Total',
amount: { currency: 'USD', value: '50.00' }
},
displayItems: [
{
label: 'Subtotal',
amount: { currency: 'USD', value: '50.00' }
}
]
}
// Optional: 배송 방법
txInfo.shippingOptions = [
{
id: 'standard',
label: 'Standard shipping',
amount: { currency: 'USD', value: '10.00' },
selected: true
},
{
id: 'express',
label: 'Express shipping',
amount: { currency: 'USD', value: '20.00' }
}
]

18. // PaymentRequest 생성
let pr = new PaymentRequest(paymentMethods, txInfo, options)
// Payment 요청 인터페이스 보여주기
pr.show().then(paymentResponse => {
return collectPayment(paymentResponse)
.then(res => {
paymentResponse.complete('success')
})
.catch(err => {
PaymentResponse.complete('fail')
})
})

19. Reliable
● 우리는 이제 온라인 환경에 익숙하다.
● 접속 환경이 안좋더라도 안정적을 동작해야한다. 공룡을 보는것을 싫어한다.

20. 서비스워커(Service-Worker)
● 브라우저가 백그라운드에서 실행하는 스크립트
● 웹 페이지와 별개로 작동
● 푸시 알림, 백그라운드 동기화, 캐싱 등 구현 가능

21. Proprietary + Confidential
서비스 워커 생명주기
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Idle
Register
Error
Install
Activated
Active
Terminated

22. // 서비스 워커 등록
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker Registered', reg))
.catch(err => console.log('Error registing Service Worker', err))
}

23. Proprietary + Confidential
서비스 워커 생명주기
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Idle
Register
Error
Install
Activated
Active
Terminated

24. // 설치 후 리소스 캐싱
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', '...'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll(filesToCache);
}).then(() => {
return self.skipWating();
})
);
});

25. Proprietary + Confidential
서비스 워커 생명주기
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Idle
Register
Error
Install
Activated
Active
Terminated

26. // 오래된 캐시 제거
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keyList => {
return Promise.all(keyList.map(key => {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
);
})

27. // fetch 이벤트 핸들러
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});

28. 캐싱 전략
● cache first
● 자주바뀌지 않는 리소스에 대해 좋다. 하지만 업데이트가 안된다.
● 캐시에 없는 리소스이고 네트워크가 않좋으면 성능이 떨어진다.

29. 캐싱 전략
● network first
● 온라인 사용자에게는 항상 최신의 콘텐츠를 제공
● 오프라인 사용자에게는 캐시된 버전 제공
● 역시나 네트워크가 좋지 못하면 로드가 느림

30. 캐싱 전략
● generic fallback
● 캐시와 네트워크에 둘다 실패하면 두번째 요청에서 캐시 데이터 사용
● 오프라인일 때 공룡이 아닌 개발자가 의도한 페이지 전시
○ 홈으로 돌아가기
○ 간단한 게임 페이지

31. Engaging
● Searchable, Linkable, Shareable
● 사용자 참여를 유지, 푸시알림(월간 사용자를 일간 사용자로 전환)

32. // 웹 푸시 지원 확인
if (('PushManager' in window) && ('ServiceWorker' in
navigator)) {
initWebPushUI();
}
// 서비스 워커 등록
function updateWebPushUI() {
getSWRegistration()
.then(reg => reg.pushManager.getSubscription())
.then(sub => {
cbSubscribed.checkd = !!sub;
sendSubscriptionToServer(sub);
})
}
// 메세지 리스닝
self.addEventListener('push', event => {
let data;
if (event.data) data = event.data.json();
else data = { title: 'Generic Message' };
self.registration.showNotification(data.title, {
body: data.body
});
});
// 사용자 클릭
self.addEventListener('notificationclick', event
=> {
if (event.action === 'download')
event.waitUntil(fetch('/book.pdf'));
else clients.openWindow('https://example.com');
})

33. 보다 강력한 경험을 제공하도록
설계된 PWA
홈화면 추가
스프레쉬 화면
전체 화면
푸시 알람
채팅으로 바로 연결
사진 찍어 트윗
낮은 사이즈
Twitter Lite

34. 보다 강력한 경험을 제공하도록
설계된 PWA
홈화면 추가
스프레쉬 화면
전체 화면
푸시 알람
채팅으로 바로 연결
사진 찍어 트윗
낮은 사이즈
Twitter Lite

35. Twitter Lite
24MB
214MB
0.6MB
Android
IOS
PWA

36. “GDG Daejeon Devfest 페이지도
PWA! 오프라인에서도 동작합니다!”
https://devfest-94093.firebaseapp.com/

37. “GDG Daejeon Devfest 페이지도
PWA! 오프라인에서도 동작합니다!”
https://devfest-94093.firebaseapp.com/

38. PWA 적용 가이드
● 새 서비스 처음부터 시작하기
● 기존 서비스에 간단한 버전 추가하기
● 기존 서비스에 임팩트 있는 단일 기능 추가하기

39. 새 서비스 처음부터 시작하기
● 서비스를 처음 개발하는 단계라면 PWA를 고려하여 구축하는 것이 합리적

40. 기존 서비스에 간단한 버전 추가하기
● ex) airberlin

41. 임팩트 있는 단일 기능 추가하기
● ex) the weather company

42. ● wego, expedia, trivago와 같은 여행업
● infobae forbes와 같은 출판사
● fandango, alibaba, rakuten과 같은 전자 상거래 서비스
● uber와 같은 승차 공유 서비스
● twitter와 같은 소셜네트워크 서비스

43. LightHouse

44. - Chrome 확장프로그램
- 커맨드 라인에서, 노드 모듈에서
프로그램으로도 사용 가능
- Lighthouse에 확인할 URL을 지정하고,
페이지에 대한 테스트를 실행한 다음,
페이지에 대한 보고서를 생성
- 여기에서 실패한 테스트는 앱을 개선하기
위해 할 수 있는 것에 대한 지표로 사용
웹 앱의 품질을 측정하는
오픈소스 자동화 도구

45. 프론트엔드
3대장으로 적용하기

46. Angular
● Angular CLI를 이용하여 프로젝트에 PWA
적용
○ sudo npm i @angular/cli -g
○ ng new my-pwa
○ ng add @angular/pwa
○ ngsw-config.json, manifest.webmanifest
파일 등 PWA에 필요한 파일 자동 생성

47. React
● create-react-app을 이용하여 프로젝트를 생성하면 설정하기 쉬움
● manifest.json, serviceWorker.js 파일 등 PWA에 필요한 파일을 직접 작성
● 혹은 pwa-manifest-cli 설치 후 자동 생성/수정

48. Vue
● Vue CLI를 이용하여 프로젝트에 PWA 적용
○ WorkBox 라이브러리 기반
○ vue create my-pwa
○ vue add @vue/pwa
○ manifest.json, registerServiceWorker.js 파일
등 PWA에 필요한 파일 자동 생성

49. 참고 리소스
● 다양한 예제, 코드랩, 이론 설명등이 있습니다.
● MDN PWA (https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps)
● Google developers PWA(https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko)

50. “Progressive Web App is Progressive.”

51. Thank You!
GDG Daejeon / Satrec Initiative
이상훈