Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)

마르코(장원석), 우아한테크코스 4기, 2022. 10. 27.
Progressive Web App
점진적으로 향상되는 웹 앱

목차
•1. PWA 개요
•2. 설치 가능하게 만들기
•3. 서비스 워커
•4. Web Push Notification
•5. 오프라인 실행 지원

• 프로그레시브 웹 앱(PWA)은 새롭게 떠오르는 웹 브라우저 API를
전통적인 점진적 향상(progressive enhancement) 기법과
함께 사용해서 네이티브 앱에 필적하는 사용자 경험을 제공하는
크로스 플랫폼 웹 애플리케이션을 말합니다. - MDN -
1. PWA 개요
1) PWA 정의
네이티브 앱에
서
만 구현할 수 있던 기능을
점진적으로 웹 기술로 구현
•점진적 향상(progressive enhancement)

모든 코드를 실행할 수 있는 최신 브라우저 사용자에게는 가능한
최고의 경험을 제공하면서 이전 브라우저를 포함한 가능한 많은
사용자들에게도 필수 기능과 콘텐츠를 제공하려는 디자인 철학
크로스 브라우징 지원
progressive enhancement
기능 탐지 및 폴리필
progressive enhancement란

크로스 브라우징 확인
progressive enhancement
https://www.browserstack.com/
브라우저 호환성 표 확인
https://caniuse.com/
CanIUse
BrowserStack
기기별, 브라우저별 크로스 브라우징
원격 시뮬레이팅하는 테스트 도구
(1분씩 무료, 로컬 가능)

1. PWA 개요
HTTPS
manifest.json
serviceWorker.js
2) PWA가 되기 요건
Web App

3) 활용 사례(Twitter Lite)
1. PWA 개요
mobile.twitter.com
구글플레이스토어 앱 설치
빠른 속도
데이터를 덜 사용
저장공간도 덜 차지
푸시 알림
오프라인 실행 지원
세션당 페이지 수 65% 증가
보
낸
트윗 75% 증가
이탈률 20% 감소
출처: https://web.dev/twitter/

3) 활용 사례(많은 앱들이 네이티브 앱 외에도 PWA를 추가 지원)
1. PWA 개요
https://appsco.pe
https://www.pwastats.com
PWA 예시 확인

1) Manifest 설정
2. 설치 가능하게 만들기
Web App Manifest는 브라우저에게
데스크톱이나 모바일 기기에
설치할 때 어떻게 작동해야 하는지
알려주는 JSON 형식의 파일
macOS iOS

1) Manifest 설정
manifest.json 파일을 최상위 디렉터리에 만든다.
index.html의 head 태그 내에 다음과 같은 링크 태그를 추가한다.
<link rel="manifest" href="manifest.json" />

2) manifest.json의 구성요소
background_color
theme_color
icons
name
short_name
description
orientation
display
display_override
scope
start_url
categories
screenshots
prefer_related_applications
related_applications
protocol_handlers
share_target
shortcuts
https://developer.mozilla.org/en-US/docs/Web/Manifest

MDN
https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json
Goolge Developers
https://web.dev/add-manifest/

3) 바로가기 추가 - Manifest(shortcuts)
manifest.json

4) 공유 대상 되기 - Manifest(share_target)
설치된 PWA가
시스템의 share dialog에
서
share target이 되도록 설정
manifest.json

5) 커스텀 설치 버튼 만들기
기본 설치 버튼
InApp 커스텀 설치 버튼

5) 커스텀 설치 버튼 만들기
any.js
beforeInstallPrompt 이벤트
설치 prompt 표시 전 감지
설치 prompt 표시안되도록 지
연
하고
변수에 BeforeInstallPromptEvent를 저장
BeforeInstallPromptEvent.prompt()
설치 prompt 표시

6) 예외 - iOS에
서
설치
iOS에
서
는 설치 prompt가
아직 지원되지 않음

1) 별도의 워커 스레드에
서
동작하는 특징
3. 서비스 워커
서비스워커
워커스레드
푸시서비스
캐시
백그라운드
오프라인
페이지가 닫혔더라도 또는 오프라인이어도 서비스워커는 계속 동작
웹페이지
메인스레드
User Agent
(웹브라우저)
푸시 알림 표시
Fetch 응답

2) 서비스 워커 등록
3. 서비스 워커
navigator.serviceWorker.register()
서비스워커의 scriptURL을 전달하여
서비스 워커 등록
index.js

3) 생명주기
3. 서비스 워커
Installing
Installed/
waiting
Activating Activated Redundant
register된 서비스워커는 위와 같은 생명주기를 거친다

