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
130
PWA(Progressive Web APP)
사내 스터디 시간에 발표한 PWA 관련 자료입니다.
Jinny You
September 05, 2018
Tweet
Share
More Decks by Jinny You
See All by Jinny You
ThorVG's Lottie Model in Action
tinyjin
0
52
국민대학교 사제동행 세미나
tinyjin
0
150
Cumulus - Application Weakness Monitoring Software
tinyjin
1
18
개인정보와 개인정보 비식별화
tinyjin
0
39
PWA 품은 안드로이드 웹뷰 성능 개선기
tinyjin
0
830
Nice Place Cast
tinyjin
0
36
Webpack the module bundler
tinyjin
0
52
한국정보올림피아드 제대로 준비하기
tinyjin
0
51
2017 SW교육 학생동아리 Lecture 6.
tinyjin
0
44
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
Elm 0.19.0 Changes
bkuhlmann
0
490
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
890
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
900
Hanami and htmx
bkuhlmann
0
210
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
Node.js v22 で変わること
yosuke_furukawa
PRO
4
1.3k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
670
Snowflakeで眠ったデータを起こそう!
estie
0
110
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
Why Our Code Smells
bkeepers
PRO
331
56k
How GitHub (no longer) Works
holman
304
140k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Code Reviewing Like a Champion
maltzj
514
39k
We Have a Design System, Now What?
morganepeng
43
6.7k
Typedesign – Prime Four
hannesfritz
36
2.1k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
Design by the Numbers
sachag
274
18k
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/