Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA(Progressive Web APP)
Search
Jinny You
September 05, 2018
Programming
1
150
PWA(Progressive Web APP)
사내 스터디 시간에 발표한 PWA 관련 자료입니다.
Jinny You
September 05, 2018
Tweet
Share
More Decks by Jinny You
See All by Jinny You
디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ - Figma Config Watch Party Seoul
tinyjin
0
71
인디 앱 개발자와 Flutter
tinyjin
0
380
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
39
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
330
韩国的打卡地:你喜欢海边吗?
tinyjin
0
38
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
87
エンジニアが見つめるLottieアニメーション
tinyjin
0
110
ThorVG's Lottie Model in Action
tinyjin
0
220
국민대학교 사제동행 세미나
tinyjin
0
380
Other Decks in Programming
See All in Programming
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Select API from Kotlin Coroutine
jmatsu
1
190
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
760
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.2k
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
VS Code Update for GitHub Copilot
74th
1
310
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
ニーリーにおけるプロダクトエンジニア
nealle
0
130
GoのGenericsによるslice操作との付き合い方
syumai
3
680
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
840
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
470
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Site-Speed That Sticks
csswizardry
10
660
Documentation Writing (for coders)
carmenintech
71
4.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Transcript
Progressive Web APP 2018-09-05 개발팀 유진의
PWA 란 Progressive Web APP의 약자로, 네이티브 앱과 같은 사용자
경험을 주는 새로운 웹 앱. 더 나아가, 기존의 웹이 할 수 없었던, 오프라인 서비스가 가능해짐.
PWA의 기반 기술 Manifest.json
W3C Web Manifest Manifest.json 웹 앱의 자원과 모습(스플래시 등)을 브라우저에게
알려주는 역할. PWA 뿐만 아니라 모든 웹 앱에서 사용 될 수 있음. (옵션) PWA에서는 필수!
Service Worker PWA를 실현시켜주는 주요 기술! 웹 앱의 자원을 캐슁해주고,
Push 이벤트를 받아옴!
PWA의 특징 1. 빠르다. (웹의 모든 자원을 캐시하기 때문) 2.
유연하다. (클릭 한번으로 네이티브 환경에 설치, 오프라인, Push 지원) 3. 비용이 적다. (개발 비용이 적음)
PWA의 구현 Step – 1. sw.js 작성
PWA의 구현 Step – 2. manifest.json 작성
PWA의 동향 - 지원 브라우저 - Web Notification/Push
PWA 기반 서비스 https://pwa.rocks/
PWA의 동작 https://latest-web-tech.herokuapp.com/ 아래의 링크에서 확인가능~!
PWA On Webpack PWA 개발에 Webpack을 적용시 간소화된 번들 파일
덕분에 PWA 구성이 쉬웠다. 심지어 Manifest나 App Cache Index를 Webpack Plugin이 자동으로 생성해준다. 추천 플러그인 (published on npm) - Serviceworker-webpack-plugin - Webpack-manifest-plugin
PWA 실습 환경 추천 위 서비스들은 https가 기본적으로 구축되어 있기
때문에 PWA를 쉽고 빠르게 테스트해볼 수 있다.
PWA 관련 문서 1. 구글 CODE LABS https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko 2. MDN
Docs https://developer.mozilla.org/ko/docs/Apps/Progressive 3. MDN pwa-examples https://github.com/mdn/pwa-examples
링크 - Github https://github.com/tinyjin/latest-web-tech - PWA Example Site https://latest-web-tech.herokuapp.com/