Activated
3) 생명주기
3. 서비스 워커
Installed/
waiting
Activating Redundant
Installing
서비스 워커의 업데이트가 발견되는 경우 설치
(업데이트 여부는 기존 서비스 워커 파일과의 바이트 단위 비교
결
과에 따름)
Installing

Activating
Installing Activated
3) 생명주기
3. 서비스 워커
Redundant
Installed/
waiting
installed되도
기존 서비스워커가 제어하는 웹페이지가 켜져 있으면
waiting 상태가 유지됨
Installed /
waiting

Installing Activated
3) 생명주기
3. 서비스 워커
Redundant
대기중인 서비스워커
활성화하는 방
법
Activating
Installed/
waiting
1. 기존 서비스워커가 제어하는 웹페이지 닫기
2. 개발자도구에
서
skipWaiting 직접 누르기
3. install 이벤트 내 self.skipWaiting() 호출

Activated
Installed/
waiting
Installing
3) 생명주기
3. 서비스 워커
Redundant
Activating
기존 웹페이지가 모두 닫혀서
Activating 단계가 되더라도,
페이지를 새로고침하기 전까지 클라이언트를 제어할 수가 없음
Activating

Installed/
waiting
Installing
3) 생명주기
3. 서비스 워커
Redundant
클라이언트 제어권 부여 방
법
1. 사용자가 페이지를 새로고침
2. activate 이벤트 내 self.clients.claim() 호출
Activating Activated

3) 생명주기
3. 서비스 워커
Installing
Installed/
waiting
Activating Redundant
Activated
Activated
Acitvated되어 클라이언트를 제어하게 되면
fetch, sync, push 등의 기능 이벤트 제어 가능

Activated
3) 생명주기
3. 서비스 워커
Installing
Installed/
waiting
Activating
Redundant
새로운 서비스 워커로 대체되었을 때
곧 소
멸
될 서비스 워커의 상태
Redundant

4) 서비스 워커를 통해 처리할 수 있는 이벤트
3. 서비스 워커
푸시 알림 관
련
이벤트
push
pushsubscriptionchange
notificationclick
notificationclose
서비스 워커 설치 관
련
이벤트
install
activate
네트워크 요청 관
련
이벤트
fetch
백그라운드 동기화 관
련
이벤트
sync
클라이언트와 통신 관
련
이벤트
message

1) 백그라운드에
서
도 알림 수신
4. Web Push Notification
사용자의 재참여를
유도하는 데 유용한
built-in 자바스크립트만으로도 구현 가능
푸시 알림

2) Web Push의 브라우저 호환성 - 2022년 현재

iOS의 웹 푸시 지원 계획
출처 : https://www.apple.com/ios/ios-16-preview/features/
2023년 iOS 16 safari에
서
Web Push Notification 지원 예정

2) Web Push와 브라우저 호환성 - 2023년 예정
Linux
W
indow
s
m
acO
S
Android
iO
S

3) Web Push Protocol 개요
클라이언트
푸시 서비스
서버 서비스워커 User Agent
(웹브라우저)
푸시 알림 표시
(백그라운드)

4) 푸시 서비스 - FCM
푸시 메시지를 클라이언트(브라우저)로 전달하는 기능을 담당
Firebase 클라우드 메시징(FCM)
메시지를 안정적으로 무료 전송할 수 있는
크로스 플랫폼 메시징 솔루션

5) 알림 구독 과정
클라이언트
푸시 서비스
서버
3
.
구
독
정
보
를
응
답
P
u
s
h
S
u
b
s
c
r
i
p
t
i
o
n
공개키 암호화 방식 사용
(VAPID 인증 방식)
(브라우저)
4. 구독 정보 전달
POST API 요청
public
private
1. 공개키 전달 public
2
.
구
독
요
청
공
개
키
를
담
아
서
p
u
s
h
M
a
n
a
g
e
r
.
s
u
b
s
c
r
i
b
e
(
)
p
u
b
l
i
c
public
private

PushManager.subscribe() - "알림 구독하기"
index.js

PushSubscription
객
체 (구독정보)
endpoint: 푸시서비스에 구독된 특정 서비스워커 인스턴스에
푸시메세지를 전송하기 위해 사용되는 푸시서비스의 URL

6) 푸시 메시지 전송 과정
클라이언트
푸시 서비스
서버
(브라우저)
A
.
푸
시
메
시
지
전
송
메시지를 비공개 키로 암호화 후 전송
private
B
.
푸
시
메
시
지
전
송
public
공개키로 검증 후 메시지 전송
public
private
public
private

