Kitworks Team Study

1. Progressive
Web
App
KITWORKS 유현주

2. 01 PWA란?
02 주요특징& 필요성
03 PWA 핵심기술
04 실습
05 적용사례& 미래전망
06 마무리& QnA
Index

3. Progressive Web App

4. 낮은개발비용
기기호환성
쉬운배포& 업데이트
Web Native App
오프라인지원
최적화된성능
스마트폰기능활용
개발비용및시간
타플랫폼대응
업데이트관리
😭
😭
브라우저호환성
성능제약
액세스권한제한
😊 😊

5. 오프라인지원및
푸시알림& 자원캐싱
이모든걸서비스워커가해냅니다...
안전성
HTTPs를통한보안연결을
강제하여사용자데이터를보호
다양한기기에일관성
모바일, 태블릿, 데스크탑등
다양한기기에일관된경험제공
(홈화면에앱아이콘추가도가능!)
주요특징& 필요성

6. Service Worker
Web App Manifest
PWA 핵심기술
브라우저가백그라운드에서실행하는
스크립트로, 네트워크요청을가로채고
캐싱, 푸시알림등을처리
웹앱의설명과외관을정의하는JSON
형식의파일

7. Web App Manifest
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
short_name : 사용자홈화면아이콘이름
name : 웹앱설치아이콘에사용
icons : 홈화면추가시사용할이미지(48px 단위로제공)
start_url : 웹앱실행시시작되는URL 주소
display : 디스플레이유형(fullscreen, standalone, browser 등)
theme_color : 상단툴바색상
background_color : 스플래시화면배경색상
orientation : 특정방향을강제로지정(landscape, portrait 중설정)

8. Service Worker
Life Cycle
중복
(Redunant)
설치중
(Installing)
설치됨/대기중
(Installed/Wating)
활성화됨
(Activated)
활성화중
(Activating)

9. Check List
빠른사용이가능하다.
다양한
오프라인경험을제공한다.
모든브라우저와기기에서
작동한다.
앱수준의
강력한기능을사용한다.
기본오프라인페이지를
제공한다.
모든사람에게
접근성을제공한다.
설치가가능하다.
검색엔진으로찾기쉽다.
(SEO)

13. 실습과정
STEP 1
npx create-react-app [프로젝트명]
--template cra-template-pwa
프로젝트템플릿코드추가
STEP 2
npm install -g serve
단일페이지로드도구설치
STEP 3
파비콘, 앱아이콘, 오프라인페이지등
커스터마이징가능
service-worker.js, manifest.json 수정
STEP 4
npm run build
npx serve -s build
빌드및웹서버에서확인
STEP 5
Vercel 등배포도구사용하여배포
배포

14. 적용사례 & 미래전망
트위터
핀터레스트
스타벅스

15. Reference
01 web.dev - 프로그레시브웹앱
02 MDN - Service Worker API
03 위시켓블로그- 프로그레시브웹앱(PWA)이란무엇이며, 왜필요한가?
04 하늘네트- 네이티브vs 하이브리드vs PWA 정의와장단점
05 드림코딩- PWA (Progressive Web App) 개념과따라만들기
06 wish.log - PWA에대해알아보자