Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 50 Ad

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

Download to read offline

우아한테크코스 4기 마르코(장원석) 테코톡 발표자료
Progressive Web App의 service worker, manifest, push notifcation, cache 등을 중심으로

장원석
nextjws@gmail.com
https://wonsss.github.io/

우아한테크코스 4기 마르코(장원석) 테코톡 발표자료
Progressive Web App의 service worker, manifest, push notifcation, cache 등을 중심으로

장원석
nextjws@gmail.com
https://wonsss.github.io/

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

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

  1. 1. 마르코(장원석), 우아한테크코스 4기, 2022. 10. 27. Progressive Web App 점진적으로 향상되는 웹 앱
  2. 2. 목차 •1. PWA 개요 •2. 설치 가능하게 만들기 •3. 서비스 워커 •4. Web Push Notification •5. 오프라인 실행 지원
  3. 3. • 프로그레시브 웹 앱(PWA)은 새롭게 떠오르는 웹 브라우저 API를 전통적인 점진적 향상(progressive enhancement) 기법과 함께 사용해서 네이티브 앱에 필적하는 사용자 경험을 제공하는 크로스 플랫폼 웹 애플리케이션을 말합니다. - MDN - 1. PWA 개요 1) PWA 정의 네이티브 앱에 서 만 구현할 수 있던 기능을 점진적으로 웹 기술로 구현 •점진적 향상(progressive enhancement)
  4. 4. 모든 코드를 실행할 수 있는 최신 브라우저 사용자에게는 가능한 최고의 경험을 제공하면서 이전 브라우저를 포함한 가능한 많은 사용자들에게도 필수 기능과 콘텐츠를 제공하려는 디자인 철학 크로스 브라우징 지원 progressive enhancement 기능 탐지 및 폴리필 progressive enhancement란
  5. 5. 크로스 브라우징 확인 progressive enhancement https://www.browserstack.com/ 브라우저 호환성 표 확인 https://caniuse.com/ CanIUse BrowserStack 기기별, 브라우저별 크로스 브라우징 원격 시뮬레이팅하는 테스트 도구 (1분씩 무료, 로컬 가능)
  6. 6. 1. PWA 개요 HTTPS manifest.json serviceWorker.js 2) PWA가 되기 요건 Web App
  7. 7. 3) 활용 사례(Twitter Lite) 1. PWA 개요 mobile.twitter.com 구글플레이스토어 앱 설치 빠른 속도 데이터를 덜 사용 저장공간도 덜 차지 푸시 알림 오프라인 실행 지원 세션당 페이지 수 65% 증가 보 낸 트윗 75% 증가 이탈률 20% 감소 출처: https://web.dev/twitter/
  8. 8. 3) 활용 사례(많은 앱들이 네이티브 앱 외에도 PWA를 추가 지원) 1. PWA 개요 https://appsco.pe https://www.pwastats.com PWA 예시 확인
  9. 9. 1) Manifest 설정 2. 설치 가능하게 만들기 Web App Manifest는 브라우저에게 데스크톱이나 모바일 기기에 설치할 때 어떻게 작동해야 하는지 알려주는 JSON 형식의 파일 macOS iOS
  10. 10. 1) Manifest 설정 2. 설치 가능하게 만들기 manifest.json 파일을 최상위 디렉터리에 만든다. index.html의 head 태그 내에 다음과 같은 링크 태그를 추가한다. <link rel="manifest" href="manifest.json" />
  11. 11. 2) manifest.json의 구성요소 2. 설치 가능하게 만들기 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
  12. 12. 2. 설치 가능하게 만들기 MDN https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json Goolge Developers https://web.dev/add-manifest/
  13. 13. 2. 설치 가능하게 만들기 3) 바로가기 추가 - Manifest(shortcuts) manifest.json
  14. 14. 2. 설치 가능하게 만들기 4) 공유 대상 되기 - Manifest(share_target) 설치된 PWA가 시스템의 share dialog에 서 share target이 되도록 설정 manifest.json
  15. 15. 2. 설치 가능하게 만들기 5) 커스텀 설치 버튼 만들기 기본 설치 버튼 InApp 커스텀 설치 버튼
  16. 16. 2. 설치 가능하게 만들기 5) 커스텀 설치 버튼 만들기 any.js beforeInstallPrompt 이벤트 설치 prompt 표시 전 감지 설치 prompt 표시안되도록 지 연 하고 변수에 BeforeInstallPromptEvent를 저장 BeforeInstallPromptEvent.prompt() 설치 prompt 표시
  17. 17. 6) 예외 - iOS에 서 설치 2. 설치 가능하게 만들기 iOS에 서 는 설치 prompt가 아직 지원되지 않음
  18. 18. 1) 별도의 워커 스레드에 서 동작하는 특징 3. 서비스 워커 서비스워커 워커스레드 푸시서비스 캐시 백그라운드 오프라인 페이지가 닫혔더라도 또는 오프라인이어도 서비스워커는 계속 동작 웹페이지 메인스레드 User Agent (웹브라우저) 푸시 알림 표시 Fetch 응답
  19. 19. 2) 서비스 워커 등록 3. 서비스 워커 navigator.serviceWorker.register() 서비스워커의 scriptURL을 전달하여 서비스 워커 등록 index.js
  20. 20. 3) 생명주기 3. 서비스 워커 Installing Installed/ waiting Activating Activated Redundant register된 서비스워커는 위와 같은 생명주기를 거친다
  21. 21. Activated 3) 생명주기 3. 서비스 워커 Installed/ waiting Activating Redundant Installing 서비스 워커의 업데이트가 발견되는 경우 설치 (업데이트 여부는 기존 서비스 워커 파일과의 바이트 단위 비교 결 과에 따름) Installing
  22. 22. Activating Installing Activated 3) 생명주기 3. 서비스 워커 Redundant Installed/ waiting installed되도 기존 서비스워커가 제어하는 웹페이지가 켜져 있으면 waiting 상태가 유지됨 Installed / waiting
  23. 23. Installing Activated 3) 생명주기 3. 서비스 워커 Redundant 대기중인 서비스워커 활성화하는 방 법 Activating Installed/ waiting 1. 기존 서비스워커가 제어하는 웹페이지 닫기 2. 개발자도구에 서 skipWaiting 직접 누르기 3. install 이벤트 내 self.skipWaiting() 호출
  24. 24. Activated Installed/ waiting Installing 3) 생명주기 3. 서비스 워커 Redundant Activating 기존 웹페이지가 모두 닫혀서 Activating 단계가 되더라도, 페이지를 새로고침하기 전까지 클라이언트를 제어할 수가 없음 Activating
  25. 25. Installed/ waiting Installing 3) 생명주기 3. 서비스 워커 Redundant 클라이언트 제어권 부여 방 법 1. 사용자가 페이지를 새로고침 2. activate 이벤트 내 self.clients.claim() 호출 Activating Activated
  26. 26. 3) 생명주기 3. 서비스 워커 Installing Installed/ waiting Activating Redundant Activated Activated Acitvated되어 클라이언트를 제어하게 되면 fetch, sync, push 등의 기능 이벤트 제어 가능
  27. 27. Activated 3) 생명주기 3. 서비스 워커 Installing Installed/ waiting Activating Redundant 새로운 서비스 워커로 대체되었을 때 곧 소 멸 될 서비스 워커의 상태 Redundant
  28. 28. 4) 서비스 워커를 통해 처리할 수 있는 이벤트 3. 서비스 워커 푸시 알림 관 련 이벤트 push pushsubscriptionchange notificationclick notificationclose 서비스 워커 설치 관 련 이벤트 install activate 네트워크 요청 관 련 이벤트 fetch 백그라운드 동기화 관 련 이벤트 sync 클라이언트와 통신 관 련 이벤트 message
  29. 29. 1) 백그라운드에 서 도 알림 수신 4. Web Push Notification 사용자의 재참여를 유도하는 데 유용한 built-in 자바스크립트만으로도 구현 가능 푸시 알림
  30. 30. 2) Web Push의 브라우저 호환성 - 2022년 현재 4. Web Push Notification
  31. 31. iOS의 웹 푸시 지원 계획 4. Web Push Notification 출처 : https://www.apple.com/ios/ios-16-preview/features/ 2023년 iOS 16 safari에 서 Web Push Notification 지원 예정
  32. 32. 2) Web Push와 브라우저 호환성 - 2023년 예정 4. Web Push Notification Linux W indow s m acO S Android iO S
  33. 33. 3) Web Push Protocol 개요 4. Web Push Notification 클라이언트 푸시 서비스 서버 서비스워커 User Agent (웹브라우저) 푸시 알림 표시 (백그라운드)
  34. 34. 4) 푸시 서비스 - FCM 4. Web Push Notification 푸시 메시지를 클라이언트(브라우저)로 전달하는 기능을 담당 Firebase 클라우드 메시징(FCM) 메시지를 안정적으로 무료 전송할 수 있는 크로스 플랫폼 메시징 솔루션
  35. 35. 5) 알림 구독 과정 4. Web Push Notification 클라이언트 푸시 서비스 서버 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
  36. 36. PushManager.subscribe() - "알림 구독하기" 4. Web Push Notification index.js
  37. 37. PushSubscription 객 체 (구독정보) 4. Web Push Notification endpoint: 푸시서비스에 구독된 특정 서비스워커 인스턴스에 푸시메세지를 전송하기 위해 사용되는 푸시서비스의 URL
  38. 38. 6) 푸시 메시지 전송 과정 4. Web Push Notification 클라이언트 푸시 서비스 서버 (브라우저) A . 푸 시 메 시 지 전 송 메시지를 비공개 키로 암호화 후 전송 private B . 푸 시 메 시 지 전 송 public 공개키로 검증 후 메시지 전송 public private public private
  39. 39. Push Event / showNotification() - "똑똑똑. 알림 왔어요" 4. Web Push Notification - Push API registration.showNotification() 서비스워커가 알림 표시 백그라운드에 서 푸시서비스로부터 오는 푸시메시지 감지 notificationClick 이벤트 푸시 알림이 클릭되었을 때 clients.openWindow() 전달된 url의 새 윈도우 열기 •push 이벤트 serviceWorker.js
  40. 40. 7) 백엔드용 라이브러리 소개 4. Web Push Notification https://github.com/web-push-libs/web-push https://github.com/web-push-libs/webpush-java Java Node.js
  41. 41. Cache Storage API 5. 오프라인 실행 지원 •- 코드 기반 접근 방식으로서 개발자가 캐시 내용을 완벽하게 제어 가능 •- 서비스워커를 통해 제어할 수 있어 오프라인에 서 도 해당 캐시 사용 가능 •- 웹페이지 구성을 위한 기본적이며 정적인 구성 요소인 App Shell 캐싱 • 하는데 주로 사용 (html, css, js) 리소스 캐싱, 캐시 응답, 캐시 삭제
  42. 42. 1) 리소스 캐싱하기 5. 오프라인 실행 지원 - Cache Storage •caches.open() • Cache.addAll() •install 이벤트 • 서비스워커 등록되어 설치될 때 한번만 발생 • caches.open() • - 첫 번째 인자로 문자 열 로 된 캐시 이름을 전달하여 해당되는 캐시를 열거나 존 재하지 않는 경우 새로운 캐시를 생성 • - Cache 객 체를 resolve하는 프로미스를 반환 • Cache.addAll() • - 리소스 요청 문자 열 값으로 구성된 배열을 인자로 받아 모든 리소스를 캐시 스토리지에 캐싱 •
  43. 43. 1) 리소스 캐싱하기 5. 오프라인 실행 지원 - Cache Storage 캐싱 결 과
  44. 44. 2) 캐시에 서 응답하기 5. 오프라인 실행 지원 - Cache Storage • event.respondWith() • - 브라우저의 기본 요청을 막고 서비스 워커에 서 리소스를 대신 응답하는 메소드 • caches.match() • - 인자로 전달된 URL 문자 열 이나 Request가 캐시된 Response의 key와 일치하는지 확인 • - 캐시에 서 리소스를 찾으면 Response에 대한 프로미스를 반환 •caches.match() •fetch 이벤트 • event.respondWith() • Cache First 전략 • 먼 저 캐시에 서 응답하고 • 없으면 네트워크 요청하여 응답 • 웹페이지에 서 네트워크 요청을 수행할 때 발생 serviceWorker.js
  45. 45. 2) 캐시에 서 응답하기 5. 오프라인 실행 지원 - Cache Storage
  46. 46. 3) 불필요한 캐시 삭제하기 5. 오프라인 실행 지원 - Cache Storage •caches.keys() •activate 이벤트 •caches.delete() • 캐시 스토리지의 모든 캐시 목록 배열을 resolve하는 프로미스를 반환 • 메소드의 첫 인자로 캐시 이름을 전달하여 지정한 캐시를 제거 • 새로운 서비스 워커가 활성화될 때 발생 serviceWorker.js
  47. 47. Lighthouse / PWABuilder PWA 감사(audit)
  48. 48. •캐싱을 편리하게 돕는 구글의 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 •안드로이드앱 등으로 변환하여 스토어에 배포 웹 앱을 위한 점진적으로 향상되는 다양한 기술들 더 살펴보면 좋을 내용
  49. 49. 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
  50. 50. 감사합니다 •1. PWA 개요 •2. 설치 가능하게 만들기 •3. 서비스 워커 •4. Web Push Notification •5. 오프라인 실행 지원

×