Push Event / showNotification() - "똑똑똑. 알림 왔어요"
4. Web Push Notification - Push API
registration.showNotification()
서비스워커가 알림 표시
백그라운드에
서
푸시서비스로부터
오는 푸시메시지 감지
notificationClick 이벤트
푸시 알림이 클릭되었을 때
clients.openWindow()
전달된 url의 새 윈도우 열기
•push 이벤트
serviceWorker.js

7) 백엔드용 라이브러리 소개
https://github.com/web-push-libs/web-push
https://github.com/web-push-libs/webpush-java
Java Node.js

Cache Storage API
5. 오프라인 실행 지원
•- 코드 기반 접근 방식으로서 개발자가 캐시 내용을 완벽하게 제어 가능
•- 서비스워커를 통해 제어할 수 있어 오프라인에
서
도 해당 캐시 사용 가능
•- 웹페이지 구성을 위한 기본적이며 정적인 구성 요소인 App Shell 캐싱
• 하는데 주로 사용 (html, css, js)
리소스 캐싱, 캐시 응답, 캐시 삭제

1) 리소스 캐싱하기
5. 오프라인 실행 지원 - Cache Storage
•caches.open()
• Cache.addAll()
•install 이벤트
• 서비스워커 등록되어
설치될 때
한번만 발생
• caches.open()
• - 첫 번째 인자로 문자
열
로 된 캐시 이름을 전달하여
해당되는 캐시를 열거나
존
재하지 않는 경우 새로운 캐시를 생성
• - Cache
객
체를 resolve하는 프로미스를 반환
• Cache.addAll()
• - 리소스 요청 문자
열
값으로 구성된 배열을 인자로 받아 모든 리소스를 캐시 스토리지에 캐싱
•

1) 리소스 캐싱하기
캐싱
결
과

2) 캐시에
서
응답하기
• event.respondWith()
• - 브라우저의 기본 요청을 막고 서비스 워커에
서
리소스를 대신 응답하는 메소드
• caches.match()
• - 인자로 전달된 URL 문자
열
이나 Request가 캐시된 Response의 key와 일치하는지 확인
• - 캐시에
서
리소스를 찾으면 Response에 대한 프로미스를 반환
•caches.match()
•fetch 이벤트
• event.respondWith()
• Cache First 전략
•
먼
저 캐시에
서
응답하고
• 없으면 네트워크 요청하여 응답
• 웹페이지에
서
네트워크
요청을 수행할 때 발생
serviceWorker.js

2) 캐시에
서
응답하기

3) 불필요한 캐시 삭제하기
•caches.keys()
•activate 이벤트
•caches.delete()
• 캐시 스토리지의 모든 캐시 목록 배열을
resolve하는 프로미스를 반환
• 메소드의 첫 인자로 캐시 이름을 전달하여
지정한 캐시를 제거
• 새로운 서비스 워커가 활성화될 때 발생
serviceWorker.js

Lighthouse / PWABuilder
PWA 감사(audit)

•캐싱을 편리하게 돕는 구글의 WorkBox Library
•동적 게시물 캐싱에 적합한 IndexedDB API
•백그라운드 동기화를 위한 sync 이벤트
•앱 아이콘의 배지 숫자 변경을 위한 Badging API
•다른 앱에 공유하기 위한 Share API
•멀티스레드 간 통신하기 위한 Broadcast Channel API
•위치정보를 얻기 위한 Geolocation API
•블루투스 연결을 위한 Web Bluetooth API
•모바일 연락처 접근을 위한 Contact Picker API
•사용자의 유휴 상태 감지를 위한 Idle Detection API
•다바이스의 파일을 읽고 쓰기 위한 File System Access API
•안드로이드앱 등으로 변환하여 스토어에 배포
웹 앱을 위한 점진적으로 향상되는 다양한 기술들
더 살펴보면 좋을 내용

Google - Learn PWA
(https://web.dev/learn/pwa/)
MDN - 프로그레시브 웹 앱
(https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps)
[도서] SNS 앱 예제로 배우는 프로그레시브 웹 앱
iOS 16 preview feature
(https://www.apple.com/ios/ios-16/features/)
Firebase 클라우드 메시징
(https://firebase.google.com/docs/cloud-messaging?hl=ko)
MDN - 점진적 향상
(https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement)
Reference

감사합니다
•1. PWA 개요
•2. 설치 가능하게 만들기
•3. 서비스 워커
•4. Web Push Notification
•5. 오프라인 실행 지원

Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)

Semelhante a Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석) (20)

Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)